Magento: Adding and Removing Css/Javascript

Magento handled javascript and css in the most convenient way. Practically speaking, magento gives you an easy option on how to delete, add or specify javascript/css in each part of magento (cms pages, cart page, category& product page, etc...). Today, I will show some of the most convenient way on how to add css and javascript in magento.

Adding CSS / Javascript

OK, the first method is by using the Layout.xml

LAYOUT XML
As you probably already know, magento is handling the layout of the theme using XML files. These XML files is located on your layout directory (app/design/frontend/default/your_theme/layout/). OK, so, specifically in adding a javascript or css we will alter the page.xml in the said folder. Within the page.xml file you will find the <default>…</default> . This composed of <block>..</block> node that defined the page layout. Look for the block that has a child name “head” which you might noticed that contains default css and js elements.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
</block>

This is the area where you need to add your javascript and css. Most important note that you need to remember when adding a javascript is that you need to store you javascript file under the “js” folder that can be found in the root of your magento installation directory. On the otherhand css files are included from the skin files of the current and default templates (skin/frontend/default/your_template(& default)/css). Ok, to add javascript file you just simply need to follow the syntax and that’s it . Boom! Javascript added. (Please see the highlighted code for the sample)

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>your_folder/your_js.js</script></action>
<action method="addCss"><stylesheet>css/your_css.css</stylesheet></action>
</block>

You can also add javascript or css in a specific areas such as cart page, category page etc. But I will tell you more about that in separate article.:)

The next method is using the BLOCK CODE.
BLOCK CODE

All head block function are defined in this class Mage_Page_Block_Html_Head. So, basically we can call this function like in the following format.

$headBlockJs = $this->getLayout()->getBlock('head');
$ headBlockJs  ->addJs(‘your_folder/yay.js');

This method is also great but I preferably using the first one. I find the XML method simple and organized.

Removing CSS / Javascript

If there’s an addItem there also removeItem method which is the inverse method of the addItem. Please take a look at the following examples below. XML LAYOUT ( Removing Item)

<action method="removeItem"><type>js</type><name>calendar/calendar.js</name</action>

BLOCK CODE (Removing Item)

$this->getLayout->getBlock('head')->removeItem('js',your_folder/your_js.js');

Hope this article help:). Please share..:)