… k-i-s-s-i-n-g. First comes love, then comes… oh who am I kidding! They don’t really like each other that much. That said, here is how to make them at least tolerate each other:

Integrating jQuery with Magento is not complicated but there are a number of gotchas.

In a nutshell you…

1. Create a directory named “jquery” (really you could name it “gorgonzola” but why not be consistent, eh?) in Magento’s js folder and stick the current version of jQuery inside itwherever-you-installed-it/js/jquery/jquery.js
2. Implement jQuery’s noconflict mode by putting the following at the very end (very, very end… not inside a function or something) of the jQuery code

   jQuery.noConflict();

3. Add a call to jquery in the page.xml file (located somewhere like wherever-you-installed-it/app/design/frontend/default/blank/layout/page.xml Note that this assumes you are using the “blank” theme in the “default” frontend)

   This bit goes with all of the other addJs bits but, and this is what took up an hour of my incredibly valuable time (an hour I could have spent playing Wii Sports, anyway), make sure you put it after all of the other javascript files. Not just after some of them… after all of them.

4. To now make use of all of this go into wherever-you-installed-it/app/design/frontend/default/blank/template/page/html/head.phtml and put your jquery code right there at the end of the code