Magento – Add class to body in CMS page (with layout update xml from admin panel)

cmslayoutmagento-2.1magento2

I'm trying to add a class to body (cms-page-aboutus) via layout XML update inside Magento 2 admin panel.

I know that CMS pages already add a body I could use to target my page, but I need to target multiple CMS pages for several languages at once (cms-about-us, cms-acerca-de, cms-a-propos).

I don't want to duplicate CSS, therefore a common class would be best.

I have tried the following:

<body>
    <attribute name="class" value="body-class" />
</body>

But it fails to save in admin panel:

Please correct the XML data and try again. Element 'body': This element is not expected. Expected is one of ( referenceContainer, container, update, move ). Line: 2

Since it seems that only "update" keyword is allowed, I tried using it to add a new handle:

<update handle="cms_page_aboutus"/>

and then created the file:

app/design/<>/<>/Magento_Cms/layout/cms_page_aboutus.xml

with the body update within, but it does not work.

Any idea?

Best Answer

Add these lines to layout in Design > Layout Update XML of cms page:

<body>
    <attribute name="class" value="body-class-aaa" />
</body>

Related Solutions

Magento – CMS XML Handles for Layout Updates

Why changing the root template doesn't work

Both

Mage_Cms_IndexController::indexAction()

and

Mage_Cms_IndexController::viewAction()

which are responsible for displaying the default homepage and a CMS page respectively call a helper:

Mage::helper('cms/page')->renderPage($this, $pageId)

If you jump into the helper (located at app/code/core/Mage/Cms/Helper/Page.php) and follow renderPage() to the protected method _renderPage() you'll see that Magento is checking two times for a root template (Magento CE 1.7.0.2):

if ($page->getRootTemplate()) {
    $handle = ($page->getCustomRootTemplate()
                && $page->getCustomRootTemplate() != 'empty'
                && $inRange) ? $page->getCustomRootTemplate() : $page->getRootTemplate();
    $action->getLayout()->helper('page/layout')->applyHandle($handle);     
}

and

if ($page->getRootTemplate()) {
    $action->getLayout()->helper('page/layout')
        ->applyTemplate($page->getRootTemplate());
}

Both calls happen after layout handles like "cms_page" and the like are processed, so you are out of luck here.

What you can do to change the root template

There is an event cms_page_render which you can use for adding your own XML layout handle on CMS pages. Create your own extension (I'll spare some details here) and configure the event observer in your config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <Emzee_Cms>
            <version>0.0.1</version>
        </Emzee_Cms>
    </modules>

    <global>
        <events>
            <cms_page_render>
                <observers>
                    <emzee_cms_page_render>
                        <class>emzee_cms/observer</class>
                        <method>cms_page_render</method>
                    </emzee_cms_page_render>
                </observers>
            </cms_page_render>
        </events>
        <models>
            <emzee_cms>
                <class>Emzee_Cms_Model</class>
            </emzee_cms>
        </models>
    </global>
</config>

Add your event observer:

<?php

class Emzee_Cms_Model_Observer
{
    public function cms_page_render(Varien_Event_Observer $observer)
    {
        $action = $observer->getEvent()->getControllerAction();

        $actionName = strtolower($action->getFullActionName());
        $action->getLayout()->getUpdate()
            ->addHandle($actionName . '_after');
        return $this;
    }
}

Finally, add your new layout XML handle (e.g. in your local.xml):

<?xml version="1.0"?>
<layout version="0.1.0">
    <cms_index_index_after>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
    </cms_index_index_after>
</layout>

You can use this method as well to add a cms_page_view_after handle or create page specific handles as cms_page_render passes the $page object to your observer.

Why you can't add a block to the 'reference left'

Are you sure that the template you're using has a left column? This question may sound silly but the default "2 columns with right bar" layout for example only offers a 'content' and a 'right' area. I can add blocks to the right column using cms_page without problems so this could be the problem.

In general, you can only easily add blocks to references and echo them if

the chosen root template uses the block you're referencing (see app/design/frontend/base/default/template/page/*.phtml) and
the block you're referencing either is of type core/text_list, calls $this->getChildhtml() without arguments or does something else to echo all child blocks.

Without further details, I can't tell you why your blocks are not echo'd in the left or right column.

Magento 2 Custom Layout – How to Add Body Class

Page Layout XML

As far as I'm aware this isn't possible out of the box via page layout XML, the existing implementation is done via PHP (checkout the addDefaultBodyClasses() function here);

/**
 * Add default body classes for current page layout
 *
 * @return $this
 */
protected function addDefaultBodyClasses()
{
    $this->pageConfig->addBodyClass($this->request->getFullActionName('-'));
    $pageLayout = $this->getPageLayout();
    if ($pageLayout) {
        $this->pageConfig->addBodyClass('page-layout-' . $pageLayout);
    }
    return $this;
}

Layout XML

Just in case anyone ends up on this question for standard layout XML it can be done this way:

Add the following attribute inside the <body> tags.

<body>
    <attribute name="class" value="your-class"/>
</body>

If this doesn't work you may need to clear your caches?