Web Design & Development Blog
RSS Feed
Subscribe to my
RSS feed

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 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…


…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">

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 () {

alter it to:

$j("button").click(function () {

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))

(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.