Placido-Shop

  Create a page in the back-end

Note: There is a bug, if you see the code rendered online on this page,
click on a button or a link on this site and go back in the history, the code will be rendered in bulk...

To create a page in the back-end, follow these instructions:

1/ Add a link in navbar :
- in templates/backend_base.html
- find id="navbar"
- add an item ex. for "my_tab" :

		<button onclick="$.open_vue('my_tab', event);"
			data-target="my_tab"
			class="menu_left bar-item border-gray border-top hover-dark-gray padding pointer">
			<i class="fas fa-home"></i>
			  </button>
		
	

2/ Create template :
- in templates/ add a file : my_tab.html
- ex. for templates/my_tab.html :

		<!-- id="my_tab" -->
			<script id="my_tab" type="text/html">
				<!-- container gen  -->
				<div id="my_tab" class="padding">
					<p>
						hello from my_tab.html !
					</p>
				</div>
			</script>
		
	

3/ Insert page in the template controller :
-> see : templates/backend_base.html
-> find : id="page_gen"
- insert, ex. :

		{{#vue.my_tab}}
				 {{>my_tab}}
			{{/vue.my_tab}}
		
	

4/ Manage view template + history :
- in JS/main.js -> see the function $.open_vue( vue, module_name );
add : ( into the Switch )

		case 'my_tab':
					 // This allows your page to be displayed on view
					 $.o.vue.my_tab = true;
					 // This is the title on the header of your page
					 $.o.vue.title = $.o.tr.my_tab_translate_title;
					 // This is the icon on the header of your page
					 $.o.vue.icon = 'fas fa-flask';
				break;
		
	

5/ Auto-Load template and add it to Mustache manager :
- in JS/tools.js -> see : const Templates = [ ... ];
- add your template ex. :

		const Templates = [
				...,
				'templates/my_tab.html'
			];
		
	

6/ If you want to use a specific .js file :
- in JS/ add : my_tab.js ( now you have : JS/my_tab.js )
- for load script :
- in JS/tools.js see : const ARR_scripts = [ ... ];
- add your srcipt to the array ex. :

		const ARR_scripts = [
				... ,
				'JS/my_tab.js'
			];
		
	

Tutorial : Fire directly a function on render the page.

Set -> JS/my_tab.js , like this :

	  // start jQuery
			$(function(){

				// For use in global context, use extend of jQuery
				// EXTEND ALL METHODS -> Call them width $.myMethod()
				// EXTEND ALL OBJECTS -> Call them width $.myOject
				$.extend({

	          // make your owns functions:

						/*
						 * extended function $.say_hello_from_my_function( who );
						 *
						 */
	          say_hello_from_my_function : function( who ){

								  alert(`Hello `+who+` ! - From my function !`);

						},
						/*
						 * END extended function $.say_hello_from_my_function( who );
						 */

	      });
				// end extend
      });
			// end jQuery
		
	

- in JS/main.js -> see the function $.open_vue( vue, module_name );

	  // ! AFTER APPEND VIEW TO MAIN
      $('#main').empty().mustache('main_center', $.o );

			// add this :
      if( $.o.vue.my_tab == true ){

            // launch your owns functions
            $.say_hello_from_my_function('You');

      }
		
	

Now when you click on "my_tab" in the navigation bar,
you should see your page appear and the code in the JS/my_tab.js file run emitting an alert that says:
"Hello You! - From my function!"

Excellent !
- You have just created your own function in the Placido-Shop back-end.

This is just an example,
you can not launch the javaScript directly when your page is displayed, you can place a function in a button in your template, for example to fetch data asynchronously from the server .

Note : New files you create in the app will not be affected by updates.

If you modify an original Placido-Shop file,
remember to exclude it from the update, if it is not excluded by default.

Be carefull !
- Make backups of your files and application files so you don't lose your work.