Magento 2 – Using ifconfig to Conditionally Add CSS Assets

frontendlayoutmagento2static-content

Is there any way to use ifconfig in Magento 2 to conditionally add CSS assets, similar to Magento 1? Here's an example from Magento 1:

<action ifconfig="config_path/group/field" method="addItem">
    <type>skin_css</type><name>css/styles.css</name>
</action>

I tried something like this in Magento 2 but it doesn't work:

<head>
    <css src="css/styles.css"
        ifconfig="config_path/group/field" />
</head>

It just displays the ifconfig attribute on frontend:

<link rel="stylesheet" type="text/css" 
    ifconfig="config_path/group/field" 
    href="http://example.com/pub/static/frontend/Magento/luma/en_US/css/styles.css" />

Is there any equivalent in Magento 2?

Best Answer

It seems like it currently is not possible looking at the head.xsd definition in the develop branch:

https://github.com/magento/magento2/blob/develop/lib/internal/Magento/Framework/View/Layout/etc/head.xsd#L9

you could do something like the Require Js Module: https://github.com/magento/magento2/blob/develop/app/code/Magento/RequireJs/Block/Html/Head/Config.php

Here, the require config and mixins are inserted directly after the require.js file.

You could add your css files like this with a condition.

I also found an Issue here with a similar problem, but it did not get an answer: https://github.com/magento/magento2/issues/2004

Related Solutions

Magento – Conditionally add CSS file in layout XML (local.xml)

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.

Magento – Ifconfig then show block

At the moment your layout XML isn't quite right. You are referencing the header block, and within that adding a block with the <block ... /> tag. After that you are essentially doing the same thing again by calling the setChild() method in the <action ...> tag. However when declaring <block ... /> you define a name, alias and template, but you don't set a block type which is required. Also unless you have reason to, you don't need to define an alias either. So instead do something like:

<block type="yourmodule/your_block" name="untitled.social.footer.links" template="untitled/social/links.phtml"/>

For the <action ...> call check the path for ifconfig, it's unusual to have an underscore in the first section of the path (untitled_social) but it depends on how you have defined the config entry in your system.xml. Bear in mind this should not be namespace_module, it needs to be according to the path you have defined in system.xml for that config value. This path may be the reason why it is not working correctly as if it is wrong it will always return false. Apart from that the <action ...> looks ok.

So if you want the block to show only according to the config value you need to remove the <block .../> declaration, otherwise remove <action ...> to have it always show. In both cases the header is not of block type core/text_list and so child blocks will not automatically render out. This means you need a call to the child block inside the header template to render out your template.

Best Answer

Related Solutions

Magento – Conditionally add CSS file in layout XML (local.xml)

Magento – Ifconfig then show block

Related Topic