How do I add a JS or CSS resources with the new page template sed_site_page_v3

This is related to Extenso, how to add JS/CSS resources with the new page template.

We have created a new page template called page_v3 to optimize the speed of pages, to reduce server calls we have merged most of the CSS and JS into one file respectively, we also thought of a way to add files specific to the site into those, I will explain how with an example of if you need to include the plugin chosen.js into a site.

chosen.js is included in the require.js alias definition of the template, so you can call it already in widgets that are in pages with that template (and lastest sed_site module).

require example in your widget javascript :

This will include the chosen.js script only in pages that have your widget, there are no "require" asynchronous module loader for the chosen CSS, thus you need to include it in sed_site_css only for your site by following these steps :

require(["chosen"], function() { var config = { '.chosen-select' : {},
 '.chosen-select-deselect' : { allow_single_deselect: true },
 '.chosen-select-no-single' : { disable_search_threshold: 10 },
 '.chosen-select-no-results': { no_results_text: '' },
 '.chosen-select-rtl' : { rtl: true },
 '.chosen-select-width' : { width: '100%' }
 }
 for (var selector in config) { $(selector).chosen(config[selector]); }
 });

1. Create a new resource in sed_site_resource and set it to active
2. Set the resource type as "css" and check the checkbox "Include in site CSS" (exact same procedure if you had to include a JS but select the "js" resource type)
3. In the file put %include "/extenso/module/sed/core/resource/chosen.css"; since the css for 'chosen' already exists in sed_core
4. Save and then publish sed_site_css, on publish that file will now include your file since the resource is active, is a type = css and has the "include in site CSS" checkbox = yes
5. Refresh you cache for that file