Magento 2: Layout File Types & Instructions

By Phuong Pham -
1
4370

As you may know, layout is the face of any page. In this article, we will focus on Layout of Magento 2. In magento 2, layout is defined by two major layout components: page layout file and page configuration file. We also distinguish the third type of layout files, generic layouts with the expectation that you can easily define what type of layout file you are using for your site.

This blog gives you a comprehensive description of each magento 2 layout file type and their instructions.

1.Page layout file

The first magento 2 layout file type is Page layout file.

Definition: A page layout file defines the page wireframe, for example, one-column layout. Technically page layout is an .xml file defining the structure inside the <body> section of the HTML page markup. Page layouts feature only containers. All page layouts used for page rendering should be declared in the page layout declaration file.

Page layout declares the wireframe of a page inside the <body> section, for example one-column layout or two-column layout.

Allowed layout instructions:

Sample page layout:

<Magento_Theme_module_dir>/view/frontend/page_layout/2columns-left.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
    </referenceContainer>
</layout>

a. Page layout files conventional location

Conventionally page layouts must be located as follows:

  • Module page layouts: <module_dir>/view/frontend/page_layout
  • Theme page layouts: <theme_dir>/<Namespace>_<Module>/page_layout

b. Page layouts declaration

To be able to use a layout for actual page rendering, you need to declare it in layouts.xml.

Conventionally layout declaration file can be located in one of the following locations:

  • Module layout declarations: <module_dir>/view/frontend/layouts.xml
  • Theme layout declaration: <theme_dir>/<Namespace>_<Module>/layouts.xml

Declare a layout file using the <layout></layout> instruction, for which specify the following:

  • <layout id="layout_file_name">. For example, the 2columns-left.xml page layout is declared like following: <layout id = "2columns-left"/>
  • <label translate="true|false">{Label_used_in_Admin}</label>

Sample page layout declaration file:

<Magento_Theme_module_dir>/view/frontend/layouts.xml
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="1column">
        <label translate="true">1 column</label>
    </layout>
    <layout id="2columns-left">
        <label translate="true">2 columns with left bar</label>
    </layout>
    <layout id="2columns-right">
        <label translate="true">2 columns with right bar</label>
    </layout>
    <layout id="3columns">
        <label translate="true">3 columns</label>
    </layout>
</page_layouts>

2. Layout page configuration

The second one in the list of magento 2 layout file types is Page configuration.

Definition: Page configuration is also an .xml file. It defines the detailed structure (page header, footer, etc.), contents and page meta information, including the page layout used. Page configuration features both main elements, blocks of particular classes and containers.

The page configuration adds content to the wireframe defined in a page layout file. A page configuration also contains page meta-information, and contents of the <head> section.

a. Page configuration file conventional location

Conventionally page configuration files must be located as follows:

  • Module page configurations: <module_dir>/view/frontend/layout
  • Theme page configurations: <theme_dir>/<Namespace>_<Module>/layout

b. Page configuration structure and allowed layout instructions

The following table describes the instructions specific for page configuration files. For the descriptions of common layout instructions see the Layout instructions article.

ElementAttributesParent ofDescription
<page></page>
  • layout = {layout}
  • xsi:noNamespaceSchemaLocation ="{path_to_schema}"
  • <html>
  • <head>
  • <body>
  • <update>
Mandatory root element.
<html></html>None
  • <attribute>
Mandatory element.
<head></head>None
  • <title>
  • <meta>
  • <link>
  • <css>
  • <script>
<body></body>None
  • <block>
  • <container>
  • <move>
  • <attribute>
  • <referenceBlock>
  • <referenceContainer>
  • <action>
<attribute>
  • name = {arbitrary_name}
  • value = {arbitrary_value}
Specified for <html>, rendered like following:

<html name="value'>

<title>NoneNonePage title
<meta>
  • content
  • charset
  • http-equiv
  • name
  • scheme
None
<link>
  • defer
  • ie_condition
  • charset
  • hreflang
  • media
  • rel
  • rev
  • sizes
  • src
  • src_type
  • target
  • type
none
<css>
  • defer
  • ie_condition
  • charset
  • hreflang
  • media
  • rel
  • rev
  • sizes
  • src
  • src_type
  • target
  • type
None
<script>
  • defer
  • ie_condition
  • async
  • charset
  • src
  • src_type
  • type
None

 

3. Generic Layout

The last type is Generic Layout.

Definition: Generic Layouts are .xml files which define the contents and detailed structure inside the <body> section of the HTML page markup. These files are used for pages returned by AJAX requests, emails, HTML snippets and so on.

a. Generic layout file conventional location

Conventionally generic layout files must be located as follows:

  • Module generic layouts: <module_dir>/view/frontend/layout
  • Theme generic layouts: <theme_dir>/<Namespace>_<Module>/layout

b. Generic layout structure and allowed layout instructions

The following table describes the instructions specific for generic layout files. For the descriptions of common layout instructions see the Layout instructions article.

ElementAttributesParent ofDescription
<layout></layout>
  • xsi:noNamespaceSchemaLocation="{path_to_schema}"
  • <container>
  • <update>
Mandatory root element
<update>
  • handle="{name_of_handle_to_include}"
None
<container>
  • <block>
  • <container>
  • <referenceBlock>
  • <referenceContainer>
 Mandatory element

 

Sample generic layout:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <update handle="formkey"/>
    <update handle="adminhtml_googleshopping_types_block"/>
    <container name="root">
        <block class="Magento\Backend\Block\Widget\Grid\Container" name="googleshopping.types.container" template="Magento_Backend::widget/grid/container/empty.phtml"/>
    </container>
</layout>

Above is some of my sharing about Magento 2 Layout file types. Hopefully, you will get a general understanding about this and can easily define what type of layout file you are using for your online store. If you have any question, please give us your comment.

Related Blogposts You May be Interested In:

Related Extension on LandOfcoder you may be interested in:

RELATED ARTICLESMORE FROM AUTHOR

1 COMMENT

LEAVE A REPLY

CAPTCHA

*