Now you probably are creating a custom theme to a Magento 2 website. In Magento 2 theme, .xml files usually determine the layout of web pages. This article gives you a basic knowledge of .xml files including function, location, and processing.
Table of Contents
Magento 2 theme .xml file function
According to W3School, XML stands for eXtensible Markup Language, designed to store and transport data.
According to W3.org, XML is a simple text-based format for representing structured information: documents, data, configuration, books, transactions, invoices, and much more.
According to Wikipedia, XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.
In Magento 2, the majority of .xml files represent the structure of the pages layout. Because XML does not carry any information about how to be displayed, the same XML data can be used in many different presentation scenarios in a Magento 2 site.
Magento 2 theme .xml file types
In Magento 2, .xml files are divided into 2 types: page layout and page configuration. These 2 file types make up the layout of any particular page of a Magento 2 website.
The Page layout file defines the page wireframe inside the <body> section of the HTML page markup. It divides the page into different blocks of container. Note that, page layout .xml files feature only containers.
On the other hand, page configuration .xml file defines detailed structure (page header, footer, etc.), contents and page meta information, including the page layout used.
Magento 2 theme .xml file location
In Magento 2, theme is one of the modules. However, while the .xml files in theme folder are used globally in all pages, .xml files in module folder are declared only in pages where the module is activated. Basically, .xml files are located in <module_directory>/view/frontend/layout/
Theme layout
The basic view of all Magento storefront pages is defined in two page configuration layout files located in the Magento_Theme module:
- Page layout file: <Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout. For example, vendor/magento/module-theme/view/frontend/layout/default.xml
- Page configuration file: <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ <head> section. For example, vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
In other Magento modules and in Magento themes, these basic page configuration layouts are extended.
Module layout
- Page layout files: <module_dir>/view/frontend/page_layout.
- Page configuration files: <module_dir>/view/frontend/layout. For example, vendor/magento/module-swagger/view/frontend/layout
Magento 2 .xml file processing
The Magento application processes .xml layout files in the following order:
- Collects all layout files from modules, including theme, in the order determined in the module list from app/etc/config.php.
- Identify the sequence of inherited themes [<parent_theme>, …, <parent1_theme>] <current_theme>
- Repeat the sequence of themes from last ancestor to current:
- Adds all extending theme layout files to the list.
- Replaces overridden layout files in the list.
- Merges all layout files from the list.
Magento 2 .xml file: in conclusion,
This article provides very basic information regardings Magento 2 theme .xml file. For more information about Magento 2 Layout, you can check out Magento DevDocs.
So do you have any question regarding .xml file in Magento 2? Let us know in the comment section below!
