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

Few years ago, we had an article describing how to add external files into Magento.
It was quite popular, so we decided to come back to it today.
Knowing that there is no way to add or remove external files via Magento layout using action/methods, this extension was introduced.

Idea was quite simple actually. All you had to do is to install this extension:
Inchoo_Xternal extension

Starting from there, it was possible to use two new methods in your layout.

<!-- Along with these 3 methods -->
<action method="addJs">
<action method="addCss">
<action method="addItem">
<!-- you can use additional two methods -->
<action method="addExternalItem">
<action method="removeExternalItem">

addExternalItem and removeExternalItem were just aliases of addItem and removeItem added to Inchoo_Xternal_Block_Html_Head which is the class this extension is rewriting.

Of course, nobody would rewrite class just to add methods aliases so the main thing was adding two new types there: external_css and external_js.

So, here is how it looks like if you want to add for example 

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

in all pages except product view page.

<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addExternalItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>
        </reference>
    </default>
    <catalog_product_view>
        <reference name="head">
            <action method="removeExternalItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>
        </reference>
    </catalog_product_view>
</layout>

You could use the code below and you would get the same result, but for readability’s sake, use aliases so you know which part of code depends on the 3rd party extension.

<action method="addItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>

“Depends” is a keyword here and one of the main reason why we got back to this article again.

Even though this extensions works now (5 years later) and even though it found it’s home in some of our projects, very important point that wasn’t made when the article was originally published.
This is the third party code. If it’s clean and nice and if you are adding many external files into your installation it can really help you speed things up, but average site doesn’t need that many external files.

So why would you want to have 3rd party extension just to be able to support your theme?

There are many developers around the globe that are looking for quick solution no matter is that the best tool for the job. Result is a website which is made of 100+ installed extensions and majority of those extensions are rarely used. Most of them are installed, I would guess, because developer was looking for an easy and dirty solution.

After some time, that becomes a burden. New developers need more time to get familiar with the project, site gets slow, maintenance becomes horror – there is just more point of failures than you actually need on an average site.

When you publish a Magento related code on the blog, that’s mostly the result of playing with Magento, but many people will use it in real life situations which isn’t always the best idea.

I am not saying that this extension is wrong, I would just like to point out that using it on an average site is not needed. Many people ended up installing the extension just to add 3 lines of text to their shop.

Unless you are already developing similar set of tools that you plan to use as a starting point on most of your sites, there are more simple solutions.

So, even though you are still free to use the extension as much as you like, we recommend that you do that in case you know why exactly you need it, otherwise, do the following:

Add this to your layout, and sleep well 🙂

<reference name="head">
    <block type="core/text" name="your_external_file">
        <action method="setText"><text><![CDATA[<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>]]></text></action>
    </block>
</reference>

That’s it!

Enjoy responsible coding!