Magento jQuery: How to use them together?

By default, Magento contains and uses the Prototype javascript library. You can also integrate the other most popular javascript library ‘jQuery‘ in your Magento site.

While integrating jQuery in Magento, you might get some javascript conflict and errors as you will be using two javascript libraries (prototype and jQuery) at a time. This is caused because prototype also uses ‘$‘ as a function or variable name, just as jQuery does.

Well, jQuery has a solution for this conflict case. Here’s what jQuery has to say about the conflict:-

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

Here, I will explain you on how you can integrate jQuery in Magento without any conflict and error.

Below is the step-by-step guide to integrate jQuery with Magento:-

1) Download jQuery from jquery.com
2) Copy the jquery file to the following directory: skin/frontend/default/your_theme/js/
3) Open app/design/frontend/default/your_theme/layout/page.xml
4) In page.xml file, search for block with name ‘head‘ and add the following code inside it (I suppose that your jquery file name is jquery.js):-

<action method="addItem">
    <type>skin_js</type>
    <name>js/jquery.js</name>
</action>

5) Removing conflict between two javascript libraries (prototype and jquery):
– Open app/design/frontend/default/your_theme/template/page/head.phtml
– Add the following code at the end of this page:-

<script type="text/javascript">
	jQuery.noConflict();
</script>

That’s all. You are done. Now, you can use jQuery in your Magento website freely and without any conflict.

Hope this helps. Thanks.