Home » Javascript, jQuery, Magento2 March 2011

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):-

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:-

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

Hope this helps. Thanks.


Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Magento contains and it uses the Prototype javascript library. We can also integrate the other most popular javascript library ‘jQuery‘ in our Magento site.

  • Magento can be integrated as it contains a prototype javascript library.

  • Lucas Dias Gabriel

    hey man, thx so much for this post! I was having problems in the product view with the add to cart button and the zoom funcionality, and that took care of it! thx so very much!

  • Anil Singh

    Thank you very much, It worked nicely

  • armand ndizigiye

    thank you so much, it works!!!

  • sheetal

    thank ‘s alot, now my jquery work properly in all pages………

  • thanx for this post loving it………

  • lucky

    I am getting errors in prototype if I followed the above procedure. Can anyone please help me.