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…
/app/design/frontend/default/THEME/layout/page.xml
…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">
<type>skin_js</type><script>jQuery.js</script>
</action>
</reference>
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 () {
$("p").slideToggle("slow");
});
alter it to:
$j("button").click(function () {
$j("p").slideToggle("slow");
});
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: http://api.jquery.com/jQuery.noConflict/