Using jQuery in Magento

At work we are developing a site for a client using the Magento eCommerce software. This is my first time using it and I’m finding it fairly badass (and it’s free!). There is a lot to like about it, which we’ll probably talk about another time, but it uses Prototype for a JavaScript library. Now I’m sure Prototype is wonderful and all that, but I don’t know a lick of it. I’d rather just use the library I’ve known to come and love, jQuery. But Prototype and jQuery notoriously don’t get along. This is how to deal with that.

1. The latest version of Magento comes with a somewhat outdated version of the script.aculo.us effects file, which is part of the problem. Go get the latest version (1.8.2 right now). You may want to rename it with the version number at the end, like effects-1.8.1.js
2. Upload the file to [Magento]/js/scriptaculous
3. Open the file page.xml at [Magento]/app/design/frontend/default/default/layout/page.xml
4. On about line 41, there will be a line like this:

   <action method="addJs"><script>scriptaculous/effects.js</script></action>

   Change the file name to your new file

5. The layout files are normally cached, so you’ll need to clear that cache to see the effect take place. Log into the backend and go to System > Cache Management
6. Select “refresh” from the All Cache menu and save (which should clear your cache)
7. Reload a store page and view source to make sure your new file is the one that is loading
8. Now you need to include jQuery on your page. You could add a new line to the page.xml file, or you could open the common head.phtml file at [Magneto]/app/design/frontend/default/default/template/page/html/head.phtml – and add your <script> for jQuery there
9. The final step is making sure that jQuery is in .noConflict(); mode. This is the final step to making sure it plays nice with Prototype
10. Now you need to set noConflict and write code in that mode. Basically you replace the normal “$” with a new shorthand ($j, in this case).

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

Note, I didn’t invent this fix, I just wanted to consolidate information I found while researching this. Mostly came from the wiki and this thread, which you can reference for more information.

Related posts:

1. Move mini-cart in the sidebar to the header (or anywhere) in Magento
2. Create a Color Switcher in Magento
3. Magento FLIR
4. Adding and removing javascript / css when and where you need it
5. Top 3 Solutions when your Magento Categories are not displaying