Як створити тему для Magento 2 з нуля



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

Ось деякі з них:

  1. Повна підтримка HTML5 і CSS3;
  2. Вбудований препроцесор LESS;
  3. Асинхронне завантаження модулів з допомогою RequireJS (без ручного додавання сценаріїв у секцію head);
  4. jQuery/jQuery UI замість бібліотеки Prototype;
  5. Magento UI бібліотека (набір компонентів для простого та гнучкого візуалізації інтерфейсу).
Найцікавіше – під катом!

Щодо розробки тем, в Magento 2 була введена нова модульна структура коду. Тепер всі статичні сѕѕ, js, а також файли зображень розміщуються в папці web теми, а папка skin була видалена з кореневого каталогу Magento. Крім цього, була введена папка view у модулях, яка зберігає шаблони і файли, які відносяться до рівня подання MVC конкретно для кожного модуля.

Слід створити нову тему і більш детально розглянути структуру директорій та файлів. Поїхали!

Створення директорії теми
Теми в Magento 2 знаходяться в каталозі (M2_root)/app/design/frontend. Спочатку необхідно створити папку Vendor (називалася Package у Magento 1) і вже в ній створити папку для теми.

Наприклад: (M2_root)/app/design/frontend/Singree/walkbeyond. Де Singree – vendor, а walkbeyond – код теми. У коді можна використовувати будь-які комбінації літер і цифр.

Після створення цих директорій тему необхідно оголосити, щоб її можна було зробити активною в адміністративній частині.

Оголошення і реєстрація
Щоб Magento 2 змогла побачити створену тему, необхідно створити файл: (M2_root)/app/design/frontend/(vendor)/(theme codename)/theme.xml з таким змістом:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>walkbeyond</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/walkbeyond.jpg</preview_image>
</media>
</theme>

В теге title вказується назва теми. У parent вказується тема, яка встановлюється як батьківська (всі незнайдені статичні файли/файли шаблонів будуть братися з батьківського теми). У прикладі вказується blank, яка поставляється разом з M2. Вона є базовою і своєї батьківської не має. Тим не менш, рівнів спадкування в Magento 2 може бути скільки завгодно, і тут немає ніяких обмежень на відміну від першої версії.



В теге preview_image вказується мініатюра для представлення теми в адміністраторській частини.

Для реєстрації теми в системі необхідно створити файл registration.php у корені:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Singree/walkbeyond',
__DIR__
);

Необов'язково, але можна створити файл composer.json для розповсюдження теми як пакета composer. Приклад файлу:

{
"name": "Singree/walkbeyond",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"Singree/walkbeyond": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}

Створення директорій для статичних файлів
Для зберігання стилів, скриптів javascript, зображень і шрифтів необхідно створити папку web в кореневому каталозі теми. Структура папок наступна:

app/design/frontend/Singree/walkbeyond/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

Відзначимо, однак, що всі ці папки є необов'язковими.

