Table of content
Home > Tutorial > Magento 2 Certified Professional Front End Developer Guide > Magento 2 Certified Professional Front End Developer Guide. Section 3

Magento 2 Certified Professional Front End Developer Guide


Section 3: Layout XML in Themes

3.1. Demonstrate knowledge of all layout XML directives and their arguments

What layout XML elements exist and what is their purpose?

To connect different components and manage their interactions, Magento 2 uses XML templates and XML configurations for the page.XML template serves to position the containers on the page, as well as set the view and structure options.XML configuration distributes each block separately among the containers and assigns its configurations to each.Below is the example of XML file:These files have the .xml extension and are located at the layout folder of the module (module_name/view/frontend/layout).The main layout elements are blocks and containers.Template containers can contain blocks, and their aim is to effectively position them inside the page. The following DOM elements are the most common containers:
  • head;
  • header;
  • main;
  • aside (left or right).
These elements divide the page template into the containers, in which we will place our blocks. By default, Magento 2 has five page template types:
  • empty (page without containers);
  • 1 column (one container for content);
  • 2 column with left bar (container for content and a left sidebar);
  • 2 column with right bar (container for content and a right sidebar);
  • 3 column (3 containers optionally).
Magento 2 Certified Professional Front End Developer Guide Screenshot 16The highlighted elements at the picture above are the containers in which we can insert any blocks we wish. The placement of blocks within itself is the main distinguishing feature of the element, however, it is worth noting that, if necessary, the element can also contain other elements and even containers, and thereby it automatically becomes a container for its child element.Based on everything said above, one can get an impression that and elements are identical to each other. However, there is sufficient difference between them in realization and operating methods (this will be explained further in the text).In the piece of code above we used xml tags and to configure containers for our page, and their syntax is very similar to syntax. The same as in HTML markup, all tags must be closed (in the example above, we used and closing tags) or they can be self-closing, like tag.All elements can have special attributes for their parameters management. For blocks and containers, the list of attributes and their purpose is similar:Block and container common attributes
AttributeValueDescription
name0-9, A-Z, a-z и (-)(_)(.)*Should begin with a lettername=”current_name”A unique name for addressing is recorded.
before(-) displays the element before all in the current block or container(element name) element display before the element with the specified name() when the parameter is absent, the element is considered not positioned and is displayed in the order set by the current templatebefore=”-”Applied to position elements inside the page template or inside the container itself.
after(-) element display after all in the current block or container(element name) element display after the element with the specified name() when the parameter is absent, the element is considered not positioned and is displayed in the order set by the current templateafter=”target_elemement”Applied to position elements inside the page template or inside the container itself.Has priority over before.
as0-9, A-Z, a-z и (-)(_)(.)*Should begin with a letter\name=”current_allias”The set name serves to identify the current element in the parent.
cacheabletrue, falsecacheable=”false”Enables and disables the caching of the pages which contain elements with the current attribute; the attribute is necessary for creation of the dynamic elements, widgets and pages.
Attribute values and their functional load is identical for blocks and containers as well.However, containers have the methods that are inherent for them solely. Below is the table of the main attributes together with their unique values:Container attributes
AttributeValueDescription
output0 / 1 or true / falseoutput=”1”Is set to determine whether it is necessary to render the parent container, which contains a false element by default.
HtmlTagHtml 5 tags (aside, main, div …)HtmlTag=”div”Everything that is inside the container will be displayed to the user inside the specified tag.
htmlId0-9, A-Z, a-z и (-)(_)(.)*Functions only when the HtmlTag value is sethtmlId=”current_id_name”html Id selector is set for the specified wrap.
htmlClass0-9, A-Z, a-z и (-)(_)(.)*Functions only when the HtmlTag value is sethtmlClass=”current_class_name”html class selector is  set for the specified wrap.
labelAny valueA voluntary container name is set for display in the browser.
layoutThe name value of the page layout templatelayout=”grid_name”It is written to indicate an explicit indication of the applicable template grid for the current layout.
*the values are not requiredLet us also consider the parameters for specifying in the attributes, inherent to blocks only:Block attributes
AttributeValueDescription
classThe path to the class and the class name:class=”Vendor\Folder_Name\Block\Class_Folder\Class_Name”The path to the class that is responsible for processing information for the current block of the template is indicated. It is applied to indicate its handler for a new element or to overwrite the current handler for a program block with a user one.
templateThe path to the template and the template name:template=”Vendor_Name::folder_template/name_template.phtml”Specified the path to the template, which is responsible for rendering the information for the current layout block. It is applied to specify a template for the new element or override the default template for the user one.
For blocks, the “class” attribute is required for Magento 2.1 version and earlier.For containers, the “name” attribute is required for Magento 2.1 version and earlier.

