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.


Back Older article Newer article

New theme released

Responsive Magento Theme - Gala Marcos

A truly impressive Magento template for fashion store from Galathemes, Gala Marcos. It amazes visitors by modern and high-fashion look, and also, neat design.

Read more

Our services

Installation

Magento Custom Development

Magento is the most powerful eCommerce system offering rich customization possibilities by extensions and modules.

We offer custom extension development performed by our full-time Magento experts to ensure the custom extension developed follow Magento code standard, optimized and pass our quality tests.

Read more

design

Magento Custom Design

Design and development a custom Magento template for your Magento store. Our designers and developers are specialists in Magento Commerce and have strong experience in Magento projects.

We provide all design in PSD files, template package and sample data. We also help you install the theme on your store if required. We start your project instantly and with highest priority.

Read more

Magento Template Conversion

PSD to Magento Theme Conversion

PSD to Magento Theme Conversion is a leading strength of us. We have an intelligent process and experienced staff, so you will save much time.

We easily convert a store designs in PSD format into a fully functional Magento commerce template. Quick and convenient for you to create an online store based on Magento is through "PSD to Magento Theme Conversion" service. We bring the flexibility, user friendly modules, and the extensions to improve the functionality of Magento.

Read more

Development

Magento Site Development

We update our Magento knowledge everyday. Having an excellent knowledge on Magento design, Magento programming and server optimization, we guarantee your project get done perfectly.

We apply the philosophy of agile project management to ensure your project always performs on the right way, you'll get updates frequently, any changes of scope of project can be informed early to minimize risks, time and cost.

Read more

Optimization

Magento Server Optimization

We realy provide the best service for you. Among them are optimized for Magento server is very important. Your ecommerce shop will flexibility and agility absolute. Connecting with customers, processing speed, the gentle query and sensitive to the search engine is very easy

Read more