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.