Adding external JavaScript file to Magento

Question

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

score 80 · Answer 1 · edited Aug 28 '14 at 14:52

80

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>

edited Aug 28 '14 at 14:52

brasofilo

25,496
15
91
179

answered Jul 26 '12 at 16:51

Gaurav Tewari

1,024
9
9

2

This is the Most simplest way to add external JS: <![CDATA[]]> – Gaurav Tewari Aug 19 '12 at 21:35
Note that if you'd like to add anything to the head dynamically, you can add this to your layout without the , then load the block in your controller and call setText there. – Darth Egregious Feb 06 '14 at 20:37
This method is the one that I use if I include an external js to specific magento pages. :D – jehzlau Jun 02 '15 at 13:19
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: https://magenteiro.com/blog/magento-2/como-adicionar-js-externo-no-magento-2/ – Ricardo Martins May 01 '19 at 03:36

score 42 · Accepted Answer · edited Dec 10 '12 at 11:59

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();
    }

edited Dec 10 '12 at 11:59

trejder

17,148
27
124
216

answered Jan 11 '11 at 10:27

OSdave

8,538
7
45
60

can we add js or css from a block in magento.. like $this->addJs('some.js'); – Imran Khan Jun 17 '11 at 09:32
5

this is adding baseurl infront of external javascript url. any idea to solve this? – Mukesh Chapagain Jul 11 '11 at 12:51
@OSdave "You can also do it in your block:" which block types support this? Doesn't work extending Mage_Core_Block_Template. Thanks – Jongosi Jun 21 '13 at 12:44
@Jongosi I'm pretty sure blocks extending Mage_Core_Block_Template do support this, maybe there is an error somewhere else in your code – OSdave Jun 21 '13 at 13:15
9

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. – matt Nov 23 '13 at 11:00
@OSdave What if I want to add CSS and JS to module's backend page? I means I want to add custom js and CSS files in Magento backend – Vipul Hadiya Mar 16 '15 at 06:27
@VipulHadiya it works the same, but in the adminhtml folder instead of the frontend one – OSdave Mar 16 '15 at 08:58

score 6 · Answer 3 · answered Jan 16 '13 at 11:21

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.

score 5 · Answer 4 · edited May 01 '19 at 03:34

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>

edited May 01 '19 at 03:34

Ricardo Martins

5,702
3
40
59

answered Sep 16 '14 at 07:28

vikas

107
2
6

2

@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. – hakre Apr 25 '15 at 06:44

score 3 · Answer 5 · answered Aug 27 '15 at 15:34

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>

Same this worked for me: http://duntuk.com/magento-how-add-external-stylesheet-or-javascript — itsazzad, Sep 09 '15 at 05:00
link rel will not include the javascript.. so addLinkRel wouldnt work for JS. I would go with something like <![CDATA[]]> — Ricardo Martins, May 01 '19 at 03:33

Boss COTIGA · Answer 6 · 2017-07-10T16:37:31.593

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>

score 0 · Answer 7 · answered Oct 26 '15 at 17:26

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>

answered Oct 26 '15 at 17:26

Evo clamcase2

1

score 0 · Answer 8 · answered May 29 '19 at 13:12

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

Adding external JavaScript file to Magento

8 Answers8

Linked