0

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

Currently, my 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.

Improve this question

1 Answer 1

Reset to default
0

Try using below code in your xml file

<layout> <default> <!--Root/Default Layouts--> <!--CSS and JS Files--> <reference name="head"> <!--Add CSS and JS, skin Folder--> <!-- add global JS functions library --> <action method="addItem"><type>skin_js</type><name>min/global-min.js</name></action> <!-- Link to external JavaScript file (e.g Jquery CDN) --> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text><![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>]]></text> </action> </block> </reference> </default> </layout>

You can replace the jQuery source, with the version you require.

Since local.xml is loaded at last by the magento, so the xml mentioned there are merged at last. That may be the reason that your load order is not working as you desire.

Alternatively, you can override the Mage_Page_Block_Html_Head::getCssJsHtml() method and play with it.

Moreover, you can try the params element, with name attribute in it, Magento will sort in ascending order:

<action method="addJs"><!-- this will be shown second --> <script>prototype/javascript1.js</script> <params><![CDATA[name="js002_second"]]></params> </action> <action method="addJs"><!-- this will be shown first --> <script>prototype/javascript2.js</script> <params><![CDATA[name="js001_first"]]></params> </action>

Mage_Page_Block_Html_Head $_data; holds the array of items so I you can filter it but default methods does not allow defining order of added items.

Again if you're working with core/text block, you can use before/after to define your load order. For example:

 <layout> <default> <reference name="head"> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]> </text> </action> </block> <block type="core/text" name="normalize.cdn.css"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" href="http://css.cdn.tl/normalize.css">]]> </text> </action> </block> <block type="core/text" name="bootstrap.cdn.css"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">]]> </text> </action> </block> <block type="core/text" name="bootstrap.custom.css"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/bootstrap.css">]]> </text> </action> </block> <block type="core/text" name="layout.custom.css"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/layout.css">]]> </text> </action> </block> <block type="core/text" name="css.custom.css"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/styles.css">]]> </text> </action> </block> <block type="core/text" name="javascript.custom.js"> <action method="setText"> <text><![CDATA[<link rel="stylesheet" src="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/js/script.js">]]> </text> </action> </block> </reference> </default> </layout>

Hope it helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the reply but unfortunately that doesn't change the the output order of the rendered blocks and rather just results in the same output I currently have.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.