midwinter-dg.com

Web Design, Web Development, Graphic Design

Web Design & Development Blog

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more...

Posts for label: 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/