How to Use Templates & Layouts in Magento 2

In this article, I will walk you through an important aspect of Magento 2 Solution Specialist Certification – Templates and layouts in Magento 2: Basic responsibilities and roles when executing Magento code.

Table of Contents:

What are layouts in Magento 2?
What are the basic types of layouts in Magento 2?
What are templates in Magento 2?
How to perform the assembly and rendering of the layouts?

What are layouts in Magento 2?

Let’s begin with the layout, since it is the basic element for building pages in Magento 2. Moreover, it defines the page structure. In general, there are two types of layouts:

• that determine the structure of the page,
• that determine the config or more specific settings of this structure.

The page structure technically looks like an XML file that defines the HTML structure inside the body tag, for example, whether this structure will be in the form of one or several columns. The main construction elements in this type of layouts are containers. In addition to the <container> instructions, the following instructions are also used:

<referenceContainer>
<move>
<update>

Let’s take a look at the following case:

In this case, we create a single-column layout, more precisely, we use the already existing Magento 2 layout as a basis for the new one. Then, we turn to the container page.wrapper and create three new containers in it – header. container, page.top and footer-container. We define their location using the attributes after or before and also specify corresponding HTML CSS tags for them.

As a rule, page layouts are stored either in the module or in the theme folder itself in the following directories:

<module_dir>/view/frontend/page_layout
<theme_dir>/<Namespace>_<Module>/page_layout

you need to declare the created layout in the layouts.xml file in order to apply it to other pages. This file, depending on whether you are creating a layout for a theme or for a module, can be located in the following directories:

<module_dir>/view/frontend/layouts.xml
<theme_dir>/<Namespace>_<Module>/layouts.xml

The declaration of the layout:

After that, you can connect a new layout with the name new layout name in the Magento administration panel.

What are the basic types of layouts in Magento 2?

Now let’s examine the second basic type of layouts, which defines a more detailed structure of the page content. In fact, it is also an XML file that defines the structures of such blocks as the header, head, footer, etc., and also defines the page meta information. By common convention, these files are located in the following directories:

<module_dir>/view/frontend/layout
<theme_dir>/<Namespace>_<Module>/layout

In addition to the instructions for layouts described above you can also apply the following ones:

<block>
<referenceBlock>

Here’s an example:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Igor

In essence, in this type of layout we simply describe the structure of the page in more detail, defining the markup of the main constituent blocks and their behavior, passing certain arguments to the blocks. Here we will proceed to the discussion of templates, the element that defines the presentation of certain blocks that are declared in the layout. Finally, it’s worth mentioning that apart from the two main types of layouts described above, there is also a general type (according to the general documentation Magento 2). This one is used to define the content structure of blocks inside the body tag; usually, it is applied for pages that the user receives with ajax requests. Can also be used for letters or HTML snippets.

What are templates in Magento 2?

Templates directly define the outer look, and as a rule, they are files with the phtml extension, containing html markup. As a rule, templates do not have a logical part responsible for rendering – instead, this is determined by the layout. As a rule, a specific template is assigned to a specific block using the template attribute. Here’s an example:

In this case, we create a block, assign it a specific template, the path to which is indicated in the template attribute. We also give the block a specific name in the name attribute, a location in the after attribute, and a specific class whose methods we can use directly inside the block itself. You can also transfer any arguments from the layout to the block, and therefore to the template, using the <arguments> statement. Arguments can be passed both when a block is created and into the existing block. For example, you can refer to the block from the previous example the following way:

Templates can be stored in the following directories:

<module_dir>/view/frontend/templates/<path_to_templates>
<theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>

How to perform the assembly and rendering of the layouts?

The first step is to build all the XML files and build the XML tree. For this, the built-in _loadFileLayoutUpdatesXml () method is used. Next, the _fetchPackageLayoutUpdates () method is used to search for instructions and their handlers. Then Magento goes over the final XML tree and creates classes for each specific block. Only after that it will all be rendered into the final HTML tree with all the accompanying CSS styles and js scripts.

It should be noted here that the sequence of loading the layouts is determined by the sequence of modules loading. You can view the current order in the file app / etc / config.php. If there are two conflicting instructions in this file, the second one is executed. Also, if any instruction in the layouts has been redefined, they will be primarily executed, and not ones described in the original layouts. In order to visualize more clearly the final result of merging XML layouts in the render () method in the magento \ framework \ View \ Result \ Page.php file you can type $ output. = $ this-> getLayout () -> getXmlString (). The result of the execution will be seen in the browser if you open the developer tools, and XML tree will be displayed immediately after closing the HTML tag.

Summary

In this article we have considered in great detail the templates and layouts in Magento 2, their roles, purposes and responsibilities. If you have any questions and comments, feel free to leave them down below.