Magento Themes and Magento Extensions

Magento – using jQuery


While developing the new website in magento I found, magento using prototype as a default javascript library. My problem was I had to learn and my biggest problem was time crunch. I decided to add Jquery in in which i was good. so i decided using Magento using jQuery combination. I started the integration later on I came to know that oh there is problem because of conflict in js file. It was little difficult to understand why but I came to know after lot of search over the web. so lets learn it using quick and easy steps on how to use jQuery in magento. I have just consolidated information I found while researching.

How to use jQuery in magento?

Quick and easy steps on how to use jQuery in magento are as follows.

Step 1: Download “jQuery js” file and upload it to the magento “js” folder.
Step 2: Now open the file “page.xml” at Magento/app/design/frontend/default/default/layout/page.xml.
Step 3: Now add following line inside block “html_head” before end tag.

  1. <action method=”addJs”>%MINIFYHTMLba657fa99a7962529700c5b675c247663%</action>

Step 4: Now you’ll need to clear that cache to see the effect take place, The layout files are normally cached.

Step 5: Now you need to include jQuery on page. You could perform this by adding a new line to the page.xml file, or you could open the common head.phtml file at Magneto/app/design/frontend/default/default/template/page/html/head.phtml – and add following code there for jQuery. This code will noConflict and write code in that mode. Basically you replace the normal “$” with $j.

  1. var $j = jQuery.noConflict();
  2. /* following three lines are for testing purpose. You can remove them as it’s not required. */
  3. $j(document).ready(function(){
  4. $j(“#test_div”).css(“padding”,”10px”);
  5. });

Comments are closed.