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

Featured Image © 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!

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


52 comments

  1. 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> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.