In Magento environment, prototype rules. In order to play with jQuery, we need to:

Complementary to that, I prefer to avoid packaging again and again the JavaScript libraries, so the solution would be to load external_js; two major benefits:

  • Module easier to debug
  • Gain loading speed by using cached files (for instance, using cdn), the more developers use this practice, the better for us all it will be.

How to mix all these requirements?

1 Answer 1


Well, mixing different solutions, I came up with that XML (module layout) code:

<?xml version="1.0"?>   
<layout version="0.1.0">   

        <update handle="add_jquery_first" />

        <reference name="head">
            <block type="core/text" name="jquery_load">
                <action method="setText">
                    <text><![CDATA[if (!!!window.jQuery){ document.write('
                    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
                    <script type="text/javascript">jQuery.noConflict();</script>');

    <!-- other stuff -->


The javascript part is ugly, but working :) And you can load other jQuery libraries as well.

For this example, I load the latest from jQuery, but you can replace the url by the one you want, for example:

That's all folks!

Future update: guess if the (hypothetically) already pre-loaded one is the right (or compatible) version with jQuery.fn.jquery

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.