what to do when more than one Magento extensions include Jquery library

javascript, jquery, magento

Solution

If you want to force the load order of Javascript included with the `addJs` method, the easiest way is to supply a name using the `<params>` tag, e.g.:

<action method="addJs"> <!-- Loads second -->
    <script>vendor/jquery-1.6.2.min.js</script>
    <params><![CDATA[name="jquery2"]]></params>
</action>

<action method="addJs"> <!-- Loads first -->
    <script>vendor/jquery-1.8.2.min.js</script>
    <params><![CDATA[name="jquery1"]]></params>
</action>

Magento will load the Javascript files is ascending alphabetical order based on the name supplied.

In your case, though, it might be more fruitful to find out why the extensions and various jQuery files aren't playing nice with each other.

- Does each extension rely on a specific version of jQuery?

- Are they using different noconflict methods (i.e., one using a straight call to `jQuery.noConflict()` and another using something like `var $j = jQuery.noConflict()`)?

- Are they all using the same global variable names?

Problem

I read the guide of how to properly include jquery to magento by - include the library - include no conflict script - go to $ of jquery call and change it to Jquery That's very easy with one extension. However, in my case, I installed 3 different extensions and all of them want to include Jquery. Of course, I don't want to duplicate this library and call it 3 times. At first, I think I can just manually include jquery library at the very first line of the `<head>` tag and remove all jquery inclusion in 3 extensions. But it doesn't work out, usually only one of them works. If I allow all 3 extensions to include jquery, then they all work. How can I make all the jquery extensions in the store work while only including the libray once? Someone suggested that I should include all jquery dependant scripts at the top of `<head>`, is that right? However, the problem is I don't know how to arrange scripts in Magento with action `addJs` or `addItem`. There is no parameter like before or after as in `<block>`?

Original source