Warnings, Disclaimers, Fear, Loathing, etc.
The Magento jQuery Problem
So bottom line: I want to use jQuery/ jQuery UI to enhance the user experience on my Magento site. I want to use jQuery’s ThemeRoller to define and standardize the CSS I’m using. And I want my jQuery to load in in its minimized form from a CDN.
1. Load in the jQuery libraries.
Option 1: Load in the jQuery libraries from a CDN
I’m using Google here. jQuery’s site lists other options you may wish to consider. In the admin panel, go to System->Configuration->Design->HTML Head, and scroll down to the Miscellaneous Scripts box. Add these lines:
Option 2: Load in the jQuery libraries locally.
Next, I specify that these files should be loaded in my layout/page.xml file:
<action method="addJs"><script>mxwest/jquery.min.js</script></action> <action method="addJs"><script>mxwest/jquery-ui.min.js</script></action>
Finally, I instantiate $jQ in my theme’s template/page/head.phtml file. In my case, I placed the code (in blue) after getTranslatorScript but before getIncludes. I’ve no idea if this matters or not, but it does work on my installation.
2. Load in your jQuery CSS
I placed the jQuery UI theme (as opposed to the Magento theme) into my skin, in the css folder. The theme generated by jQuery’s ThemeRoller comes contained in its own subfolder. I simply ftp’d that into place in my skin.
Next, I updated my layout/page.xml file to bring the jQuery UI CSS in:
<action method="addCss"> <stylesheet>css/custom-theme/jquery-ui-1.8.10.custom.css</stylesheet> </action>
jQuery UI’s ThemeRoller named everything for me. So I just went with it.
Here’s an example using $jQ to create a little “working” dialog and perform an Ajax add to cart. This is way faster than waiting for the whole checkout page to be returned to the user. This code appears in my theme’s view/addtocart.phtml.