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.

  %MINIFYHTML2b62a37ee034a8ab5832f3152736c23a5%

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.

var $j = jQuery.noConflict();
/* following three lines are for testing purpose. You can remove them as it's not required. */
$j(document).ready(function(){
  $j("#test_div").css("padding","10px");
});
Share this nice post:

One thought on “Magento – using jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *