Magento how can extend layout file

February 8, 2023April 24, 2023 Hilary howard

Instead of copying the entire layout of a page and then modifying what you want to change, we call the overriding layout. with Magento 2 you just need to create an extension layout containing the changes you want which, we call the extend layout.

1. How to Extend a layout

Add an extending page configuration

if you want to extend following layouts:

<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml

Create the layout file structure like below:

<your_theme_dir>/
├── <Namespace>_<Module>/
│   ├── layout/
│   │   ├── <layout1>.xml
│   │   ├── <layout1>.xml

For example: in the shop by brand module, you want to add the brand name to the product page below the “product.info.sku” block. This means you need to extend the file layout <Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml, you need to crate a layout file with the same name in your custom theme , such as: <your_theme_dir>/Magerubik_Shopbybrand/layout/catalog_product_view.xml then add below content to this file.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<body>
        <referenceContainer name="product.info.stock.sku">
			<block ifconfig="magerubik_shopbybrand/product_view_page/display_brand_name" class="Magerubik\Shopbybrand\Block\Brand\BrandInformation" name="brand.information.name" template="Magerubik_Shopbybrand::brand/product_view_brand_name.phtml" after="product.info.sku" />
        </referenceContainer>
	</body>
</page>

add an extending page layout file

if you want to extend the following page layout:

<module_dir>/view/frontend/page_layout/<page_layout1>.xml
<module_dir>/view/frontend/page_layout/<page_layout2>.xml

Create the layout file structure like below:

<your_theme_dir>/
├── <Namespace>_<Module>/
│   ├── page_layout/
│   │   ├── <page_layout1>.xml
│   │   ├── <page_layout2>.xml

For example: in the shop by brand module, you want to add the brand slider to all page 1 column in “page.bottom.container” container. This means you need to extend the file layout <Magento_Theme_module_dir>/view/frontend/page_layout/1column.xml, you need to crate a layout file with the same name in your custom theme , such as: <your_theme_dir>/Magerubik_Shopbybrand/page_layout/1column.xml then add below content to this file.

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <referenceContainer name="page.bottom.container">
        <block class="Magerubik\Shopbybrand\Block\Widget\BrandSlider" name="featured_brands" template="Magerubik_Shopbybrand::brand/featured_brands.phtml" />
    </referenceContainer>
</layout>

Now, you have an answer to the question Magento how can extend layout file for you. Practice it always good luck and see you in the next posts. Contact us if you face any problems during the installation process.

You can download the demo code for this entire series from GitHub