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
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');
31 Comments
anton78
28. Feb, 2009
Good article. Thanks for sharing. I was wondering… I have separate css stylesheets that coordinate with different .phtml template layout files, 1 column, 2 column, 3 column. How would you load different stylesheets according to the page currently being viewed? Is this even recommended or do you have a better suggestion?
Charlie
03. Mar, 2009
Hello,
I just wanted to take a min. to say thanks for taking the time to publish help topics for Magento. I have been banging my head against the wall for a while trying to put my hands around the flow of Magento. They have so many files depending on other files and pointing all over the place its like a web of confusion. Thanks,
Charlie
matt
22. Mar, 2009
Nice introduction and explanation. In the interest of separating core code from design and content, perhaps it’s best to guide developers away from putting front-end level code in block files
Fido
24. Mar, 2009
Matt – I agree, with the stipulation that it depends on your implementation of the code. If you are creating an entire module, you should add this via a layout xml file.
None of this should go into a core file, block variety or otherwise.
shahriat
26. Mar, 2009
g8 article, its better add or remove any js or css files by modifying the layout xml files for the next generation
Magento Developer
29. Apr, 2009
Hi there,
Really good article ..Also now I will read your blog & i will read your all post I am really happy after getting this blog.
Thanks,
Samir
Web Design Lancashire
09. May, 2009
I’m about to start developing a magento ecommerce based website, i’ll keep this information in mind.
Thanks
Igor
18. Jun, 2009
I don’t understand how to remove css for page.
For example for print order page I don’t need main.css file.
main.css file located at section in file page.xml
In case I wrote in file sales.xml section such
csscss/main.css</name
or
csscss/main.css</name
then I’ll get errors.
Could you please give me advice how to remove css ?
Magento Themes
12. Sep, 2009
very helpful. thanks for the post. xml newbie here lol
amtec
18. Sep, 2009
How do you add remote files ?
Like http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js ?
vickeey
09. Oct, 2009
I place the .js file in root/js/stepcarousel.js
wat path i should mention?
or
Stinky59
22. Oct, 2009
Click Add, and then click New. ,
newberemis
24. Nov, 2009
Thanks you
sandra83smith
18. Dec, 2009
Thanks, nice article and provide useful information.
Hazel
21. Dec, 2009
Many thanks for sharing this. It helped me out…
Magento Developer
10. Feb, 2010
thanks for this wonderful post. really a great article for magento developers.
makeup uden parabener
12. May, 2010
Excellent… this helped me insert the Zopim Live Chat module on all pages except for my payment gateway, which runs through SSL.
Unfortunately, I don’t have the budget to go buy a Zopim solution including SSL – the small solutions doesn’t include it
Suricate
18. May, 2010
Very good article thanks so much from Brazil!
Josh Di fabio
19. Jul, 2010
If you want to remove all CSS and JS files from the head (which can be useful on CMS pages) you can do the following:
items
items
css/some-file.css
Josh Di Fabio
19. Jul, 2010
If you want to remove all CSS and JS files from the head (which can be useful on CMS pages) you can do the following:
$lt;reference name=”head”>
$lt;action method=”unsetData”>
$lt;name>items$lt;/name>
$lt;/action>$lt;!– there are now no css/js links in the head –>
$lt;action method=”addCss”>
$lt;stylesheet>css/some-file.css$lt;/stylesheet>
$lt;/action>$lt;!– there is now one css and no js links in the head –>
$lt;/reference>
Josh Di Fabio
19. Jul, 2010
Sorry, keep screwing up the post!
If you want to remove all CSS and JS files from the head (which can be useful on CMS pages) you can do the following:
<reference name=”head”>
<action method=”unsetData”>
<name>items</name>
</action><!– there are now no css/js links in the head –>
<action method=”addCss”>
<stylesheet>css/some-file.css</stylesheet>
</action><!– there is now one css and no js links in the head –>
</reference>
Sigma Infosolutions
21. Jul, 2010
Wow.. nice Article .. Thanks
would like to share :
Version :magento.1.4.x. It will have default order export functionality compare to older version. With present version we need to download extension to do order export. Therefore its better to use magento 1.4.x for new features.
Thanks,
Anil
Sigma Infosolutions
29. Jul, 2010
How 2 different sub-domain can have same shopping cart (i.e) Items purchased from one Sub-domain should reflect when went to another sub-domain and vice-verse in magento. Please suggest ……
Thanks,
Anil
Mark
30. Sep, 2010
Thanks for this article. As a newbie with Magento it was nice to find an article that’s easy to follow and well written.
locksmiths
30. Sep, 2010
I was searching here and there to customize magento and understand it more internal and external system. These kind of article has make life easy. Thanks dude for such wonderful articles.
Thanks
magento developer
29. Oct, 2010
Nice one. thx for sharing. Will import this article into our internal Wiki. Thx again.
Асус
29. Oct, 2010
Nice one ) My next project will be on Magento, so I’m researching a lot. Ur posts are very helpful, thx.
Vincent
08. Nov, 2010
Wrong! There is a typo at method 2 : “</name”
And even if I correct it and paste it, it’s NOT working.
Profound
02. Dec, 2010
Nice post! Thanks for sharing this! I was looking for a simple ways to add and remove Javascript. This post solves my problem.
Name
09. Dec, 2010
How would you move the javascript to the bottom of the page? In order to adhere to best practices?
This here
items
css/some-file.css
does not seem to work in magento 1.4.1.1
capnhud
09. Dec, 2010
can you use the method in post 999 to move all the javascript to the bottom of the page and it this the exact method
<reference name=”head”>
<action method=”unsetData”>
<name>items</name>
</action><!– there are now no css/js links in the head –>
<action method=”addCss”>
<stylesheet>css/some-file.css</stylesheet>
</action><!– there is now one css and no js links in the head –>
</reference>
Leave a reply