Layout Overview in Magento 2

Welcome back to Magento 2 Tutorial series. In the previous article, we have discussed the basic Theme Concept in Magento 2. Today’s topic is the Layout overview in Magento.

In Magento, the basic concept of page building is Layout, Container and Block. Before creating a page structure we should know the layout, container and block.

Let’s Continue…

What are layouts?

Layouts are responsible for the structure of any web page using an XML file that identifies all the containers and blocks composing the page.

Let me explain it in another simple way. In the image, there is a page with just some lines which are dividing it into different sections, that section is describing the structure of a web page.

By default, Magento provides 5 page layout for frontend i.e, empty, 1column, 2columns-left, 2columns-right, and 3columns.

And 3 page layout for backend/admin i.e, admin-empty, admin-1column, and admin-2columns-left.

---

What is Container?

The container is basically a wrapper. It contains or group of <block /> and <container />.
Let me explain it, in the above image, there are different sections like header, footer left, and main. Basically, these sections are containers, there can be many items in each section.

For example,

Header(container) can have logo, navigation link, minicart, etc.

Attribute for container :

1. name : This can be used to address the container in layout . The name must be unique per generated page. For example, <container name=“custom.container” />
2. htmlTag : This specify the HTML tag to wrap the output. It can be aside, dd, div, dl, fieldset, main, nav, header, footer, ol, p, section, table, tfoot, ul. For example, <container name=“custom.container” htmlTag=“div” />.
3. htmlClass : This specify the class(es) to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” />
4. htmlId : This specify the id to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” htmlId=“custom-container” />

Sample of container in layout:

<container name="custom.container" htmlTag="div" htmlClass="custom-container" htmlId="custom-container" >
your code goes here...
</container>

---

What is block?

Blocks are a foundational building unit for layout in Magento. Blocks can have children and grandchildren (and so on). Information can be passed from layout XML into the block via the <arguments/>.

In another way, see in the above image there are many blocks under containers that are highlighted with dark color.

For example,

logo, header links, category filter, compare list, etc are block which is wrapped into respective container i.e, header, footer, main, etc .

Attribute for block :

1. name: This can be used to address the block in layout. The name must be unique per generated page. For example, <block name=“custom.block” />
2. class: Name of a class that implements the rendering of a particular block. An object of this class is responsible for the actual rendering of block output. For example, <block class=“Vendor\Module\Block\Class” />
3. template: This specifies the template path for particular block. Notation for specifying path Tutorial_Simple::template.phtml. Here, Tutorial is vendor name, Simple is the module name, and template.phtml is the name of the template file. For example, <block template=“Vendor_Module::tempate.phtml” />
4. cacheable: This specifies the cache property for that particular block. By default it is true, if false the entire page will not be cached with Full Page Cache. For example, <block cacheable=“false” />
5. ifconfig : Makes the block’s visibility dependent on a system configuration field. For example, <block ifconfig=“contact/contact/enabled” />

Sample of block in layout:

<block class=“Vendor\Module\Block\Class” name="custom.block" cacheable=“false” ifconfig=“contact/contact/enabled” template="Vendor_Module::tempate.phtml" />

Common Attribute used in container and block :

1. after/before: This is used to place the block before or after another element, as identified by its name.
2. remove: This is used to remove the element from rendering to frontend. By default, it is false.
3. move: This is used to move elements in the layout.

Sample of layout file :

Let’s create a new layout file with name new_layout_index.xml.

In above file name,

new is front name of a module

layout is name of controller

index is name of controller class.

Actually this is a part of Module development. We will learn about it in detail.

Under new_layout_index.xml lets create a structure of web page:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<container name="new.container" htmlTag="div" htmlClass="new-container" htmlId="custom-container">
<block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::newtemplate.phtml" cacheable="false" /> 
</container>
</body>
</page>

Output of above layout on browser :

<div class="new-container" id="custom-container">
Content of block goes here...
</div>

Additional points which are used in layout :

1. referenceContainer: It is used to reference any existing container throughout the layout file. We can use the existing container in our layout by its name within <referenceContainer />.

For example, if we need to add any content in main section of page

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<container name="new.container" htmlTag="div" htmlClass="new-container" htmlId="custom-container">
<block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::newtemplate.phtml" cacheable="false" /> 
</container>
</referenceContainer>
</body>
</page>

2. referenceBlock: It is used to reference any existing block throughout the layout file. We can use the existing block in our layout by its name within <referenceBlock />.

For example, if we want to remove product sku from product detail page

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.sku" remove="true"/>
</body>
</page>

---

We can see two types of page layouts under the layout file, the first one is default.xml and the other is a specific page layout like cms_index_index.xml.

Let’s understand what is the difference between default.xml and specific page xml file:

What is difference between default.xml and specific page xml file?

To make changes available on every page, modify the default.xml file. For example, if we need to add a custom header and footer so we will modify it in default.xml. Because the header and footer will be on all pages.

Location for default.xml file in theme

app/design/frontend/
├── Vendor/
│   │   ├──Theme/
│   │   │   ├── Magento_Theme
│   │   │   |   ├── layout
|   |   |   |   |   |── default.xml

/app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml

Note: default.xml file can be used in any layout folder either under Theme or Module.

To add layout changes to a specific page, use a layout file that corresponds to the page’s path.

For example, if we want to make any changes only for the homepage so we have to change the cms_index_index.xml file.

Location for cms_index_index.xml file in theme :

app/design/frontend/
├── Vendor/
│   │   ├──Theme/
│   │   │   ├── Magento_Theme
│   │   │   |   ├── layout
|   |   |   |   |   |── cms_index_index.xml

/app/design/frontend/Vendor/Theme/Magento_Theme/layout/cms_index_index.xml.

Note: we can use any layout file in any layout folder either under Theme or Module as per our requirement.

Here are few example for specific page :

Homepage – cms_index_index.xml

Category Page – catalog_category_view.xml

Product Page – catalog_product_view.xml

Shopping Cart Page – checkout_cart_index.xml

Checkout page – checkout_index_index.xml

Login Page – customer_account_login.xml

Sign up Page – customer_account_create.xml

And so on…

---

After every change in layout file do cache flush

$ php bin/magento cache:flush

---

Hope you understand the basic concept of layout, container, and block in Magento. Now I guess you can create a web page structure. If you have any query, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.

If you like this article, you can buy me a cup of coffee Buy me Coffee.

Reference Links :

---

1. https://devdocs.magento.com

---