Using Layout and XML Schema in Magento 2

One of the most common tasks during a site development is changing the appearance and the structure of the pages. In Magento 2, layout XML files are used to describe the structure of the pages. Developers most commonly have to solve two basic types of tasks: modification of the existing layout files and the creation of their own. Let’s take a closer look at these types of tasks.

Creating your own layout files

In Magento 2 layouts (1) are used to describe the basic structure of a web page. Containers (2) are used to create a page layout. The contents of a container can be blocks and other containers. Blocks (3) are intended for outputting the html content of a page, which is contained in their template files.

1 – layout; 2 – containers; 3 – blocks

To create your own layout we need to complete the following 2 steps. The first one, is creating a layouts.xml file along the following path: <Your_module>/view/<area>/, with the following content:

The next step is to add a my-layout.xml file along the following way: <Your_module>/view/<area>/page_layout/ and fill it with the necessary content:

After that our new template will be available on the administrative panel and we can use it on our website:

Modification of the existing layout fies

Magento 2 provides a number of instructions that allow you to change the layout file in almost any way. But first you need to learn how to specify layout for a particular page. You can do this in the configuration xml file of the page using the layout attribute of the root node of the page. For example, to change the default layout for the Advanced Search page from 1-column to 2-column with left bar, we need to create a file along the following way:

app/design/frontend/<You_vendor_name>/<You_theme>/Magento_CatalogSearch/layout/catalogsearch_advanced_index.xml.

The file should contain the following:

However, more often we don’t have to completely change the layout of the page, but to add or remove something in the existing one. For these purposes, there is a number of tools in Magento 2 that allow us to:

• add and remove static resources (JavaScript, CSS, fonts) in the head section of the page;
• create and change containers;
• create and change blocks;
• set templates for blocks;
• pass arguments to blocks;
• move items (blocks and containers);
• change the order of the elements (blocks and containers);
• delete elements (blocks and containers).

Let’s take a look at some examples of using these instructions.

Adding and deleting static resources

To add static resources to the page you should create the default_head_blocks.xml file along the following path:

You_theme/Magento_Theme/layout/default_head_blocks.xml.

You can add a css file using the following instruction:

To add a locally hosted JavaScript file, you can use one of the following instructions:

To connect an external resource, you need to add the src_type attribute with the url value. For example:

You can add a font using the link tag with the mandatory addition of the rel=”stylesheet” and type=”text/css”:

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

Talk to Andrey

Adding and changing containers

To add a new container, you can use the following instruction:

Name is the only mandatory attribute.

To change a container, (to add a block, for example) there is a referenceContainer instruction:

Adding and changing blocks. Changing the block template. Changing Block Parameters

The block is created using the block instruction with the required argument name. For example:

You can change the block using the referenceBlock instruction. Let’s take the following block as an example:

To change its argument and add a new one, we need to use the following instruction:

If we need to assign a template to the block, there are 2 methods to do it.

Method 1: using the template attribute:

Method 2: using an argument with the template name:

The new_template.phtml in the demonstrated examples is a path to the template file relative to the template folder (<your_module>/view/<area>/templates or <your_theme>/<Your_Module>/templates).

It should be noted that templates specified in the first way have a higher priority. This means that the value specified in the template attribute will overwrite the one specified with the argument.

BelVG Magento Store

Take your online store to the next level with BelVG extensions

Visit our store

Changing order, moving and deleting blocks and containers

You can change the order of the element within the parent using the before and after attributes. For attribute values, you must specify the name of the element, before or after which we want to place the element we need.

With the help of the move instruction, we can not only change the order of the element, but also change its parent. For example, the following instruction will move the block named product.info.review to a container named product.info.main and place it before the container named product.info.price:

You can delete a block or a container using the remove attribute of the referenceBlock or referenceContainer instructions respectively. For example, you can delete the catalog.compare.sidebar block using the following instruction:

Thank you for reading, hope everything was clear. Please leave your comments and questions in the comment section below and I will get in touch as soon as possible.

Check out BelVG’s quality Magento extensions at our official store.