Grow your CSS skills. Land your dream job.

Using jQuery in Magento

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Chris is this a CMS also. Can you create static pages with it like an About Us page or anything like that? If not can you share how and what CMS you would use this with. But yea that software looks awesome! Thanks

    • Permalink to comment#

      I’m not Chris, but yes it’s a wickedly cool CMS that allows you to make static pages, It actually comes with a about us page. It also has automated emails that it sends when someone makes a purchase, signs up for an account, and many other things. You can connect to UPS, DHL, FedEx and USPS. It has Google Analytics and Google Checkout built in…Lets see um PayPal. It has a news letter thing you can have sent out to customers. You can send them newsletters based on what type of customer they are.

      They recently came out with a version that allows digital downloads.
      You can set up promotions on certain items for a certain amount of time specified by you. You can setup promo codes. Different stores for different target markets like language, currency, products or whatever.

      I could keep going.

      Sorry for the poorly written comment. But man it’s cool.

  2. In title and post you wrote “Magneto”, I think it’s Magento.

  3. Permalink to comment#

    Your Link is still incorrect ;)

    if someone is looking via google… it moves somewhere backwards… because of the missspelling

    http://css-tricks.com/using-jquery-in-magneto/

    regards
    Allan

  4. Permalink to comment#

    hi Chris, great info!
    i`m playing with Magento right now and it seems quite complicated.

    isn’t there a way to remove the scriptaculous&co JS files forever and use only jQuery?
    my Firebug reports that all the scriptaculous files take between 4-12 seconds to load. that’s waaay to much for some files that i`m not even going to use.

    i tried doing that and ended up with errors.

    thanks again for the tutorial though!

  5. Permalink to comment#

    very cool open source shopping cart… now I have another option besides oscommerce :) Thank you Chris!

  6. Very nice. I’ve never heard of Magento, and I’ve just spent the last few minutes taking a look at it. Looks legit, so I’ll plan on using it.

    • We haven’t launched it into production yet, and it’s my first experience, but my experience so far is that it is excellent.

    • Permalink to comment#

      We have about 1500 magento site installations and it’s working well for us. There are optimizations that you can do to speed up magento, such as putting your var cache and session into /dev/shm. Look around on the magento forums, there are random threads around with gems, such as the above.

  7. Hey Chris! I, too am using Magento for the first time at work. And I, too, was planning to switch over to jQuery whenever possible. So you just saved me a ton of leg work. Thanks!

  8. Simon
    Permalink to comment#

    Isn’t the problem here that you are now loading both Prototype & jQuery? That’s a whole lot of javascript libraries to be loading to an empty cache visitor?

    Does anybody have any methods for how to entirely replace the prototype reliance – much like jrails does for Ruby on Rails?

  9. Permalink to comment#

    good timing chris. i start with a magento project in feb. and to chad: the best cms i found so far for integrating magento is typo3. there’s a special extension for that.. don’t have the link handy but can post it later..

    chris: guess some of us want to see more magento stuff here ;)

    cheers,

    tobi”

  10. Blake
    Permalink to comment#

    I noticed one small issue with your fix. Technically speaking, the file that you are modifying could be overwritten when you do an update on Magento. The best way to do this is to create a new theme, and then make the change to that new theme.

    Here is some information on creating a new theme. Basically you duplicate the default theme folders (there are a couple of them) and re-name them to your new theme. This will ensure that the files you change are completely separate from any Magento updates, thus, you won’t have to worry about your changes being overwritten.

  11. Ross
    Permalink to comment#

    Hi, Chris

    I tested Magento last year and found it a little quirky in it’s theme setup, plus it was pretty slow compared with Zen Cart, which I default to.

    A vidcast on Magento theming would be excellent.

    How do you find the speed?

    Ross

  12. Any one have experience with integration of Magento into wordpress?

    I did some digging and found this information.

    Install WordPress in a folder called wordpress under your magento installation
    In file Noroute.php under folder block

    change this:

    $uri = Mage::getBaseUrl() . ‘ee’ . $this->getRequest()->getRequestString();

    to this:

    $uri = Mage::getBaseUrl() . ‘wordpress’ . $this->getRequest()->getRequestString();

    use this in your .htaccess file:

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.*)$ index.php/$1 [QSA,L]

  13. Ross
    Permalink to comment#

    Furthermore, Chris, if you did one of those great 3 part series on theming Magento, you’d be mining a very deep vein. Lots of hits.

    BTW, I spell Magento like Magneto all the time.

  14. Blake
    Permalink to comment#

    @Ross

    I’ve used Magento for a couple of projects, and it is leaps and bounds above Zen Cart and OS Commerce (both of which I have used before). The speed of Magento is dependent on your server configuration. There is a lot of stuff going on behind the scenes (the Zend Framework is quite complicated, but rock solid). I currently have 2 Magento installs. One on my desktop computer for development, and one on a server specifically configured for Magento (Simple Helix). The server install is very fast.

    Conclusion, if you are serious about an awesome E-Commerce solution, drop some extra money on a hosting plan that makes Magento fly.

  15. Just building my new site with Magento and been trying to figure this out for a couple of days! It was the bit about updating the effects file that got it working for me. Cheers!

  16. Jeff
    Permalink to comment#

    I must warn everyone…

    First, styling and creating your own theme for Magento is no small or simple task! There are files everywhere, and thousands of them. I am not exaggerating either.

    Second, when you have questions about how to change or modify something, good luck in the forums. I have had little to no success with the Magento forums.

    Third, if you don’t know or don’t want to deal with PHP, look else where.

    I guess the plus side is I am getting better with my PHP debugging skills…

  17. matt h
    Permalink to comment#

    Hi Chris. Long time Portland reader, first time commenter….You can also deal with prototype/jquery by using:

    jQuery.noConflict();

    (function($) {
    // your jquery code here that still uses $
    })(jQuery);

    By passing jQuery to a function that defines the parameter as $, $ is guaranteed to reference jQuery within the body of the function. This will allow you to keep using the jquery $ instead of $j in your example.

  18. Sam
    Permalink to comment#

    how about mootools guys

  19. Permalink to comment#

    Chris also pronounces it Magneto in his screen cast as well =)

    Definitely make your own theme, as a Magento update will over write the default theme.

  20. Parm Grewal
    Permalink to comment#

    You can also use Google hosted files to save on bandwidth and page loading times.

  21. Excellent tips Chris. How about a screencast about Magento and some of the design issues that crop up when developing your theme.

  22. Great tip. That gives me some options with AJAX now. And you are right, Magento is a great platform. At first I thought it was just different for the sake of being different, but right around the second or third site, I started to get some of it’s idiosyncrasies. All it takes is not assuming that the status quo is the only way.

  23. Tony
    Permalink to comment#

    Yes, it works! Thank you.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".