Опубліковано 09.06.2026

Magento 2 XML Layout шпаргалка: Найкорисніші XML інструкції для фронтенд-розробників

Шпаргалка з найпоширеніших Magento 2 Layout XML інструкцій для фронтенд-розробників. Додавання, видалення та переміщення блоків, підключення CSS, JavaScript і шрифтів, робота з layout handles, arguments та налаштуванням структури сторінки.

Layout XML є одним із найважливіших інструментів у Magento 2 frontend-розробці. Незалежно від того, працюєте ви з Luma, Hyvä Theme чи власною темою, вам постійно доводиться додавати, видаляти та переміщати блоки через XML.

У цій шпаргалці зібрані XML інструкції, які найчастіше використовуються у реальних Magento-проєктах.

Додавання блоку

<referenceContainer name="content">
    <block
        class="Magento\Framework\View\Element\Template"
        name="custom.block"
        template="Vendor_Module::custom.phtml"/>
</referenceContainer>

Використовується для додавання нового блоку всередину контейнера.

Видалення блоку

<referenceBlock name="compare.link" remove="true"/>

Видаляє існуючий блок зі сторінки.

Видалення контейнера

<referenceContainer name="sidebar.main" remove="true"/>

Видаляє контейнер разом з усіма його дочірніми блоками.

Переміщення блоку

<move
    element="logo"
    destination="header-wrapper"
    before="-"/>

Дозволяє перемістити блок в інший контейнер.

Підключення CSS

<head>
    <css src="Vendor_Module::css/custom.css"/>
</head>

Додає CSS-файл до сторінки.

Підключення JavaScript

<head>
    <script src="Vendor_Module::js/custom.js"/>
</head>

Додає JavaScript-файл до сторінки.

Видалення CSS або шрифтів

<remove src="css/style.css"/>

<remove src="fonts/font.css"/>

Корисно під час перевизначення батьківської теми.

Підключення шрифтів

<font src="fonts/opensans/light/opensans-300.woff2"/>

Попереднє завантаження шрифту:

<link
    rel="preload"
    as="font"
    type="font/woff2"
    src="fonts/assistant-v24-hebrew_latin-regular.woff2"/>

Часто використовується в Hyvä Theme для покращення Core Web Vitals.

Зміна layout сторінки

Одна колонка:

<page layout="1column">

Дві колонки з лівим сайдбаром:

<page layout="2columns-left">

Доступні варіанти:

1column
2columns-left
2columns-right
3columns
empty

Підключення іншого layout handle

<update handle="customer_account"/>

Дозволяє повторно використовувати XML-конфігурацію іншого layout handle.

Передача аргументів у блок

<arguments>
    <argument name="css_class" xsi:type="string">
        header links
    </argument>
</arguments>

Передає дані в блок через Layout XML.

Отримання аргументів у PHP

$cssClass = $this->hasCssClass()
    ? ' ' . $this->getCssClass()
    : '';

Magento автоматично створює getter-методи на основі назви аргументу.

Висновок

Більшість frontend-завдань у Magento 2 можна виконати за допомогою кількох базових Layout XML інструкцій. Розуміння роботи блоків, контейнерів, assets та arguments дозволяє швидко адаптувати будь-яку сторінку без внесення змін у ядро системи.