How to setup JQuery noConflict

Sometimes you have customizations to your websites that require outdated copies of jQuery to operate properly. You can setup a jQuery noConflict to bring in an old version of jQuery.

PCI DSS 4.0.0 stipulates that the owner of the site is responsible for ensuring that all system components are protected from known vulnerabilities.

Note:bringing in multiple copies of jquery will make your website slower.

Attention:

Volusion will not be responsible for any PCI violations you incur as a result of running out of date software.


Normally, when jQuery is loaded in a web browser, it is done like so:

This creates an alias variable in javascript called $

All jQuery code, from that point forward uses the $ variable to perform functions:

$.each(array);
$.on(element, 'click');

So, when the $ variable is used for jQuery it can create issues for upgrading jQuery.

There is a way to load multiple versions of jQuery in the web browser:

Normally, loading a different version of jQuery after the first version was already loaded the $ variable will be overridden to the most recently loaded version. E.g. if you put the jQuery script 2.2.4 at the bottom of the jquery loads, then $ will refer to jQuery version 2.2.4

By calling the `jQuery.noConflict()` function, it restores the $ variable to the previously loaded version of jQuery. E.g. if you put the jQuery(1.12.4) after jQuery(3.7.1) then the noConflict function puts $ back to jQuery(3.7.1).

Full (technical) explanation of how multiple jQuery versions works:

If you don't make a call to noConflict they just override each other.

$ will always refer to the most recently loaded version of jquery unless you call the jQuery.noConflict(true). the noConflict(true) restores the previously loaded version of jquery to the $ alias.

Guidance

For custom code, it should be possible to load a noConflict version of jQuery 1.12.4. In all custom code, any references to `$` should be substituted for `jq1124`.

From there on, any javascript customizations can be fixed by swapping the $ for jq1124

// Convert this
$(element).each
// To this
jq1124(element).each

This will be needed on all custom javascript code that breaks. Volusion cannot be aware of or provide a service to correct custom code to this extent (there can be many references to this $ in the custom code).