How to add an external javascript/css file to Magento?

Have you ever had a need for adding external files into your Magento layout?
If you had then you know that you cannot do that from your xml layout files using methods/action:
<action method="addJs">
<action method="addCss">
or
<action method="addItem">
You could do that by hard-coding your “head.phtml” file, but then those external files will be loaded on all Magento pages.
This simple extension will provide you easy access for adding/removing external files such as JavaScript or CSS, libraries from remote servers which you cannot or don’t want to put on your server.
I called it Inchoo_Xternal extension.
How wonderful it would be if you could add or remove external, let’s say JavaScript libraries:
prototype: https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
or
jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js
from yours “layout.xml” file and without modifying/hard-coding yours “head.phtml”.
Extension is very simple and it exists from only one Block class which extends and rewrites “Mage_Page_Block_Html_Head” class and configuration files of modules.
config.xml:
<?xml version="1.0"?>
<config>
<modules>
<Inchoo_Xternal>
<version>1.0.0</version>
</Inchoo_Xternal>
</modules>
<global>
<blocks>
<inchoo_externals>
<class>Inchoo_Xternal_Block</class>
</inchoo_externals>
<page>
<rewrite>
<html_head>Inchoo_Xternal_Block_Html_Head</html_head>
</rewrite>
</page>
</blocks>
</global>
<frontend>
<layout>
<updates>
<inchoo_xternal module="Inchoo_Xternal">
<file>inchoo_xternal.xml</file>
</inchoo_xternal>
</updates>
</layout>
</frontend>
</config>
Block class is very simple and it have 2 new methods I have called:
removeExternalItem which do the same as removeItem
and
addExternalItem also do the same as addItem
but I have added new types:
which loads external libraries.
Here is example of my layout.xml:
<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>
As you can see from this example, external libraries are loaded on all the pages but product view page.
Download Inchoo_Xternal extension for easily adding external javascript and css files.
Enjoy coding!
60 comments
Hello
I need to add my cdn js link above the prototype.js in Magento 1.9. Please let me suggest how can I add my js links above the prototype.js.
Which version of magento is this
Hi friend,
i have a problem to use addExternalitem. look that:
“Invalid method Mage_Page_Block_Html_Head::addExternalItem(Array
(
[0] => external_js
[1] => http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js
[2] => Mage_Core_Model_Layout_Element Object
(
)
)
This doesn’t seem to support conditionals in an if tag, within actions. E.g. for
Also see: http://magento.stackexchange.com/a/92475/31869
I think you can add it directly inside Update Layout XML without using the extension. Just like this
<![CDATA[jQuery.noConflict();]]>
Oops sorry I forgot the add the pre code tags. Here it is:
Great Tutorials, Thanks for sharing!
The external stylesheets seem to load after the internal stylesheets no matter what order you place them in the local.xml file. Is there a way to solve that? I want my internal stylesheets to come after the external.
Thanks for the plugin!
This also works for including external paths:
<![CDATA[]]>