В папці images знаходяться всі статичні файли теми, сюди ж можна додати logo.svg (ім'я за замовчуванням) для зміни логотипу теми. У папці сѕѕ/source, згідно батьківського темі blank, можна створити _theme.less файл c перевизначенні базових змінних Magento UI. У папці (magento-root)/lib/web/css/source/lib/variables/ у вихідних файлах можна знайти значення за замовчуванням для тих змінних, які можна перевизначити. У сѕѕ/source можна задавати стилі для модулів у файлі _module.less і для віджетів у файлі _widgets.less. Для невеликих правок можна створювати файл _extend.less.

Конфігурація зображень
Обов'язковим для теми є файл etc/view.xml (якщо він не визначений в батьківській темі), який містить значення властивостей для зображень товарів, таких як висота, ширина, прозорість, колір фону і т. п. Цей файл необхідно повністю скопіювати з базової теми (значення не успадковуються) Властивості зображень, які задаються за атрибутами ідентифікатора і типу в рамках елемента:

<images module="Magento_Catalog">
...
<images/>

Для прикладу можна змінити розмір зображення у табличному поданні товарів каталогу.



Файл etc/view.xml:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Catalog">
<image id="category_page_grid" type="small_image">
<width>200</width>
<height>200</height>
</image>
...
</media>
...
</view>

Ідентифікатор category_page_grid – унікальний в рамках теми. Тип small_image відповідає Small Image Role в адміністраторській частини. Допустимі значення типів зображення: image, small_image, swatch_image, swatch_thumb і thumbnail.



Після збереження товару, всі зображення є закешированными. Після зміни розмірів можна виконати команду php (M2_root)/bin/magento catalog:images:resize для регенерації картинок.

Отже, в результаті була отримана таку структуру:



Застосування теми в адміністративній частині
Тему можна активувати в налаштуваннях магазину після створення файлової системи. Для цього переходимо в розділ Content — Design — Themes і перевіряємо, що створена тема присутня у списку:



Якщо ми бачимо створену тему в списку, переходимо у Content → Design → Configuration і там натискаємо edit для певного вебсайту або обраного магазину:



Вибираємо тему (Applied Theme) і натискаємо Save configuration:



Якщо у вас включений кеш, необхідно очистити його після застосування теми. Для цього перейдіть у розділ System — Cache Management і оновлюємо всі невалідні типи кеша:



В результаті, ми отримаємо ту ж тему magento/blank, але з іншим логотипом і розміром картинок:



Використання LESS для зміни стилів
Після створення теми можна приступити до зміни зовнішнього вигляду сторінок. Щоб відредагувати стилі проекту, необхідно використовувати один з декількох типів препроцессинга LESS в Magento 2:

  • Серверна компіляція LESS;
  • Клієнтська компіляція LESS c допомогою less.js.
Клієнтська компіляція частіше використовується в режимі розробки, так як всі зміни будуть помітні відразу: браузер буде виконувати компіляцію кожного разу при зверненні до файлів стилів. При серверної компіляції необхідно вручну кожен раз видаляти вміст папок pub/static та var/view_preprocessed. Ці дії можна оптимізувати за допомогою таскраннера Grunt. Він буде відслідковувати зміни у файлах, очищати вказані папки і компілювати less автоматично.

Змінити тип компіляції можна в адмін частини по дорозі: Stores → Configuration → Advanced → Developer → Front-end development workflow → Workflow:



В нашому прикладі буде використовуватися серверна компіляція, яка встановлена за замовчуванням. Встановимо колір фону сайту, а також шрифт у створеному _theme.less файлі:

@page__background-color: #484848;
@text__color: #fff;
@font-family__base: 'Arial', sans-serif;

Після видалення вмісту директорій /pub/static/frontend/Singree/walkbeyond/en_US і var/view_preprocessed, ми можемо побачити зміна зовнішнього вигляду сайту:



Magento 2: використання макетів в темі


У Magento 2 в певній темі можна розширювати, так і перевизначати макети. Щоб повністю не копіювати сторінкові або загальні макети з базової теми, необхідно зазначити лише макет розширення в папці теми такими шляхами:

<theme_dir>
|__/<Namespace>_<Module>
|__/layout
|--<layout1>.xml
|--<layout2>.xml

Наприклад, щоб розширити макет catalog_category_view модуля Catalog, який знаходиться по дорозі (сatalog_module_dir)/view/frontend/layout/catalog_category_view.xml необхідно створити файл по дорозі: (theme_dir)/Magento_Catalog/layout/catalog_category_view.xml

Видалити блок (наприклад, опис категорії) можна так:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="category.description" remove="true"/>
</body>
</page>

Не всі завдання кастомізації можна виконати розширенням макета. Якщо кількість змін украй велика, краще змінити макет. Тобто цей новий файл буде використаний замість файлу з батьківського теми (або основного макета).

Приклади кастомізації макетів, які передбачають перевизначення макета:

  • Виклик методу, який пригнічує інший метод батьківського макета (Якщо є метод, який скасовує дію виразно методу батьківського макету, то можна його викликати і не перекрити весь макет);
  • Зміна кількості аргументів методу;
  • видалення блоку/контейнера, використовуючи remove атрибут;
  • Установка XML атрибутів блоків/контейнерів (деякі атрибути, такі як htmlClass, htmlId, label можуть бути змінені в розширюють макетах);
  • Видалення аргументів блоків;
  • Видалення всіх дескрипторів шляхом перевизначення макетного файлу з порожнім дескриптором;
  • Модифікування включення дескрипторів.
Можна перевизначити основні базові макети шляхом створення папки override/base у папці теми модуля:

<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/base
|--<layout1>.xml
|--<layout2>.xml

Ці файли будуть ігнорувати макети:

<module_dir>/view/frontend/layout/<layout1>.xml

<module_dir>/view/frontend/layout/<layout2>.xml

Також можна перевизначити макети батьківського теми, створивши папку override/theme в папці теми модуля:

<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/theme
|__/<Parent_Vendor>
|__/<parent_theme>
|--<layout1>.xml
|--<layout2>.xml

Ці файли будуть ігнорувати макети, які знаходяться такими шляхами:

<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout2>.xml

Шаблони теми
В темах Magento 2 можливо повністю перекрити шаблони модулів, як і у випадку з макетами. Для зміни шаблонів модуля (module_dir)/view/frontend/templates/(path_to_templates), необхідно створити папку в папці templates модуля теми (theme_dir)/(Namespace)_(Module)/templates/(path_to_templates).

Наприклад, можна у файлі міні-кошики Singree/walkbeyond/Magento_Checkout/templates/cart/minicart.html додати текстове повідомлення для виводу «Кількість товарів»:


<div data block="minicart" class="minicart-wrapper">
<a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
data-bind="scope: 'minicart_content'">
<span class="cart-title hidden-xs"><?php /* @escapeNotVerified */ echo __('Shopping cart'); ?></span>
<span class="counter total-qty empty"
data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
<?php /* @escapeNotVerified */ echo __('Products count:'); ?> <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
<span class="counter-label">
<!-- ko if: cart().summary_count -->
<!-- ko text: cart().summary_count --><!-- /ko -->
<!-- ko i18n: 'items' --><!-- /ko -->
<!-- /ko -->
</span>
</span>
</a>
<?php if ($block->getIsNeedToDisplaySideBar()): ?>
<div class="block block-minicart empty"
data-role="dropdownDialog"
data-mage-init='{"dropdownDialog":{
"appendTo":"[data block=minicart]", "triggerTarget":".showcart",
"timeout": "2000", "closeOnMouseLeave": false,
"closeOnEscape": true, "triggerClass":"active",
"parentClass":"active", "buttons":[]}}'>
<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
</div>
<?php endif ?>
<script>
window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
</script>
<script type="text/x-magento-init">
{
"[data block='minicart']": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
},
".*": {
"Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
}
}
</script>
</div>

