web hosting
build a website

Adding JQuery in Magento

Mar 28, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Adding JQuery in Magento
Magento does not use Jquery by default it uses prototype.js.

Prototype is not something that I enjoy coding with really and quite a few other people I have spoken to say the same, it is much easier in my oppinion to create image sliders and other functionality using JQuery and there seems to be much more open source code available for JQuery than Prototype.

If you add a JQuery gallery for example into a magento page you will see certain features like the top menu drop down list not work and other little things like that. This is because there are certain variable that Prototype use as well as JQuery. The way to get them to work together is to use no conflict at the start when you are calling your JQuery function.

So usually your JQuery function would look something like this:
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});


Now this needs altering to the following:
$.noConflict();
  jQuery(document).ready(function($) {
  $("p").click(function(){
    $(this).hide();
  });
});


You should now find that your code all works together.