Розробка кастомної теми Magento 2
При розробці кастомної теми Magento 2 типова проблема — нерозуміння ланцюжка успадкування та layout XML. Клієнти приносять дизайн-макети в Figma, а ми стикаємося з помилками типу Block not found або неправильним порядком елементів. Одного разу замовник втратив два дні через неправильно вказаний parent theme в theme.xml — довелося переписувати всі перевизначення. Розберемо, як побудувати тему, яка не гальмує і легко підтримується, з акцентом на сучасні підходи на зразок Hyva Themes.
Наші інженери мають 10+ років досвіду з Magento та понад 120 реалізованих проєктів. Працюємо з Luma, Blank та Hyva. Це дає нам можливість обрати оптимальний стек для кожного проєкту, чи то корпоративний портал, чи інтернет-магазин з високим навантаженням. Оцінимо ваш проєкт за 1–2 дні — зв'яжіться з нами.
Організація файлів теми
Кастомна тема не копіює базову повністю. Вона перевизначає лише потрібні файли. Ланцюжок успадкування:
Magento/blank └── Magento/luma └── MyCompany/mytheme При рендері Magento шукає шаблон спочатку в кастомній темі, потім піднімається по ланцюжку. Це дозволяє точково змінювати функціонал без дублювання всього коду.
Приклад мінімальної структури:
app/design/frontend/MyCompany/mytheme/ ├── etc/ │ └── view.xml ├── registration.php ├── theme.xml └── web/ ├── css/ │ └── source/ │ ├── _theme.less │ └── _extend.less └── js/ └── theme.js theme.xml:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>MyCompany Theme</title> <parent>Magento/luma</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme> registration.php:
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/MyCompany/mytheme', __DIR__ ); Як layout XML керує сторінкою?
Layout XML — основа рендерингу. Він визначає, які блоки та контейнери є на сторінці, їх порядок та шаблони. Без цього файлу неможливо змінити розташування елементів. Детальний опис синтаксису — в документації Magento.
Типи layout-файлів:
| Handle | Призначення |
|---|---|
default.xml |
Глобальні зміни |
catalog_product_view.xml |
Сторінка товару |
catalog_category_view.xml |
Сторінка категорії |
checkout_cart_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="product.info.main"> <block class="MyCompany\Catalog\Block\Product\Warranty" name="product.warranty.info" template="MyCompany_Catalog::product/warranty.phtml" after="product.info.price"/> </referenceContainer> </body> </page> Чому Hyva замість Luma?
Hyva Themes — сучасний стек: Tailwind CSS + Alpine.js + серверний рендеринг. Він замінює громіздкий RequireJS, KnockoutJS та Less. Розробка Hyva-теми в 2–3 рази швидша за Luma, а результат — Lighthouse 90+ без додаткових зусиль. Зниження часу завантаження сягає 30%, а середня продуктивність Lighthouse — 95. Hyva використовує комерційну ліцензію (~$999/рік), але це окупається економією бюджету до 40% (≈€2000) та скороченням терміну окупності інвестицій до 6 місяців.
«Перехід на Hyva скоротив час розробки на 50% — ми отримали тему, яка одразу проходить Lighthouse на 95+»
— Віталій К., CTO InterTop
Порівняння Luma та Hyva:
| Параметр | Luma/Blank | Hyva |
|---|---|---|
| Стек | RequireJS, KnockoutJS, Less | Alpine.js, Tailwind CSS |
| Швидкість розробки | 6–8 тижнів для 10–20 сторінок | 3–5 тижнів (у 2 рази швидше) |
| Продуктивність | Вимагає оптимізації (Lighthouse ~50-70) | Lighthouse 90+ з коробки |
| Поріг входу | Високий (layout XML, Knockout) | Низький (HTML+CSS+JS) |
| Вартість ліцензії | Безкоштовно | ~$999/рік |
| Економія бюджету | — | до 40% |
Що входить в роботу
Пропонуємо розробку кастомних тем під ключ. Комплекс робіт включає:
- Структура теми: правильний ланцюжок успадкування, файл registration.php, theme.xml.
- Layout XML: створення та налаштування всіх необхідних layout-файлів під структуру магазину.
- PHTML-шаблони: перевизначення шаблонів модулів (Magento_Catalog, Magento_Checkout та ін.).
- Less/CSS: налаштування стилів через _theme.less та _extend.less, генерація CSS через
grunt. - JavaScript: конфігурація RequireJS (або Alpine.js для Hyva), кастомні JS-компоненти.
- Налаштування зображень: конфігурація view.xml з розмірами та оптимізація кешу.
- Адаптивна верстка: перевірка на мобільних пристроях, планшетах та десктопах.
- Інтеграція сторонніх модулів: підключення OneStepCheckout, Amasty, Mirasvit та інших.
- Оптимізація Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms.
- Документація: опис структури теми, інструкція з розгортання.
- Навчання: сесія для розробників замовника (1–2 години онлайн).
- Підтримка: 2 тижні пост-релізної підтримки з виправлення помилок та дрібних доробок.
Деталі про ліцензію Hyva
Вартість ліцензії Hyva становить ~$999 на рік для одного проєкту. Вона включає оновлення та пріоритетну підтримку. Для великих проєктів діють знижки при покупці пакету ліцензій (наприклад, 10% для 5+ проєктів).Процес роботи над темою
- Аналіз макетів — вивчаємо дизайн-прототипи, виявляємо технічні складнощі. Часто вже на цьому етапі знаходимо невідповідності між макетом та можливостями Magento.
- Проектування структури — визначаємо ланцюжок успадкування, layout-файли та шаблони, які знадобляться.
- Розробка компонентів — створюємо PHTML, Less, JS, конфіги view.xml. Кожен компонент тестується окремо.
- Інтеграція плагінів — підключаємо OneStepCheckout, Amasty, Mirasvit. Перевіряємо сумісність з темою.
- Тестування — перевіряємо на всіх типах сторінок, вимірюємо Core Web Vitals за допомогою Lighthouse та PageSpeed Insights.
- Деплой статики —
bin/magento setup:static-content:deploy. - Реліз та підтримка — передача теми замовнику, документація, навчання.
Терміни та вартість
Терміни розробки: від 3 тижнів (Hyva) до 8 тижнів (Luma). Ціна — від €5000 за базову тему (10–20 сторінок). Економія при використанні Hyva: до 40% бюджету (≈€2000). Вартість уточнюється після аналізу макетів. Оцінка проєкту безкоштовно — пишіть нам, ми підготуємо комерційну пропозицію за 1–2 дні.
Замовте розробку теми під ключ, і ми підберемо оптимальний стек під ваш проєкт.