Using Require JS – To Resolve JS conflicts

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.

1. 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.

 

2. Organize the Scripts in proper folders

 

3. 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;

 

4. 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.