PROTOTYPE AND JQUERY IN MAGENTO

As we know, the Prototype JavaScript framework is included in standard magento installation. Together withscript.aculo.us it is a powerful tool for programming client-side actions and effects. It also provides Ajax framework which makes any ajax requests easier then ever before. A lot of magento templates deploy Prototype functionality, e.g. to show/hide elements depending on user's choice or to display error messages with a nice 'fade' effect.

But Prototype is not the only JavaScript library to offer such an useful set of functions. One of other most popular libraries is jQuery – very lightweight (19KB minified and compressed version), simple to use and, to tell the truth, my favourite one. Created in 2006, now it has a large community and hudge set of plugins.

However, is it generally a good idea to use both libraries in one site magento? In my opinion: no, it isn't. At least in most cases. Why? There are a few main reasons:

• They provide similar functionality so what you achieved by one of them, you can achieve by the other


• More libraries included mean more data to download by a web browser and slower loading of page


• They use some common structures, which may lead to conflicts

In some cases, though, you may be forced to include jQuery in your magento shop. For example, you need to use an additional JavaScript library which is created as a jQuery plugin. So how can you force Prototype and jQuery to work together without conflicts?

At first you have to download the recent jquery version (the current release is v.1.3.2) and put it in /js/jquery folder. Then you have to include it in all magento pages – the most logical way is to put the following piece of code in <block type="page/html_head"> section of /app/design/frontend/.../.../layout/page.xml:

<action method="addJs"><script>jquery/jquery-1.3.2.min.js</script></action>

Now you have to avoid conflicts with Prototype framework – they both use $ notation (in jQuery it is a shortcut for jQueryand in Prototype it is an alias for getElementById function). Fortunately, there is a mechanism in jQuery to override the $function: jQuery.noConflict(). You can put such a construction at the end of your jquery-1.3.2.min.js file:

var $j = jQuery.noConflict();

and from now you have to use $j instead of $ function (or, if you want, you can still use jQuery). So be careful to change all instances of $ in your jquery plugins (but there are many plugins which have jQuery.noConflict() already implemented).

And it would be all, if there wasn't one web browser which still would have problems with coexisting Prototype and jQuery. And, surprisingly, it is not Internet Explorer ;) It is Firefox 2. It throws errors and refuses to execute the JavaScript. Of course currently there are newer versions of Firefox and the problem doesn't exist there, but there is still a little percent of net surfers who use Firefox 2 and they want to spend money in your shop, too;)

Fortunately there is an easy way to solve this problem. You have to include jQuery file before including Prototype. So you have to do the following in page.xml:

<action method="addJs"><script>jquery/jquery-1.3.2.min.js</script></action>

<action method="addJs"><script>prototype/prototype.js</script></action>

And now you can forget about the conflicts and enjoy those two magnificent libraries working together.