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.

Improve this question

2 Answers 2

Reset to default
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
2
  • 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. Commented Aug 19, 2014 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 Commented Aug 19, 2014 at 14:47

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.