Using jQuery in Magento

Jquery-magento-codeOur lives are surrounded by context. The same thing can have different a meaning in different situations. What does a zombie on TV mean to you? Maybe, a moment to make popcorn and enjoy a scary movie. And what about a zombie in front of you?  YOU GOTTA RUN!!!

In a less dangerous context, while you are exploring a Javascript code in Magento and face the following “double dollar function”, what do you think?

myElement = $$(‘#myId’);

If you are used with the Javascript library included on the standard Magento installation, the Prototype Framework (http://prototypejs.org/), you could say the double dollar function returns an element, or an array of elements, specified by the CSS selector argument.

Now let’s analyze the following code:

myElement = $(“sumWord”);

Knowing that this code is inside Magento’s context, you can say for sure: This dollar function returns an element specified by the sumWord ID.

Congratulations! You’re right..

But if we didn’t define the context, that line of code could have different meanings!

The same code can be interpreted as a jQuery function that returns an element that matches the sumWord HTML tag.

Because of that similarity, if you try to use both libraries in Magento without any preparation, a zombie apocalypse can happen! I’m just being hyperbolic … But as you know, computers don’t like to grasp the meanings in context. So let’s setup everything and make it direct to the point.

First, download the most recent Jquery (http://jquery.com/) version and store it in the /js/jquery folder. Then let’s override the Jquery dollar function and put an end on the conflict.

Do this by opening this Jquery file and writing on the last line:

var $j = jQuery.noConflict();

From now on, when you want to use the Jquery dollar function in your code, use $j instead of $. For example:

Using-jQuery-in-Magento1

Now that “code” peace reigns again, you can spread the good news through out the rest of your Magento installation.

So, let’s do it, and make jQuery available for all. Open the XML file responsible for your layout and write the following code:

Using-jQuery-in-Magento2
That’s it!

Just for fun lets draw an analog of context from a different perspective… without using code or Magento.

While writing this article I was listening to some songs from the guitarist Andy Rehfeldt. Give him a try and see how Metallica sounds in a smooth jazz context (www.youtube.com/watch?v=OBmM79YadYM) or Green Day sounds as a Brazilian music http://www.youtube.com/watch?v=-uk8v6K2Nxk

I wish you all an excellent week!