Разработка кастомной темы 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 использует коммерческую лицензию, но это окупается экономией бюджета до 40% и сокращением срока окупаемости инвестиций до 6 месяцев.
Сравнение Luma и Hyva:
| Параметр | Luma/Blank | Hyva |
|---|---|---|
| Стек | RequireJS, KnockoutJS, Less | Alpine.js, Tailwind CSS |
| Скорость разработки | 6–8 недель для 10–20 страниц | 3–5 недель для той же сложности |
| Производительность | Требует оптимизации | Lighthouse 90+ из коробки |
| Порог входа | Высокий (layout XML, Knockout) | Низкий (HTML+CSS+JS) |
| Стоимость лицензии | Бесплатно | Коммерческая (уточняйте) |
Состав работ по кастомной теме
- Структура темы: правильная цепочка наследования, файл 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, CLS, INP — добиваемся зелёных показателей.
- Документация: описание структуры темы, инструкция по развёртыванию.
- Обучение: сессия для разработчиков заказчика (1–2 часа онлайн).
- Поддержка: 2 недели пост-релизной поддержки по исправлению ошибок и мелким доработкам.
Процесс работы над темой
- Анализ макетов — изучаем дизайн-прототипы, выявляем технические сложности. Часто уже на этом этапе находим несоответствия между макетом и возможностями 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). Цена рассчитывается индивидуально после анализа макетов. Оценка бесплатно — свяжитесь с нами.
Закажите разработку темы, и мы подберём оптимальный стек под ваш проект.