Explore Magento

Adding and removing javascript / css when and where you need it

Posted on 19. Feb, 2009 by Fido in CMS, Design, Development, Magento

Adding and removing javascript and css is handled separately within Magento. CSS is added in the usual fashion, where you have a <link rel=”stylesheet”… />. However, any included javascript (unless linked to “by hand” from a theme’s skin) is pulled via a php files which reads through the “js” folder in the root directory (root/js/index.php is responsible for this).

That is all well and good for Magento. The real question is how we, as developers, add these items when we need them. How you as a developer add css or javascript is, luckily, handled the same.

In this post, we will show how to add and remove javascript and css to a CMS page (and anywhere else) that you may need.

Method 1: Layout xml.

a) For files you want to include on every page

For css or js files you want to add to every page, you edit the page.xml files located in your layout folder (app/design/frontend/default/your_theme/layout/page.xml). Within this file, at the top you will find the <default> area with the <block name=”root” … >. This block has a child named “head” which contains the included 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>

Here you can add your javascript and css. Note that any Js files you add are relative to the “js” folder in your root directory. The css files are included from the skin files of the current and default templates (skin/frontend/default/your_template(& default)/css).

b) Specific areas

If you want to include css or js on only certain areas (such as the checkout process or catalog pages), you can do that also. For instance, if you want it in a single product view (product view vs product list), you can open up catalog.xml, find <catalog_product_view> area (near line 168 in vs 1.2.1).  Add your code in there – notice that we are using the <reference> tag rather than <block> tags. We use the “reference” tag to reference other blocks that are in other areas of the template.

<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>

<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/lang/calendar-en.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference>

The use of can also be used in your layout XML areas in the admin backend (CMS pages, category and product designs). This can accomplish the same thing, as well as adding or removing other blocks.

Method 2: Block Code

We can accomplish all of this in code as well. These functions are defined within Mage_Page_Block_Html_Head. So, we can use this code with in a block class (not a .phtml file!):

$headBlock = $this->getLayout()->getBlock('head');
$headBlock->addJs('somefolder/yay.js');

I suggest looking over the page.xml files as long as finding the removeItem syntax ($type, $name for the method, for the xml), which will be very handy for you for adding or removing assets as and when you need them!

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

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

Tags: a, block, CMS, magento customization, magento design, xml