Question

What is the recommended way to add jQuery (or any script) BEFORE the rest of the scripts that come with Magento using local.xml?

I’ve tried to use (in local.xml):

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.6.4.js</script>
    </action>
</reference>

but this ends up adding jQuery to the end of the scripts that are added by Magento in page.xml in the base package. I’ve even tried removing all the scripts using:

<action method="removeItem">
...
</action>

to remove all of the scripts that were added in page.xml and then re-adding them in local.xml in the order I need them to be in (jQuery first), but somehow, they are ending up in the same order (with jQuery last).

I’ve stepped through the Magento code and verified that the scripts are getting removed and then re-added to $this->_data[‘items’] in Mage_Page_Block_Html_Head, but at some point, when they get added to the page, they are added with jQuery last.

I’m guessing there has to be a more elegant way to do this, but I’ve yet to find it in my Googling. Everything I’ve found recommends modifying page.xml directly, which I’ve read elsewhere is not a good idea.

Answer 1

Best is to use the content delivery network which will be better in performance/speed for your website.

I mostly just open up template/page/html/head.phtml and right before

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

I add:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Also make sure you run the jQuery.noConflict() method and always use the full jQuery name instead of the $ (dollar sign) to avoid conflicts with prototype 😉