What is the purpose of the attributes that are available on blocks and other elements?

An additional tool for working with layout XML files and page configurations in Magento 2 are the so-called instructions, which can be attributes of elements or new elements. These include the and tags, as well as a number of additional tags. Below is a list of the main ones.ReferenceBlock and referenceContainerThe instruction that applies to a block or container correspondingly in order to pass the necessary parameters using the following attributes:
AttributeValueDescription
nameThe name of the destination block or containerSpecified the name of the block or container to which the instructions will be passed.
removetrue/falseRemoves or cancels removal of the current block or container. When a container is removed, all child elements are deleted as well.
displaytrue/falseTurns on or off the rendering off on the page of the current container or block. When an element is disabled, the further possibility of configuring it and its child elements remains.
Nested attributesMagento 2 has several attributes that can be nested; their syntax is similar to the containers and blocks declaration and looks the following way:Example of move instructions to override the position of the ‘category.view.container’ containerMoveMove is a perfect assistant for positioning elements at the page and migrating it from a container to a container.Let us consider the example of title block migration that displays the current tab in the user account above the main container:Migration of title block from account-nav into main container
Magento 2 Certified Professional Front End Developer Guide Screenshot 17
Before
Magento 2 Certified Professional Front End Developer Guide Screenshot 18
After
Using a single command in the layout, we can easily modify the whole pages structure without using styles and templates. The instruction includes the following attributes:
  • element – the name of the target element for passing the instruction;
  • destination – the name of the parent element that will perform the moving;
  • as – an alias name for the element; set after the element is moved;
  • after/before – used for positioning inside the target parent element.
RemoveIt allows to remove static resource elements, like blocks with script files connection and styles in container.Below is the example of such modification:Removal of the previously connected mapping CSS fileUpdateThe attribute is recommended to apply in cases when you need to duplicate one or several containers and blocks from the parent page template.The instruction is specified in the beginning of XML template and applied with handle attribute, in which the path and parent template filename is set. This method has similar functionality to the super() method in the prototype-oriented programming and performs the same functions. The target template file will be updated recursively, or in a sequential order.For example, you need to connect a slider with certain information to a number of pages in your project. In this case, we need to create a template file with XML markup, which is necessary for connecting a slier. It may look the following way:Example of page template with slider connectionFurther, we can apply this template as a prototype for the child files. To do this, set the path to the parent template file in the update directive of each target document.Recursive template updateThis way, our slider will display at each page where the update directive with slider connection file as a prototype is specified.ArgumentThis tag is used to pass arguments to a block or container. It contains a required name and type tags. Type contains the passed element’s type:
  • string;
  • boolean;
  • object;
  • number;
  • null;
  • array.
For example, earlier we moved the title from the header container into main in the user account, and now we need to set a custom string for the main tab myDashboard. For this, we open the template, responsible for myDashboard page and using action directive and setPageTitle method, we pass as an argument the string with the title we want our page to have:Passing the parameter as a string for page-titleWe set string for the type and the necessary text we passed as a string. Due to all this, we got the desired result. Magento 2 Certified Professional Front End Developer Guide Screenshot 19Also, the passed values can be obtained from the current template file using get() method. This functionality perfectly corresponds to the modularity principle in Magento. Using it, you can create a universal but dynamic template and use it in several places in our store, just like with the example of a universal layout with connecting a slider on pages, using the update method inheritance.As an example, consider the creation of a template with a button rendering and any functionality on the client. The dynamism will lie in the fact that on different pages we will use the same template, but depending on the requirements, in the page template file, we can pass a css class to it, to which some style from the stylesheet can be attached or even a functional load implemented on js. In the markup, it will look the following way:Passing of a custom argument into the templateTo pass the class, we declare our block and set our template in the template attribute. Then we simply pass any parameters to our template as arguments, and container and blocks enclosed in it are used to pass several parameters . We passed our class with an argument and the name css_class, in order to get it in the template file, we need to resort to php knowledge and write the following construction:

