In a site where there is a Rich UX/UI – we definitely play with lot of front end libraries ! The Sitecore JS Libraries that are injected in Page editor mode and might cause some conflicts. It has always been a challenge to integrate lot of JQuery/ JS libraries into Sitecore. Sometimes you might spend a complete day to resolve those conflicts that are caused in Page Editor mode of Sitecore.
Solution – We can take care these conflicts using RequireJS !! You can configure it in a way that – they totally eliminates all those conflicts.
- Lets see how to integrate Bower – this will help you in maintaining the FE libraries.
Create a bower.json file with the libraries that are being used.
- Organize the Scripts in proper folders
- Create init.js file where the Paths, Dependencies and mapping are defined [ Learn more about this in Require Js documentation ]. Refer this file in _Layout.cstml so that the dependent files that are used in each modules are loaded seamlessly;
- Lets see how to pass values from rendering to a newsticker module
The newsticker has a initNewsTicker function that takes in some values which are from a Sitecore Rendering Context Item. These data are passed to the newsticker and as you can see below how it is initialized.