1

I'm updating a Magento 1.x extension to Magento 2.x. The extension adds some dynamic css to the head based on configuration values in the backend (for instance colorpickers that save a hex value to be assigned to an element).

The Magento 1.x extension uses a rewrite of html_head to add the following code:

protected function _prepareLayout() {
    parent::_prepareLayout();
    if($head_block = $this->getLayout()->getBlock('head')) {
        $styles_block = $this->getLayout()->createBlock('Mage_Core_Block_Template', 'custom_styles')->setTemplate('module/styles.php');
        $head_block->setChild('custom_styles', $styles_block);
    }
}

And the styles.php looks somehting like this:

<style type="text/css">
<?php 
$model = Mage::getModel('module/model')->getCollection();
foreach ($model as $item) :
?>

.element { background-color: <?php echo $item['bgcolor'] ?>; }

<?php
endforeach;
?>
</style>

This works great in Magento 1.x but I have yet to figure out how to do this for Magento 2.x.

Improve this question

1 Answer 1

Reset to default
5

I am going to assume you know how to get a basic Magento 2 module set up. If this is not the case i suggest you look at the devdocs :)

You can add a block to the head.additional section like so...

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="[Vendor]\[ModuleName]\Block\[BlockName]" name="a.unique.name" template="custom.phtml" />
        </referenceContainer>
    </body>
</page>

The above would reside inside a layout file within app/code/[Vendor]/[ModuleName]/view/frontend/layout/[handle].xml or default.xml if you want to include it on every page.

The template would go in app/code/[Vendor]/[ModuleName]/view/frontend/templates/custom.phtml

An interesting thing i have found is there is a pageConfig (\Magento\Framework\View\Page\Config) var in the parent class which when used within _prepareLayout() enables you to add assets to the head section (even without using a template). Might not work in your case but thought i would mention it :)

Improve this answer
3
  • Thanks, accepted this as the answer. As far as I could tell using pageConfig does not allow you to add CSS but can allow be used to config stuff like title and page meta data. A good read on adding CSS and JS in Magento2 can be found in this article by Magento guru Alan Storm: alanstorm.com/magento_2_javascript_css_layout_woes
    – Solide
    Commented Jan 25, 2016 at 20:21
  • You can add CSS files by calling $this->pageConfig->addPageAsset('path/to/file.css');
    – Smartie
    Commented Jan 25, 2016 at 20:38
  • Right, good to know but as mentioned by you that doesnt fit my current needs though as it probably wont allow dynamic css. I'm gonna go with your other suggestion. Thanx again.
    – Solide
    Commented Jan 25, 2016 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.