Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 24.01.2023)
122170
солдат
289
самолетов
281
вертолетов
3152
танков
6284
ББМ
2148
артиллерия
220
ПВО
448
РСЗО
4944
машин
18
корабли и катера
Контейнеры, Блоки и Действия в структуре макета Magento 2

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *