Adding jQuery to Magento

Question

What is the recommended way to add jQuery (or any script) BEFORE the rest of the scripts that come with Magento using local.xml?

I've tried to use (in local.xml):

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.6.4.js</script>
    </action>
</reference>

but this ends up adding jQuery to the end of the scripts that are added by Magento in page.xml in the base package. I've even tried removing all the scripts using:

<action method="removeItem">
...
</action>

to remove all of the scripts that were added in page.xml and then re-adding them in local.xml in the order I need them to be in (jQuery first), but somehow, they are ending up in the same order (with jQuery last).

I've stepped through the Magento code and verified that the scripts are getting removed and then re-added to $this->_data['items'] in Mage_Page_Block_Html_Head, but at some point, when they get added to the page, they are added with jQuery last.

I'm guessing there has to be a more elegant way to do this, but I've yet to find it in my Googling. Everything I've found recommends modifying page.xml directly, which I've read elsewhere is not a good idea.

Solution 1

Best is to use the content delivery network which will be better in performance/speed for your website.

I mostly just open up template/page/html/head.phtml and right before

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

I add:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Also make sure you run the jQuery.noConflict() method and always use the full jQuery name instead of the $ (dollar sign) to avoid conflicts with prototype ;)

Solution 2

My preferred (and the most flexible way) to do this is through XML using local.xml, two separate Javascript files, and a new file we will create. The first Javascript file is jQuery itself--completely unmodified. The second file I call no-conflict.js and it contains only one line:

jQuery.noConflict();

Now we add both of these files, along with a new block, to the head section of our local.xml:

    <reference name="head">
        <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery-1.7.2.min.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/no-conflict.js</name>
            </action>
        </block>
    </reference>

no-conflict.js is necessary to allow jQuery to work alongside Prototype, the Javascript framework included in Magento by default. Keeping jQuery and a no-conflict file separated allows you to upgrade or downgrade jQuery as needed without the need to edit the jQuery file itself to include the noConflict() method.

In our XML we created a new block (topScripts) with the template file set to top_scripts.phtml.

Navigate to /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ and create this new file. It will contain one line:

<?php echo $this->getCssJsHtml(); ?>

Now edit /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.

Find the line <?php echo $this->getCssJsHtml() ?> in your head.phtml and add this line directly above it:

<?php echo $this->getChildHtml('topScripts') ?>

You have now correctly added jQuery before any other Magento Javascript.

Solution 3

As an alternative way, and instead of manually editing Magento files each time, you can simply add jQuery using this extension: http://www.intersales.de/shop/magento-magejquery.html

What it does for you is download the jQuery version you specify and install all needed files automatically while also adding the references to your template. In the backend you can specify the desired version and also activate the no-conflict setting.

Solution 4

You can add it in your block files with $this->getLayout()->getBlock('head')->addJs('path/to/jquery.js'); in the _prepareLayout() method

One caveat, Magento uses Prototype, so you'll need to make sure you set jQuery to another variable other than simply $. Adding this to the page made it work for me:

var $j=jQuery.noConflict();

Then you just use $j where you would normally use $

View more solutions

Comments

[Luke]

This worked great! Thanks. One edit is that the http: is missing from the start of the src attribute. Wouldn't let me edit because my edit wasn't > 6 chars.

[Kenny]

Great ;) , it's because of mod_pagespeed, sorry for that. Updated my reply.

[andynil]

Creative! This is now my new preferred way as well!

[Christian]

While this works it is not answering the question of how to include Jquery before the rest of the scripts.

[cfx]

Edited to add jQuery BEFORE all other Magento Javascripts!

[Fiasco Labs]

This can all be modularized so it puts jQuery in place without even needing to do an edit to local.xml if you take it to its logical conclusion. Also +1 for doing the noconflict as a separate file. I despise all the instructions out there that tell you to add your noconflict line to the end of the jQuery library. Later on, someone does a jQuery library update and the whole prototype/jQuery incompatibility rears its ugly head and strikes your ecommerce site off the face of the earth.

[cfx]

If you are referring to the method in the accepted answer then you are correct and editing local.xml is unnecessary. However, with that solution you are stuck with jQuery on every page and no effective way of excluding it if that becomes necessary. The point of using block structure and the XML is to add flexibility. The tradeoff is some minor complexity, but it's nothing a novice can't grasp.

[Socrates]

Just tried this and it resulted in the files getting included twice..at the top of the header like it`s intended to be but also the the bottom of the header after all other JS files.

[cfx]

Your theme must already be setup to add jQuery in the footer. You'll need to figure out where it's doing that and remove one of the duplicate includes.