When it comes to JavaScript libraries, I prefer jQuery over Prototype. This becomes problematic when I try to include jQuery libraries and plugins with Magento because Magento relies heavily on Prototype. Even when I include a call to jQuery.noConflict() and wrap my code in closures, I still get a script error with Internet Explorer 7 and 8: “Object doesn’t support this property or method”.

I solved this problem by rearranging my JavaScript includes. Basically, include the jQuery library and a call to jQuery.noConflict() before including the Prototype library and include your custom code that uses jQuery to the end of the JavaScript includes.

1. Create a jquery folder under Magento’s top-level js directory

2. Put the jQuery .js file in js/jquery

3. Create a .js file named noconflict.js in js/jquery. The only contents of that file are:

jQuery.noConflict();

4. Add the jQuery and noconflict scripts to the page layout. In your theme’s layout/page.xml file, update the “head” block and add the addJs lines to the top before the addJs lines for prototype:

<action method="addJs"><script>jquery/jquery-1.8.2.min.js</script></action>
<action method="addJs"><script>jquery/noconflict.js</script></action>

5. Add any additional custom scripts to the end of the list. But make sure they are enclosed in enclosures:

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