Posts for tag: jQuery 1

How to integrate jQuery with Magento

jQuery and Magento

I recently ran in to this problem whist developing an e-commerce site using the Magento platform. I needed to incorporate Flowplayer in to the site and for that purpose I wanted to use jQuery. The problem is that Magento relies heavily on the Prototype library which uses the same ($) selectors as jQuery so simply including jQuery causes both libraries to stop working. Here's how to go about it…

1 If you want to use jQuery on all pages, then you start by adding the jquery script to…


/app/design/frontend/default/THEME/layout/page.xml

…add the following line below the other script entries:


<action method="addJs"><script type="text/javascript" src="PATH TO YOUR COPY OF JQUERY"></script></action>

2 However, if you only want to use jQuery on certain pages (for example on certain product pages), you need to go to the product page in the admin panel 'catlog → manage products' then select the appropriate product page. Now, select the 'Design' section and add the following xml in to the 'Custom Layout Update' box:


<reference name="head">
	<action method="addItem">
		<type>skin_js</type><script>jQuery.js</script>
	</action>
</reference>

In this case the place to put your jQuery.js file is: '/skin/forntend/base/default/jQuery.js'.

3 Now, when using jQuery you must ensure it is using 'noConflict' mode. To do this, add:


var $j=jQuery.noConflict();

to the end of your jQuery script.

and now, alter any jQuery code as follows. If you have:


$("button").click(function () {
	$("p").slideToggle("slow");
});

alter it to:


$j("button").click(function () {
	$j("p").slideToggle("slow");
});

You can include any jQuery scripts either globally (as in stage 1) or on a per page basis (as in stage 2).

And now you should have jQuery working on your Magento site.

You can find more information on the jQuery noConflict mode here: http://api.jquery.com/jQuery.noConflict/

HOME