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.

Community
  • 1
fvzzy
  • 13
  • 2
  • 5

2 Answers2

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.

Community
  • 1
fvzzy
  • 13
  • 2
  • 5
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 :)

Rajeev K Tomy
  • 17,234
  • 6
  • 61
  • 103
  • 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