38

How to add external JavaScript file to Magento, so it's code would be included on every frontend page?

Improve this question

8 Answers 8

Reset to default
79

To add an external JS without any problem use this:

<reference name="head">
   <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.7.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
        </text>
      </action>
   </block>
</reference>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is the Most simplest way to add external JS: <reference name="head"><block type="core/text" name="external_js"> <action method="setText"><text><![CDATA[<script type="text/javascript" src="urltoexternalfile.js"></script>]]> </text> </action> </block> </reference>
Note that if you'd like to add anything to the head dynamically, you can add this to your layout without the <action>, then load the block in your controller and call setText there.
This method is the one that I use if I include an external js to specific magento pages. :D
Unfortunately Magento 1.x doesn't have an out of the box solution for external JS (except by using core/text). In M2 we do have, as described here: magenteiro.com/blog/magento-2/…
42

Put the JS file somewhere into the "js" folder, and in the XML layout you can include it with:

    <reference name="head">
        <action method="addJs"><script>folder/file.js</script></action>
    </reference>

Hope that helps.

Edit: You can also do it in your block: 

    protected function _prepareLayout()
    {
        $this->getLayout()->getBlock('head')->addJs('path/from/js/folder/to/your/file.js');

        return parent::_prepareLayout();
    }
Improve this answer

7 Comments

can we add js or css from a block in magento.. like $this->addJs('some.js');
this is adding baseurl infront of external javascript url. any idea to solve this?
@OSdave "You can also do it in your block:" which block types support this? Doesn't work extending Mage_Core_Block_Template. Thanks
@Jongosi I'm pretty sure blocks extending Mage_Core_Block_Template do support this, maybe there is an error somewhere else in your code
Actually this is not an answer to the question, this does NOT add external JavaScript file to Magento store. Copying JS file to js/ folder basically prevents You from using Google CDN/other popular CDN which host popular scripts. Check Gaurav Tewari answer to add external file.
|
6

You can use Inchoo_Xternal extension. So you can do something like this:

<layout version="0.1.0">
    <default>
            <reference name="head">
                <action method="addItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="addItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
                <action method="addExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="addExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
            </reference>
    </default>
    <catalog_product_view>
        <reference name="head">
                <action method="removeItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="removeItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
                <action method="removeExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="removeExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
            </reference>
    </catalog_product_view>
</layout>

Here you can find more info about this.

Improve this answer

Comments

5 
<block type="core/text" name="jquery">
    <action method="setText">
        <text>
            <![CDATA[<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js?ver=3.9.2"></script>]]>
        </text>
    </action>
</block>
Improve this answer

1 Comment

@Obsidian: Why did you remove the CDATA section? This must have destroyed the text-content. vikas: Your answer is missing an introductory sentence, it's not clear at all what the XML is supposed to do, an explanation is missing.
3

Create/edit the following:

app/design/frontend/PATH/TO/YOURTHEME/layout/local.xml

Make it look like so--should be self explanatory...

<!-- Add an EXTERNAL stylesheets  -->
<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400,300,700|Open+Sans:300italic,400,300</href></action>

<!--  Add an EXTERNAL javascript  -->
<action method="addLinkRel"><rel>text/javascript</rel><href>https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js</href></action>

<!-- Add stylesheets from your local theme directory located in skin/frontend/ -->
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

<!-- Add javascript from your local theme directory located in skin/frontend/ -->
<action method="addJs"><script>bootstrap.min.js</script></action>
Improve this answer

3 Comments

this produces <link rel="text/javascript" href="//js.js">
Same this worked for me: duntuk.com/magento-how-add-external-stylesheet-or-javascript
link rel will not include the javascript.. so addLinkRel wouldnt work for JS. I would go with something like <reference name="head"> <block type="core/text" name="jquery.mask"> <action method="setText"> <text><![CDATA[<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/…" defer/>]]></text> </action> </block> </reference>
1

Work fine with 2.1.7

app/design/frontend/PATH/TO/YOURTHEME/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/bootstrap.min.css" />
        <css src="css/YOUR.css" order="99" />
        <link src="js/jquery.js" />
        <link src="js/bootstrap.js" />
        <link src="js/YOUR.js" />
    </head>
</page>
Improve this answer

Comments

0

Method "addItem" and type "link_rel" to add external css file from page.xml

<action method="addItem"><type>link_rel</type>  <name>//vjs.zencdn.net/4.12/video-js.css</name><params>rel="stylesheet"</params></action>
Improve this answer

Comments

0

None of the methods above worked for me because the script was not hosted on the same domain as the website and had to be controlled using a config variable.

This was my solution:

    /** @var Mage_Core_Model_Layout $layout */
    $layout = Mage::getSingleton('core/layout');

    /** @var Mage_Core_Block_Text $block */
    $block = $layout->createBlock('Mage_Core_Block_Text', $name);

    $block->setText('<script type="text/javascript" src="'.$url.'"></script>');

    /** @var Mage_Page_Block_Html_Head $head */
    $head = $layout->getBlock('head');

    $head->append($block);

I did this in an observer observing controller_action_layout_generate_blocks_after

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.