Magento 2: Targeting a Specific CMS Page using Layout.XML

Published by John on September 1, 2019 Under Magento

Hands down, I think Magento 2 handles layout updates better and in a more logical manner than Magento 1, in addition to CSS, JS mods and over-riding existing templates being much less painless.

For the most part, when you want to do a layout update, like removing something or adding something to the footer of a page, you create an XML file using the name of the layout handle you are targeting. So, for example, if you were targeting category pages, your XML file would be: catalog_category_view.xml

If you want to target a specific CMS page using a layout.xml file, rather than doing it via the ‘Design’ tab when editing the CMS Page, you can do it by adding an XML file to the ‘layout’ file that is in your plugins view/frontend/layout folder or the layout folder in your template.

Using a Layout Handle to Override Styles for a specific CMS Page

For a plugin, the format for this file should be:

view/frontend/layout/cms_page_view_id_{IDENTIFIER}.xml

For a theme update, you can do it like this:

/app/design/frontend/{COMPANY}/{THEME}/Magento_Cms/layout/cms_page_view_id_{IDENTIFIER}.xml

Make sure to replace {IDENTIFIER} in the above, with the URL Key(Slug) found in the Search Engine Optimization tab.

So, if the url is: mywebsite.com/my-page

Your XML File name would be: cms_page_view_id_my-page.xml

For general updates that will apply to ALL CMS pages, you would remove the id and identifier, like this:

view/frontend/layout/cms_page_view.xml

Layout Updates for Pages with a Slash in the URL

If you have a forward slash in your URL Key, replace it with an underscore: _

So, for example for this page: mywebsite.com/about/my-page

Your XML File name would be: cms_page_view_id_about_my-page.xml

How the Layout Handle is Created

The layout handle, which is what magento uses to check for layout files, is added in the module: vendor/magento/module-cms/Helper/Page.php

$resultPage->addPageLayoutHandles(['id' => str_replace('/', '_', $this->_page->getIdentifier())]);

As you can see above, they do a simple str_replace on the page Identifier, to replace the forward slash with an underscore.

No Comments |