How to integrate jQuery with Magento

jQuery and Magento

I recently ran in to this problem whist developing an e-commerce site using the Magento platform. I needed to incorporate Flowplayer in to the site and for that purpose I wanted to use jQuery. The problem is that Magento relies heavily on the Prototype library which uses the same ($) selectors as jQuery so simply including jQuery causes both libraries to stop working. Here’s how to go about it…

1 If you want to use jQuery on all pages, then you start by adding the jquery script to…


…add the following line below the other script entries:

<action method="addJs"><script type="text/javascript" src="PATH TO YOUR COPY OF JQUERY"></script></action>

2 However, if you only want to use jQuery on certain pages (for example on certain product pages), you need to go to the product page in the admin panel ‘catlog → manage products’ then select the appropriate product page. Now, select the ‘Design’ section and add the following xml in to the ‘Custom Layout Update’ box:

<reference name="head">
	<action method="addItem">

In this case the place to put your jQuery.js file is: ‘/skin/forntend/base/default/jQuery.js’.

3 Now, when using jQuery you must ensure it is using ‘noConflict’ mode. To do this, add:

var $j=jQuery.noConflict();

to the end of your jQuery script.

and now, alter any jQuery code as follows. If you have:

$("button").click(function () {

alter it to:

$j("button").click(function () {

You can include any jQuery scripts either globally (as in stage 1) or on a per page basis (as in stage 2).

And now you should have jQuery working on your Magento site.

You can find more information on the jQuery noConflict mode here: