How To Use jQuery In Magento?

By | Last Updated: February 19, 2013 | In: Magento


By default, Magento uses the Prototype javascript library. You can also integrate the javascript library "jQuery" in your Magento store. There is some problem to integrating jQuery in Magento, you might get some javascript conflict errors as your Magento store is using two javascript libraries one is prototype.js and another one id jQuery.js at a same time. This is caused because prototype as well as jQuery uses "$" as a function or variable name. Don't worry about it because jQuery has a solution for such kind of conflict case.
How To Use jQuery In Magento?

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery 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(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

this is what jQuery Says about the Conflict Read More

Here is the steps how to use the JQuery in Magento

Step 1. Download jQuery from jquery.com
Step 2. Copy the jquery file to the following directory: skin/frontend/default/your_custom_theme/js/
Step 3. Navigate to the app/design/frontend/default/your_custom_theme/layout/page.xml and open it in the editor of your choice.
Step 4. In page.xml file, search for block with name “head” and add the following code inside it.

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

Step 5. Removing conflict between two javascript libraries
Navigate to the app/design/frontend/default/your_custom_theme/template/page/head.phtml and open it in the editor of your choice
Add the following code at the end of this page

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

You have done. You can use jQuery in your Magento store without any conflict.

Tags:,,


Related Posts