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:
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:
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:
to the end of your jQuery script.
and now, alter any jQuery code as follows. If you have:
alter it to:
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 mobile mode here: