Макеты

Макет — файл XML, который описывает, из каких частей состоит страница и где они стоят. Сама разметка HTML в макете не пишется: он только расставляет блоки. Благодаря этому любой модуль может добавить блок на чужую страницу или убрать лишний.

Контейнеры и блоки

Основная область страницы — контейнер content. Именно в него обычно добавляют свои блоки.

Где лежит макет

Макеты витрины лежат в папке view/frontend/layout модуля. Имя файла складывается из трёх частей адреса через подчёркивание: для страницы /hello/index/index это hello_index_index.xml. Такое имя называют хендлом (handle) макета.

app/code/Acme/Hello/
├── Controller/Index/Index.php
├── etc/
└── view/
    └── frontend/
        ├── layout/
        │   └── hello_index_index.xml     новый файл
        └── templates/
            └── greeting.phtml            новый файл

Макет своей страницы

<?xml version="1.0"?>
<!-- app/code/Acme/Hello/view/frontend/layout/hello_index_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="hello.greeting" template="Acme_Hello::greeting.phtml"/>
        </referenceContainer>
    </body>
</page>

Макет добавляет в контейнер content блок с именем hello.greeting. Шаблон указан в виде Модуль::файл — путь отсчитывается от папки view/frontend/templates модуля.

Создайте шаблон view/frontend/templates/greeting.phtml с одной строкой:

<p>Привет из шаблона!</p>

Выполните bin/magento cache:clean и откройте /hello: в середине страницы магазина появится текст «Привет из шаблона!». Действие из прошлого урока должно возвращать результат вида TYPE_PAGE.

Вид страницы

Атрибут layout у тега page выбирает число колонок:

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

Доступны 1column, 2columns-left, 2columns-right, 3columns.

Изменение чужой страницы

Чтобы изменить страницу товара, в своём модуле создают макет с тем же именем — catalog_product_view.xml. Magento сложит все одноимённые файлы вместе:

<?xml version="1.0"?>
<!-- app/code/Acme/Hello/view/frontend/layout/catalog_product_view.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.sku" remove="true"/>
 
        <referenceContainer name="product.info.main">
            <block name="hello.delivery" template="Acme_Hello::greeting.phtml" after="product.info.price"/>
        </referenceContainer>
    </body>
</page>

После bin/magento cache:clean со страницы любого товара исчезнет артикул, а под ценой появится блок с вашим шаблоном. Чтобы макет модуля применялся после макета каталога, в module.xml должен быть указан Magento_Catalog в разделе sequence.

Инструкции макета

Файл с именем default.xml действует на все страницы витрины — через него меняют шапку и подвал.

Частая ошибка

Имя макета не совпало с адресом: файл назван hello_index.xml или в нём использован frontName вместо id маршрута. Magento не сообщит об ошибке — страница просто останется пустой. Имя всегда состоит из трёх частей: id маршрута_контроллер_действие, строчными буквами.