Magento JQuery Conflicts
Ladies and gentlemen… in the blue corner, released in August 2006, originating in New York and used by 27% of the 10,000 most-visited websites….. JQUERY! And in the red corner, launched in March 2008, boasting over 1.5 million downloads and winner of the ‘Best of Open Source Enterprise Applications’ award….. MAGENTO!
Those of you that have tried to implement JQuery scripts into Magento may have been left disappointed at the lack of compatibility between the library and the scripts that are already installed with Magento. This means that without a proper fix it is impossible to get both sets of scripts working properly on your e-commerce website.
Before I introduce a JQuery Vs Magento contest as the picture and my completely over-the-top intro may be suggesting, I have a knockout punch of my own to throw… a punch that I’ll name JQuery noConflict. Got a nice ring to it!
Simply add the following tags (in bold) around the script on your webpage. The following example hides a div class when it is ran, but the dollar signs required to run it would conflict with the Magento prototype.js library.
;(function($) {
$(document).ready(function() {
$('#myDiv').hide();
})
})(jQuery);
It is also worth noting the Jquery Library Extension that is available to install via Magento Connect for free. This sets up a bunch of useful JQuery libraries for your Magento site without causing conflicts with the scripts already pre-installed on the software.
Keep checking back to the Magento Blog at Ecommerce Web Design for more knockout tutorials and tips for Magento.
Nice post, Will certainly bear this is mind as I’ve certainly had problems getting these heavyweights working together in sweet harmony!