Conditionally add CSS file in layout XML (local.xml)
-
16-10-2019 - |
Question
I need to add a CSS file in local.xml based on some custom variables. I have 5 CSS files but each time only one needs to be loaded.
I only know how to check if a single variable is set in the config. If config returns TRUE, the CSS file will be loaded in the frontend:
<action method="addItem" ifconfig="my_module/settings/variable"><type>skin_css</type><name>css/a.css</name><params/></action>
So for now I must put my code in head.phtml in app\design\frontend\my_theme\default\template\page\html\ to load CSS files like this:
<?php
$my_var = Mage::helper('my_module/my_helper')->getFileName();
?>
<link href="<?php echo $my_var; ?>.css" rel="stylesheet" type="text/css" media="all" />
But it has a drawback: my CSS files will not be merged by Magento's CSS/JS merge function.
So, is there any way to do the same but inside local.xml? Is there any way to call a method from the helper which would return the name of the CSS file which should be loaded (based on some calculations inside that helper)?
SOLUTION CANDIDATE :)
I tried something similar to what Alan Storm described in this thread: https://stackoverflow.com/a/5601579/1647291
I tried this in my local.xml file:
<action method="addItem">
<type>skin_css</type>
<name helper="my_module/my_helper/getFileName" />
<params/>
</action>
Helper method getFileName() returns file name a.css
. But Magento searches for that CSS file inside "base" theme, not in the current theme. Magento loads CSS file with this path:
So my file name is prefixed with example.com/skin/frontend/base/default/. But the correct path should be:
Does anyone know how to achieve this?
Solution
Bottom line: you need to have a value calculated by PHP, therefore the approach of using a helper is appropriate. I think it makes sense to use the addCss
convenience method rather than addItem
a it's a little cleaner and should work fine for your needs:
<{handle}>
<action block="head" method="addCss">
<stylesheet helper="my_module/my_helper/getFileName" />
</action>
</{handle}>
Your helper seems to be calculating the path to the CSS files using the design model, but this will be done again by the page/html_head
block. Change your helper to simply return the file paths relative to the theme (i.e. not using the design model) and your problem is solved.
OTHER TIPS
I just wanted to let you know that the solution described in my question actually works. I just did a stupid mistake. This code was added to local.xml in my theme:
<action method="addItem">
<type>skin_css</type>
<name helper="my_module/my_helper/getFileName" />
<params/>
</action>
Helper method getFileName() returns file name a.css
. But my CSS file wasn't in the correct directory:
so Magento tried to find that file inside "base" theme, not in the current theme:
So if file is in the correct directory, all will work as expected. The code posted by @benmarks will also work:
<action method="addCss">
<stylesheet helper="my_module/my_helper/getFileName" />
</action>