0

Having some trouble rendering jQuery in my Magento theme via local.xml in an appropriate position.

Currently, the section in question in my layout.xml looks like so:

<!-- load jQuery from CDN with local fallback, latest version 1.11.0 -->
<block type="core/text" name="google.cdn.jquery">
    <action method="setText">
        <text><![CDATA[<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script>window.jQuery||document.write('<script src="js/jquery-1.11.0.min.js">\x3c/script>');</script><script>jQuery.noConflict();</script>]]></text>
    </action>
</block>

<!-- add global JS functions library -->
<action method="addItem"><type>skin_js</type><name>min/global-min.js</name></action>

However the global-min.js file here is rendered before jQuery, which (along with other added core/text type blocks) is sitting after the rest of my skin JS files.

Is there a way to move the CDN loaded jQuery file up in terms of output priority inside the head of my site?

Thanks very much for your help.

Note: apologies if this is considered bad practice but I'm reposting a question I posted on StackOverflow (https://stackoverflow.com/questions/25349584/controlling-order-of-blocks-in-magento-layout-xml-jquery-cdn-appearing-after-a) as I thought this might be a more appropriate forum.

1

Found a couple of solutions to my original problem:

  1. Call the google.cdn.jquery block in via <?php echo $this->getChildHtml('google.cdn.jquery') ?> before the <?php echo $this->getChildHtml() ?> block in my head.phtml template, and then use <?php echo $this->unsetChild('favicon.extra') ?> to reposition the block (to avoid duplication).
  2. Utilise another block in the footer to call my global functions relying on jQuery as per the answer provided here: Is there any way to add JS/CSS to footer page?.

Number 2 is the solution I chose to go with as it indirectly but clearly solved the underlying issue I was facing.

Thanks for your help.

| improve this answer | |
0

Use this layout file to achieve this.

 <default>
    <reference name="head">
        <block type="core/text" name="google.cdn.jquery" template="custom/head/head.phtml" />
    </reference>
</default>

Now define the template

File : app/design/frontend/<package>/<theme>/template/custom/head/head.phtml

<script src="<?php echo $this->getSkinUrl('min/global-min.js') ?>"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>window.jQuery||document.write('<script src="js/jquery-1.11.0.min.js">\x3c/script>');</script><script>jQuery.noConflict();</script>

This will definitely solve your problem and your layout file looks more clean :)

| improve this answer | |
  • While this could work somewhat (note: I need global-min.js to be placed after jQuery as it relies on it), it sort of means I lose control of the global-min.js file through layout.xml. It does give me a good idea for grouping all of my CDN loaded scripts into a template file though. Unfortunately not exactly the solution I'm looking for overall. – fvzzy Aug 19 '14 at 14:09
  • if you need global-min.js after jquery, you can alter template file accordingly and achive it. Defining template file provides you a reliable way to adjust your scripts. You can use this template file to load any script file in any order. I think this is the best way that you can rely on – Rajeev K Tomy Aug 19 '14 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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