Локалізація теми
Переклад теми здійснюється з допомогою словників перекладу. Словники з перекладами шукаються в таких локаціях:

  • <parent_theme_dir>/i18n/ (йде перегляд у всіх батьківських темах)
  • <current_theme_dir>/i18n/
Папка i18n може знаходитися в кожному модулі або глобально в папці app. Словники з папками теми мають більш високий пріоритет у пошуку перекладеної рядка.

Щоб згенерувати файл з перекладами в папці теми можна використовувати i18n tool.

Можна запустити таку команду в кореневому каталозі magento 2:


php bin/magento i18n:collect-phrases --output="app/design/frontend/Singree/walkbeyond/i18n/en_US.csv" app/design/frontend/Singree/walkbeyond

Вона збере всі рядки у словник. Далі файл словника: app/design/frontend/OrangeCo/orange/i18n/en_US.csv. Його можна відкрити будь-яким редактором таблиць і змінити переклад будь-яких рядків в правій колонці. Перекладені рядки, замість основних, можна буде побачити після застосування теми.

Видалення теми
Якщо тема є Composer пакетом, її можна видалити командою (з кореневого каталогу):


php bin/magento тему:uninstall [-c|--clear-static-content] {theme path} ... {theme path}

{theme path} – відносний шлях до теми, починаючи з ім'я area (frontend). У нашому випадку: frontend/Singree/walkbeyond.

--clear-static-content – видаляє статичні файли (для яких не потрібна автоматична генерація: css, js, images).

У випадку, якщо тема не є Сомроѕег пакетом, для її видалення необхідно виконати такі кроки:

  • Видалити папку теми app/design/frontend/(Vendor);
  • Видалити вміст var/view_preprocessed;
  • Видалити вміст of pub/static/frontend/;
  • Відкрити базу даних мадженто 2, знайти theme таблицю і видалити рядок з назвою теми;
  • Видалити кеш командою php bin/magento cache:flush.
Висновок
У статті були розглянуті основні складові частини теми: як створити з нуля структуру директорій та файлів теми, зображення попереднього перегляду. Також був розглянутий процес перевизначення стилів, макетів та шаблонів теми: був переведений сайт з допомогою словників перекладу. Далі слід розглянути таблицю складових теми:



Велика частина цієї структури була порушена в нашій статті. Також варто було б згадати про правила роботи з клієнтськими бібліотеками Javascript (наприклад, require.js) або детальніше описати роботу з блоками і контейнерами макетів, але тоді розмір статті надто збільшився б і читати її стало б зовсім незручно.

Дякую всім за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.