Example of the method for getting the argument, passed from the template

Then, depending on the logic we set, the button can take different modifications from page to page; in this example, it is white. Magento 2 Certified Professional Front End Developer Guide Screenshot 44In fact, this is the simplest example of using this functionality, which is necessary to familiarize yourself with the principle of its operation. If we limit ourselves only to our imagination, then applying the method of passing arguments, you can do many things, up to passing an argument that will determine the controller for processing our template.Arguments can be different and have different names, and you can pass not only a string, but, as previously stated, 6 basic data types. In order to get the attributes in the template, the function takes the following form:getCssClass();The name parameter passed in xml in the form of “css_class” takes the form of CamelCase and looks like “СssClass”. This method is similar to the method of passing arguments  using data attributes, applied in JavaScript.

3.2. Describe page layouts and their inheritance

How can the page layout be specified?

To select a page layout for a certain page, log in to the admin panel and navigate at the following path for the settings:Content ⇒  Pages ⇒ Target_Page_Edit ⇒ Design ⇒ Layout Magento 2 Certified Professional Front End Developer Guide Screenshot 22Another way to change the page layout is by applying an XML layout of the target page. For this, we can use a special layout attribute for container, in which we will specify the layout we want to apply to the page:Specify the page layout from which you inherit in  tag of the layout attribute. As a result, the module page with this layout file will have a one column grid; the same as the default Magento 2 theme Luma uses for the main page, but with custom additions and modifications inside the tag.

What is the purpose of page layouts?

The main purpose of page layouts is to create a structured and united set of template layouts for the page display.If we apply any of the standard layouts to the main page of the default Luma theme, we get the following results:
Magento 2 Certified Professional Front End Developer Guide Screenshot 49
1 column
Magento 2 Certified Professional Front End Developer Guide Screenshot 46
2 columns with left sidebar
Magento 2 Certified Professional Front End Developer Guide Screenshot 47
2 columns with right sidebar
Magento 2 Certified Professional Front End Developer Guide Screenshot 48
3 columns
It is worth mentioning that module-checkout uses a default empty template in the structure of the pages, but modified, and its markup will look the following way:

How can a custom page layout be created?

By default, the standard layout files are located at the following path:vendor ⇒ magento ⇒ module-theme ⇒ view ⇒ frontend ⇒ page_layoutHere stored the layout files that we examined above:
Magento 2 Certified Professional Front End Developer Guide Screenshot 31
Default files in the file system
This is how they look in the admin panel:
Magento 2 Certified Professional Front End Developer Guide Screenshot 32
Default grid alternatives in the admin panel
In order to apply the custom template file to the custom theme, apply template files at the following address:app ⇒ design ⇒ [vendor_name] ⇒ [module_theme] ⇒ Magento_Theme ⇒ page_layoutFor example, many store pages will have two-column structure, without a side menu and breadcrumbs. Therefore, it would be reasonable to create a custom template (let’s call it 2columns-not-breadcrumbs.xml and place it at the path we specified above) with the following markup in it:Example of the page with inheritance template markupThen, all we need is to apply it to all the pages we need.In the markup we described above, we applied the method of inheritance from the parent layout. The update directive passes the handle attribute with the layout template name value, which is the same as in the vendor folder of the standard theme, but without “.xml” extension:
Magento 2 Certified Professional Front End Developer Guide Screenshot 33
How the pages layouts are displayed in the vendor folder
The newly created layout file will recursively adapt the parent markup during the inheritance process, yet it will change all the overridden blocks for the ones set in the child file.To complete the creation of the custom page layout, declare it in the layout configuration file. In the standard Magento module, it is located at the following path:vendor ⇒ magento ⇒ module-theme ⇒ view ⇒ frontend ⇒ layouts.xmlTo save it for further work with the composer, place it in the theme file:app ⇒ design ⇒ [vendor_name] ⇒ [module_theme] ⇒ Magento_Theme ⇒  layouts.xmlThen, in layouts.xml file template, using the tag, pass the displayed template name by wrapping it in the