Контейнери, Блоки та Дії в структурі макета 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.