How To Add jQuery in Magento

So, Magento professionals are sharing this post to assist magento developers to use JQuery in Magento website. It’s beneficial for those developers who want to create an e-commerce site on Magento platform. When you are developing an e-commerce website on Magento platform, you need to incorporate Flow Player within the website and for that reason you need to utilize JQuery. The issue is that Magento depends intensely on the Prototype libraries to quit performing. Here’s the way to go about it.

If a Magento developer wants to utilize JQuery on every page, then he should start by adding the JQuery script to:

/app/design/frontend/default/THEME/layout/page.xml
A developer can include the following line underneath the other script entries:

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

In any case, if you need to use JQuery on specific pages (for instance on certain product pages), in the admin panel you have to go to the product page ‘catalog  manage products’ and then choose the suitable product page. Now, choose the ‘Design’ segment and include the following xml into the ‘Custom Layout Update’ box:

<reference name=”head”>
<action method=”addItem”>
<type>skin_js</type><script>JQuery.js</script>
</action>
</reference>

For this situation, the place to put your JQuery.js file is:’/skin/frontend/base/default/JQuery.js’.
While utilizing JQuery, you need to make sure that it is utilizing ‘noConflict’ mode. For this, you need to add following code to the end of your JQuery script:

Var $j=JQuery.noConflict();
What’s more now, modify any JQuery code as follows. If you have:
$(“button”) .click(function () {
$(“p”) .slideToggle(“slow”);
});
Change it to:
$j(“button”) .click(function () {
$j(“p”) .slideToggle(“slow”);
});

You can incorporate any JQuery scripts either comprehensively (as shown in stage 1) or on every page (as shown in stage 2).

Hence, this is the post especially shared for global Magento community to help them in incorporating JQuery with Magento e-commerce website.