Topic - Magento 2 Theme Spesker - Bohdan Sidovolosyi Considered how to create a theme for Magento 2 "through the eyes of a front-end developer": - what is a theme - creation, customization and structure - what you need to have to evaluate the development / customization - possible errors when evaluating a new topic - FE developer interaction with BE Link to the webinar recording - https://youtu.be/NW82uUMvPtQ More materials: articles, videos and event announcements can be found in our Telegram community: https://t.me/promagento_channel

1. Magento 2 Theme
Тема для Magento 2 :
● Как это и что это
● Создание, кастомизация, структура
● Что нужно иметь для оценки разработки / кастомизации
● Возможные ошибки при оценке новой темы
● Что же на первый взгляд может выглядеть как 2 часа , а потом 22
● Взаимодействие FE разработчика с BE
Magento 2 Theme overview

2. Тема Magento 2
Тема Magento 2 – это компонент мадженты, отвечающий за внешний вид сайта (как на фронтенд
части так возможно и в админке). Тема содержит в себе совокупность шаблонов, стилей, графики,
шрифтов, js скриптов.
● Тема существует для кастомизации или переопределения модулей и библиотек в Magento.
● Magento по умолчанию состоит включает в себя 2 темы: Blank, Luma
Blank – это базовая тема, стилизует базовые модули Magento, содержит все лейауты страниц
Magento, структуру стилей less.
Luma – является кастомизацией темы Blank и наследует ее.
При разработке темы с нуля (from scratch) – родитель используется как правило тему Blank.
Magento 2 Theme overview

3. Создание, кастомизация, структура
● Тема создается в директории app/design/frontend/Vendor/theme_name, включает в себя
обязательные файлы регистрации (registration.php) в системе и файл theme.xml, где
указывается: Имя темы и ее родитель. После этого тема доступна в админке для активации.
(Content->Design->Configuration).
● В теме мы переопределяем, изменяем или создаем шаблоны (phtml), лайауты (xml), стили
(less) JS файлы, шрифты, картинки и тд.
Тема по приоритету стоит выше вендора (vendor) и созданных модулей (app/code) – это
значит, что любой из перечисленных компонентов темы имеет наивысший приоритет и он
будет виден на фронте.
Magento 2 Theme overview

4. Создание темы с нуля (from scratch)
● Создание темы подразумевает кастомизацию модулей Magento как базовых, так и кастомных.
В качестве родителя новой темы используется дефолтная тема Blank, которая уже имеет
созданные лайуты страниц и структуру стилей Magento less flow.
● Под новой темой создаем/меняем структуру лайутов, изменяем шаблоны и пишем стили для
реализации макета (дизайна) сайта.
● Вариант создания новой темы актуален тогда, когда дизайн сайта создан не отталкиваясь от
покупной темы и является уникальным, имея свою структурой лайута, размещение элементов.
> Тут важно понимать, что если дизайнер создавал макет не опираясь на выбранную
предварительно заказчиком покупную тему, то в таком случае настоятельно рекомендую
делать тему самим и не пытаться подобрать что-то похожее на themeforest и т.д. В
большинстве случает это только усложнит задачу.
Magento 2 Theme overview

5. Кастомизация существующей темы
● Подразумевает установку покупной темы после чего создается новая тема родителем, которой
будет являться покупная и все изменения будут изменять покупную тему.
Исходя из практического опыта, такой вариант целесообразно использовать если:
1) Заказчик выбрал тему и она его полностью устраивает структурно и изменить нужно только:
цвета, логотип, иконки, контент.
2) Заказчик выбрал тему которая его устраивает структурно, но он захотел внести в нее изменения
не нарушающие основную структуру лейаутов, блоков. И дизайнер сделал изменения в дизайне
следуя этим принципам.
> В таких случаях – приобретение и кастомизация готовой темы имеет смысл.
Magento 2 Theme overview

6. Что нужно иметь для оценки разработки/кастомизации темы
1. Дизайн с возможностью получения всех параметров для верстки (размеры шрифтов, отступы,
состояния элементов – hover,focus,active).
2. Мобильные состояние на дизайне, если нужен какой то определенный вид под определенный
девайс (брейкпоинт к примеру 640px или например 1366px). Если тема покупная и уже
адаптивна и устраивает заказчика, этот пункт не обязателен.
3. ТЗ с описанием требований к элементам сайта: что они из себя представляют и на чем должны
быть реализованы.
4. Список модулей, которые будут использованы для понимания затрат времени на их
кастомизацию.
5. Понимание того, что будут ли предоставлены все необходимые материалы для начала работы:
шрифты, графика (не контентная), все необходимые иконки в svg.
Magento 2 Theme overview

7. Возможные ошибки при оценке новой темы
Здесь из опыта разработки:
● Первым делом надо обращать внимание на структуру элементов в хедере, футере и
контентной части. Если оно выглядит не сложно графически, но очень сильно отличается от
структуры лейаута мадженты, перестройка всех элементов занимает достаточно много времени
на уровне xml лейаутов.
● Меню, если оно будет использовать мегаменю (любое) и его нужно будет кастомизировать как
на десктопе так и на мобильном (в особенности) требует особого внимание при оценке.
● Страница товара - часто забирает больше времени чем кажеться, структура лейаутов очень
важна тут, на сколько отличаются от дефолта. И сколько данных будет выводится для товара.
● Чекаут – это отдельная история написанная на knockout JS компонентах. Если чекаут должен
иметь что то кастомное например дополнительные шаги или изменен структурно, или выводить
кастомные значения, которые будут участвовать в расчете цены, доставки, скидок и т.д –
здесь очень тяжело оценить работу и оценивать нужно с бэкендом вместе.
● Адаптация покупных модулей, не всегда все работает как написано, причин тому много может
быть.
Magento 2 Theme overview

8. Взаимодействие FE разработчика с BE
Все зависит от задач:
1. У нас есть дизайн и мы видим, что в нем весь функционал базовый, нужно только шаблоны,
стили делать – работаем и не мешаем друг другу, пока BE импорт делает или пишет какой то
модуль для захвата планеты.
2. Например: есть задача вывести дополнительные данные о товаре в отдельный блок. Здесь
идеальный вариант – колл с бэком и ПМ-ом, решение как-то будем делать, быстро, сложно,
что за этим потянется. После чего обговариваем уже с BE вдвоем все детали и что он
передает, как мы это забираем, куда шлем запрос, что получаем. После чего BE пишет свою
часть, а мы в это время, если это возможно готовим рыбу на фронте - блок, форму, попап и т.
д, потом BE отдает нам свой коммит, и начинаем все собирать в кучу.
3. Идеально когда по всем вопросам есть быстрая коммуникация FE-BE, - уточнить, обсудить,
подпилить быстренько - это работает в оба направления хорошо.