Wednesday , September 20 2017
Home >> All tutorial >> Magento theme tutorial 1.8 series: Adding jQuery support

Magento theme tutorial 1.8 series: Adding jQuery support

This post belongs to Magento theme tutorial 1. 8 series of Magento Academy, we hope that this post will give some valuable knowledge about jQuery. Magento 1.8 and earlier versions didn’t use jQuery in the frontend and backend. The library
that Magento uses for the JavaScript functionality is Prototype. When you want to use some
jQuery code, you need to add the jQuery library in your theme.

At first, you should go to the jQuery website and get the latest version.

By default, Magento loads the Prototype library. Excluding this will cause JavaScript errors on every page, so we need to use both libraries. The problem with jQuery and Prototype is that they both use the dollar sign ($) as thevnamespace for their functions.

To avoid the conflict, we have to use jQuery in the noconflict mode:

1. Put the jQuery library in the js/jquery folder.

2. We will create a local.xmlfile in our theme folder to add extra layout instructions.

Create the app/design/frontend/packt/default/local.xml file.

3.  Add the following content in that file:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
<default>
<reference name="head">
<action method="addJs">
<js>jquery/jquery.js</js>
</action>
</reference>
</default>
</layout>

4. Create a jquery.noconflict.jsfile in the js/jqueryfolder with the following content:

$.noConflict();

5. Add this file, after adding the jQueryfile, in your local.xmlfile. The file contains the following code snippet:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
<default>
<reference name="head">
<action method="addJs">
<js>jquery/jquery.js</js>
</action>
<action method="addJs">
<js>jquery/jquery.noconflict.js</js>
</action>
</reference>
</default>
</layout>

6. Clear your caches and look at the source of your frontend.

7. The jQuery file and the noconflictfile should be added in the head section.

8. You can now use jQuery in your webshop.

Keep in mind that you have to call jQuery with the jQuerynamespace instead of the $namespace. Also keep in mind that third-party extensions of Magento could include jQuery in the frontend. Make sure the version is compatible with your code.

9. We normally use the following code snippet:

$(document).ready(function() {});

But, we will instead use the following line with the jQuery namespace:

jQuery(document).ready(function () {});

How it works…

We added two files to the theme that contains the jQuery library. We had to use the no conflict mode to avoid conflicts with the prototype library.To add files to the layout, we created a local.xmlfile. In that file, we added instructions to add the JavaScript files to the head of the HTML code. The main advantage of using a local.xmlfile for this is that you don’t have to overwrite an entire XML file from the base folder to add just two lines of code.

Done! Follow our Magento theme tutorial channel to get more guides about Magento!

We also contribute great content of Magento Tutorial for Magento 1.x.

DON'T MISS THE CHANCE!

magento tutorial

About Champ