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

How to add an external javascript/css file to Magento? © image by mauricesvay left @flickr

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:
external_css
external_js

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!

You made it all the way down here so you must have enjoyed this post! You may also like:

Getting started with CSS Flexbox Goran Kolak
Goran Kolak, | 1

Getting started with CSS Flexbox

Extending javascript methods Magento way Tomislav Nikcevski
Tomislav Nikcevski, | 2

Extending javascript methods Magento way

How to add an external javascript/css file to Magento? Tomas Novoselic
, | 1

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

60 comments

  1. 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.

  2. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.