The random eclecticisms of loonytoons

Magento – using jQuery

Current magento version – 1.3.2.4

Jquery logo

jQuery is my favoured javascript library. It is the one I use most so it’s familiar and I can develop quickly with it. Magento however relies heavily on a mix of prototype, scriptalicious and their own varien scripts, none of which I’m familiar with or feel particularly confident about extending and adapting to my own needs.

So when I needed to add some custom javascript functionality to my magento site, I immediately thought “Wouldn’t it be great if I could use jQuery”. Now obviously this raises some issues. Firstly you’ll be adding in another javascript library to the mix, so the first thing to decide is “is this really necessary?”. You don’t want to add a whole load of extra code just for a really small bit of functionality as that doesn’t justify the performance hit or the extra bulk (if I can call it that). It is also well known that jQuery and prototype don’t really get on, so you’ll need to make sure that you can get them to play nicely together.

If you decide that it is worth it and you can justify adding the extra library, then here is what you need to do:

  • download the latest stable jQuery release and add it into the /js folder (I also added a new jquery subfolder)
  • add the line
    jQuery.noConflict();

    to the end of your jquery file. This will help prevent prototype from getting distracted and confused by its presence

  • add jquery to the list of javascript file includes, found in app/design/frontend/your-package/your-theme/layout/page.xml. This must go above the includes for the prototype, scriptalicious or varien files as otherwise it can cause problems. So in my case I added
    <action method="addJs"><script>jquery/jquery-1.3.2.min.js</script></action>

    to the top of the list. You’ll need to amend the filename and location as appropriate.

  • update the scriptalicious files (take a back up of the old ones just in case). This might change but the files that came with my last magento download were not the most recent version.
  • Finally, when you write a function, indicate that it’s a jquery function:
    (function($) {
        $('#div).click(function(){
            alert('test');
        });
    })(jQuery);

    There are other ways of doing this, such as replacing the normal “$” with one that’s been specifically set as a jquery one (example taken from css-tricks):

    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j("#test").css("padding","10px");
    });

    I used the first method though, as I’d already specified the jQuery.noConflict() mode in the jquery file itself (ensuring that it’ll always be set in no conflict mode).

And that should be it! You should now be free to use jquery to your hearts content. I know of some people who are working their way through Magento and rewriting all the javascript into jquery and so doing away with the other libraries, but given the reliance on javascript, I can’t see myself attempting anything like that soon! So until I learn prototype and scriptalicious, or until Magento see the sense of using jquery (though I can’t see them wanting to rewrite everything either), then I shall be continuing to use this method for a while to come.

Share

9 thoughts on “Magento – using jQuery

  1. Tiago Matos says:

    Hey,

    Thanks for the directions.

    Maybe it’s worth mentioning that if people opt for the second solution they can insert:

    var $j = jQuery.noConflict(); // no conflict with Magento Prototype

    in the head.phtml in design/template/page/html/head directory.

    Cheers,
    TM

  2. Tiago Matos says:

    More precisely in the end of the file, after Magento loading the CSS and JS files from page.xml:

    getCssJsHtml() ?>

  3. loonytoons says:

    @Tiago,
    thanks for the tip, that’s a really good idea as then that variable is already setup for whenever you want to use it.
    Thanks for sharing, I always appreciate other people’s thoughts and contributions!

  4. Roy Vincent says:

    thnkx for this article it solve my problem!……

  5. Erik Ford says:

    Thanks for this bit of advice. I am about to roll up my sleeves on a custom build that depends on the usage of jQuery and wasn’t certain if it was possible to make all of these libraries play nicely together.

  6. Jerome says:

    Thanks for sharing. Its really very helpful to me.

    In my case the jQuery.noConflict() worked.

    Thanks !!!

  7. […] +info ++info Esta entrada fue publicada en Sin categoría. Guarda el enlace permanente. ← Uploadify […]

  8. Thanks… A bit of code that solved my problem!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *