Разработка кастомной темы Magento 2: Luma, Blank, Hyva

Разработка кастомной темы 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-файлов:

Пример — добавление блока гарантии на страницу товара:

<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:

Состав работ по кастомной теме

• Структура темы: правильная цепочка наследования, файл 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 недели пост-релизной поддержки по исправлению ошибок и мелким доработкам.

Процесс работы над темой

1. Анализ макетов — изучаем дизайн-прототипы, выявляем технические сложности. Часто уже на этом этапе находим несоответствия между макетом и возможностями Magento.
2. Проектирование структуры — определяем цепочку наследования, layout-файлы и шаблоны, которые потребуются.
3. Разработка компонентов — создаём PHTML, Less, JS, конфиги view.xml. Каждый компонент тестируется отдельно.
4. Интеграция плагинов — подключаем OneStepCheckout, Amasty, Mirasvit. Проверяем совместимость с темой.
5. Тестирование — проверяем на всех типах страниц, замеряем Core Web Vitals с помощью Lighthouse и PageSpeed Insights.
6. Деплой статики — bin/magento setup:static-content:deploy.
7. Релиз и поддержка — передача темы заказчику, документация, обучение.

Сроки и стоимость

Сроки разработки: от 3 недель (Hyva) до 8 недель (Luma). Цена рассчитывается индивидуально после анализа макетов. Оценим проект — свяжитесь с нами.

Закажите разработку темы, и мы подберём оптимальный стек под ваш проект.