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 tried using (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 leads to jQuery being added to the end of scripts added by Magento to page.xml in the base package. I even tried deleting all the scripts using:

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

to remove all the scripts that were added to page.xml and then re-add them to local.xml in the order I need them (jQuery first), but for some reason they end in the same order (with the last jQuery) .

I went through the Magento code and confirmed that the scripts are removed and then re-added to $ this → _ data ['items'] in Mage_Page_Block_Html_Head, but at some point when they are added to the page, they are added with the latest jQuery.

I guess there should be a more elegant way to do this, but I haven't found it in my Googling yet. All I found recommends modifying the page.xml file directly, which I read elsewhere, is not a good idea.

Answer 1

It’s best to use a content delivery network that will be better in performance / speed for your site.

Basically I just open the /page/html/head.phtml template 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 the prototype;)

Answer 2

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

 jQuery.noConflict(); 

Now we will add both of these files along with the new block to the header 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 requires jQuery to work with Prototype, the Javascript framework included in Magento by default. Saving the jQuery and no-conflict sections allows you to update or lower jQuery as needed without having to edit the jQuery file itself to include the noConflict() method.

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

Go 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 head.phtml and add this line directly above it:

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

You have now correctly added jQuery in front of any other Magento Javascript.

Answer 3

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

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

 var $j=jQuery.noConflict(); 

Then you just use $j , where you usually use $

Answer 4

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

What it does for you is to download the specified version of jQuery and automatically install all the necessary files, as well as add links to your template. In the backend, you can specify the desired version, as well as activate the configuration without conflicts.