I don’t know about you but I often find myself removing third party module’s CSS and sometimes even JS files from loading in my custom themes because I need to change most of the styling and don’t want to add bulk to my site.
Traditionally, I do it using my local.xml as outlined in my previous article. However, it would be good practice if module developers would provide the option right from their module configuration.
This is actually really easy to do, watch this:
1. Create configuration options in system.xml:
...
<groups>
<advanced translate="label">
<label>Advanced</label>
<frontend_type>text</frontend_type>
<sort_order>100</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
<fields>
<load_css translate="label comment">
<label>Load Stylesheet</label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
<sort_order>10</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
<comment>Set to No if the supplied stylesheet file should not be loaded.</comment>
</load_css>
<load_js translate="label comment">
<label>Load Javascript</label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
<sort_order>20</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
<comment>Set to No if the supplied javascript file should not be loaded.</comment>
</load_js>
</fields>
</advanced>
</groups>
...
Here, I’m only showing the relevant part for brevity. Essentially, I have an Advanced section with two Yes/No drop downs which allow the admin to configure the desired options.
2. Add your conditional includes to your module’s layout XML:
<reference name="head">
<action method="addCss" ifconfig="my_config_section/advanced/load_css"><stylesheet>css/my_module/my_module.css</stylesheet></action>
<action method="addItem" ifconfig="my_config_section/advanced/load_js"><type>skin_js</type><name>js/my_module/my_module.js</name></action>
</reference>
And there you have it. Your css and js will only be included if the configuration allows it.
Originally published on magebase.com. Copyright © 2011 Magebase - All Rights Reserved.
Proud members of the 
[...] ändern.Eine schöne Idee, die ich aufgreifen möchte, wird bei magebase beschrieben: man soll die Einbindung von JS-/CSS-Dateien für Extensions über das Backend konfigurierbar machen.Fabrizio hat seine Extension Aoe_Scheduler um eine optische Timeline erweitert, mit der man [...]
Unfortunately this only works with yes/no configuration. What if you want to let the user choose (say between different stylesheets or jQuery vs Prototype)? I suppose you could write a custom backend for your configuration that would save the value of a select as a series of yes/no answers for each option, or is there a better way?
@Colin Yes, this feature is limited to yes/no type config values.
I’m not sure how to exactly achieve what you are looking for but, looking at:
maybe the $cond parameter could be useful for your purpose? I haven’t seen it used in any of the Magento layout XML but reading the code in getCssJsHtml() suggests that this parameter is somehow tested when the include html is about to be output.
Let us know if you manage to work out how to use this parameter.
The $cond parameter checks if a property on the block is set but does no value comparisons.
However, this would be a little easier than using a custom backend (though less extensible):
<reference name="head"> <action method="addCss" ifconfig="my_config_section/advanced/load_css"> <stylesheet helper="myhelper/getStylesheet"></stylesheet> </action> <action method="addItem" ifconfig="my_config_section/advanced/load_js"> <type>skin_js</type> <name helper="myhelper/getJs"></name> </action> </reference>Then ‘myhelper’ needs to have methods getStylesheet and getJs which return the relative path of the css/js to include.
NOTE: I haven’t tested the above but from reading Mage_Core_Model_Layout->_generateAction it should work.
Hello Robert. Thanks for the clear guide. Just one more question
Do you know if it is possible to add CSS or JavaScript conditionally depending on OS or browser. For example I need to add some CSS changes but only for Mac OS safari browser. I know how to do this using PHP but I could not find how to add it using Magent xml files (if it is possible at all).