Author - Robert Popovic

I launched Magebase in April, 2010 and am its editor and contributor. My main topics of interest are Magento development, customization and how to get the most out of Magento with the least amount of headache.

More Info » Follow me on Twitter »

Reader Comments (8)

  1. Links 34/2011: Magento, e-Commerce und Entwicklung allgemein

    […] ä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 […]

  2. Colin
    September 2, 2011 at 6:25 am /

    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?

    Reply
  3. Colin Mollenhour
    September 3, 2011 at 2:43 am /

    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.

    Reply
  4. Dmitry
    Dmitry
    December 25, 2012 at 7:53 pm /

    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).

    Reply
  5. Jack
    Jack
    April 9, 2018 at 6:38 am /

    For anyone wondering how to use multiple different stylesheets based on config settings, this is how I did it:

    Pass in a helper function in the xml file where you add the css:

    skin_css

    Now in my helper file (my case it’s code/Helper/Data.php:

    const CAMPAIGNMONITOR_POSITION_POPUP_MIDDLE = 1;
    const CAMPAIGNMONITOR_POSITION_POPUP_BOTTOM = 2;
    const CAMPAIGNMONITOR_POSITION_POPUP_LEFT = 3;
    const CAMPAIGNMONITOR_POSITION_POPUP_RIGHT = 4;
    const CAMPAIGNMONITOR_POSITION_POPUP_TOP = 5;

    /**
    * Get the style sheet based on configuration
    * @return bool
    */
    public function getstyle()
    {
    $popupPosition = Mage::getStoreConfig(‘newsletter/popup/popupposition’);
    switch ($popupPosition) {
    case self::CAMPAIGNMONITOR_POSITION_POPUP_MIDDLE:
    return ‘css/factoryx/campaignmonitor/popup_middle.css’;
    case self::CAMPAIGNMONITOR_POSITION_POPUP_BOTTOM:
    return ‘css/factoryx/campaignmonitor/popup_bottom.css’;
    case self::CAMPAIGNMONITOR_POSITION_POPUP_LEFT:
    return ‘css/factoryx/campaignmonitor/popup_left.css’;
    case self::CAMPAIGNMONITOR_POSITION_POPUP_RIGHT:
    return ‘css/factoryx/campaignmonitor/popup_right.css’;
    case self::CAMPAIGNMONITOR_POSITION_POPUP_TOP:
    return ‘css/factoryx/campaignmonitor/popup_top.css’;
    default:
    return ‘css/factoryx/campaignmonitor/popup_middle.css’;
    }
    }

    Returns different things based on what was selected in the configuration field popupposition.

    Reply
    1. Jack
      Jack
      April 9, 2018 at 6:38 am /

      For some reason it didn’t post my xml code:

      skin_css

      Reply
      1. Jack
        Jack
        April 9, 2018 at 6:39 am /

        skin_css

        Reply

Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use http://pastebin.com and paste your link.

You may also use the following HTML in your comment: <a href="" title=""> <abbr title="">
<acronym title=""> <blockquote cite=""> <cite> <em> <strike> <strong>

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.