Posts for tag: JavaScript 2

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/

Tracking outbound links that open a new window with Google Analytics

So, here's the problem:

...you want to use the tracking feature of Google Analytics to track all clicks on outbound links from your site, however, you also want those outbound links to open a new window...

If you simply follow the instructions to track outbound links you will discover that your links will no longer open in a new window (regardless of whether you are using Javascript or target="_BLANK" to open the window.

And here's the solution:

Apply the javascript to you hyperlink as usual...


<a href="http://www.example.com" onclick="recordOutboundLink(this, 'Outbound Links', 'example.com');return false;">your link text</a>

...but modify the tracking code as follows...


function recordOutboundLink(link, category, action) {
  try {
    var pageTracker=_gat._getTracker("XX-XXXXXXX-XX");
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100;window.open(this.href))
  }catch(err){}
}

(Don't forget to replace XX-XXXXXXX-XX with your tracking code)

...and that's all — Outbound links with Google Analytics tracking and opening in a new window.

HOME