Контейнеры, Блоки и Действия в структуре макета Magento 2

В этой статье мы рассмотрим построение макета Magento 2, а также его компоненты, такие как Контейнеры (container), Блоки (block) и Действия (action). Эта информация очень важна, поскольку структура всех страниц сайта на Magento 2 определяется в файлах макета инструкциями и объявлениями этих основных элементов страницы.

Одним из самых больших изменений в способе манипулирования шаблонами и макетами в Magento 2 (по сравнению с Magento 1.x) является введение Контейнеров. В Magento 1.x шаблоны для каждого макета определялись в соответствующих .phtml файлах. Эти файлы содержали «базу» для всей страницы, включая теги doctype, head, body и все вызовы childHtml() для загрузки других различных блоков, таких как header, footer и т.д.

В Magento 2 это работает совсем по-другому, поскольку «структура» самого сайта построена с использованием Контейнеров, которые определяются вместо .phtml файлов в XML-файлах макета. Данное изменение многими воспринимается неоднозначно, но целью разработчиков было облегчить расширяемость и изменяемость элементов на странице.

Основными компонентами структуры страницы Magento 2 являются Блоки и Контейнеры. Структура страницы построена на Контейнерах, которые содержат Блоки. Если, для примера, представить себе, что страница – это квартира, тогда Контейнеры – это комнаты, а Блоки – это мебель. Примером Контейнеров в структуре страницы может быть header, footer, левая боковая панель (сайдбар) и другие элементы.

Содержимое добавляется в Контейнеры с помощью Блоков. Блоки – это определенные файлы шаблонов, в которых генерируется html-код. Главное меню сайта, список товаров, список категорий и другие элементы: это различные примеры Блоков.

Контейнеры (container)

Давайте сначала более подробно рассмотрим Контейнеры, которые составляют основу страницы. Контейнеры могут содержать дочерние элементы, такие как Блоки и другие Контейнеры, но также могут быть и пустыми. Возьмем яркий пример применения Контейнеров и Блоков в макете (файл catalog_category_view.xml в модуле Magento_Catalog):

<container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
  <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
  <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
  <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
</container>

Каждый Контейнер имеет свои атрибуты, которые позволяют манипулировать им. Давайте кратко рассмотрим каждый атрибут отдельно:

• name – Этот атрибут является обязательным. Это идентификатор, который можно использовать при обращении к определенному Контейнеру. Атрибут name должен быть уникальным на странице. Этот атрибут можно сравнить с id для html тегов.
• label – Это подпись, которая будет отображаться в браузере.
• after/before – Эти атрибуты позволяют разместить текущий Контейнер до или после элемента, атрибут name которого указан в этих атрибутах. Если в атрибуте используется значение «-», тогда Контейнер помещается соответственно после всех или перед всеми на своем уровне вложенности.
• as – Назначает псевдоним, по которому текущий Контейнер идентифицируется в рамках своего родителя.
• output – Определяет, следует ли выводить корневой элемент (root).
• htmlTag – Указывает, какой HTML тег использовать для обертки Контейнера.
• htmlId – Задает значение атрибута id для тега, который обертывает Контейнер.
• htmlClass – Задает значение атрибута class для тега, который обертывает Контейнер.

Более детальная информация об этих атрибутах содержится на DevDocs Magento 2.

Чтобы лучше понять, как работает Контейнер и его атрибуты, давайте еще раз взглянем на вышеуказанный код. Контейнер с name (именем) category.view.container выводит тег div с классом category-view после всех элементов в своем уровне вложенности (т.е., последним в рамках своего родителя). Этот Контейнер содержит 3 Блока с названиями (name): category.image, category.description и category.cms. Для чего служат эти Блоки, мы узнаем ниже.

Блоки (block)

Теперь пришло время рассмотреть другие основные элементы макетов – Блоки. Этот элемент создается для вывода содержимого, которое определяется в шаблоне. Как и Контейнер, каждый Блок имеет свои собственные атрибуты, которые позволяют манипулировать ими. Давайте кратко рассмотрим каждый атрибут отдельно:

• class – Указывает класс (PHP-класс), в котором выполняется рендеринг этого Блока.
• name – Этот атрибут является обязательным. Это идентификатор, который может использоваться при обращении к определенному Блоку. Атрибут name должен быть уникальным на странице. Этот атрибут можно сравнить с id в html тегах.
• after/before – Эти атрибуты позволяют разместить текущий Блок до или после элемента, атрибут name которого указан в этих атрибутах. Если в атрибуте используется значение «-», тогда Контейнер помещается соответственно после всех или перед всеми на своем уровне вложенности.
• template – Указывает путь к шаблону текущего Блока.
• as – Назначает псевдоним, по которому текущий Блок идентифицируется в рамках своего родителя.
• cacheable – Определяет, следует ли кэшировать текущий Блок или нет.

Если взять код, приведенный выше, тогда первый Блок с именем (атрибутом name) category.image выводит содержимое шаблона Magento_Catalog::category/image.phtml, а рендеринг этого шаблона реализован в классе Magento\Catalog\Block\Category\View.

Действия (action)

Действия используются для вызова определенного метода во время процесса генерации Блоков. Этот элемент должен быть помещен в элемент Блока, для которого выполняется вызов метода.

Ниже представлен пример использования Действия в том же макете Magento 2 (catalog_category_view.xml):

<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
  <action method="setToolbarBlockName">
    <argument name="name" xsi:type="string">product_list_toolbar</argument>
  </action>
</block>

Действие имеет единственный и обязательный атрибут метода method. Этот атрибут определяет имя метода, который вызывается во время процесса генерации Блока. Для передачи параметров в метод используется конструкция <argument></argument>.

Чтобы лучше понять Действие, давайте рассмотрим приведенный выше код. Действие вызывает метод setToolbarBlockName и передает параметр name со значением product_list_toolbar.

В сегодняшней статье мы познакомились с основными элементами XML-файлов макета: Контейнерами, Блоками, Действиями. Надеемся, что после прочтения статьи вы получите лучшее представление о том, как работают файлы макета в Magento 2.