Using Require JS – To Resolve JS conflicts

No comments

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.

Using Require JS to Resolve JS conflicts in SC738

 

  1. Organize the Scripts in proper folders

Using Require JS to Resolve JS conflicts in SC780

 

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

Using Require JS to Resolve JS conflicts in SC1026

 

  1. Lets see how to pass values from rendering to a newsticker module

Using Require JS to Resolve JS conflicts in SC1096

 

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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.