CODEWITHSUNDEEP
magentomagento-1.7magento-1.9magento-layout-xmllayout-xml
Wildcard27
Wildcard27

Reputation: 1459

Load external Javascript before skin Javascript in Magento

I'm trying to add the Google Maps Javascript API to my Magento module.

The problem I'm having is that the core/text block that I am including, that contains the external Javascript inclusion tag, only ever appears after all of the addJs actions.

This means the script I have in pvtl_stores.js that targets the google object doesn't work as the google object hasn't been initialized yet.

Here is my local.xml file:

<layout>
<default>
    <reference name="head">

        <block type="core/text" name="google.maps" before="root">
            <action method="setText">
                <text><![CDATA[<script src="//maps.googleapis.com/maps/api/js"></script>]]></text>
            </action>
        </block>

        <action method="addItem">
            <type>skin_js</type>
            <name>js/pvtl_stores.js</name>
        </action>

    </reference>
 </default>
</layout>

Is there a way to have the core/text block load before the addJs actions?

By the way, if it isn't obvious by the question, I'm new to Magento programming!

Upvotes: 3

Views: 2465

Answers (1)

urfusion
urfusion

Reputation: 5501

upload you Js in root\js folder. And call this code in your app\design\frontend\base\default\template\page\html\head.phtml file at top.

<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS)."/yourjs.js"; ?>

or just direct call that 

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>

UPDATE

You have to download the js first then go to app\design\frontend\rwd\default\layout page.xml (if you are using default theme otherwise go to yourtheme\default\layout) and you js here

    <block type="page/html_head" name="head" as="head">
            <action method="addJs">
               <script>yourjs/yourjs.js</script>
           </action>

            <action method="addJs">
               <script>prototype/prototype.js</script>
           </action>

Upvotes: 2

Related Questions