У цій статті ми опишемо, як створити свою фронтенд тему в Magento 2. Отже, приступимо і будемо рухатися за таким планом:
Створення каталогу теми
Пройдемо по цьому шляху, і створимо папку розробника: / app / design / frontend /
Анотація: Як Ви бачите, назва вказана з великої літери. Це обов'язкова умова, воно є рекомендацією з боку розробників Magento 2.
Далі створимо папку теми: / app / design / frontend /
Створення пакету composer для теми (опціонально)
Теми, що поставляються в Magento 2, за замовчуванням представлені у вигляді пакета composer.
Дізнатися, що таке composer можна тут. тут і тут.
composer.json забезпечує інформацію про залежності теми.
Приклад файлу composer.json:
Що у нас є на даний момент:
Створення файлу registration.php
У нашому випадку це буде:
конфігурація зображень
Дуже хороша і корисна функція в новій Magento 2. Для того, щоб задати конфігурацію (розміри, ресайз, пропорції, обрізка та ін.) Зображень продукту, в корені теми нам необхідно створити папку etc, в ній створити файл view.xml.
Якщо конфігурація батьківської теми не вимагає змін, то файл view.xml підчепити фолбеком.
У нашому випадку ми успадковуємо від стандартної теми Luma, і поки чіпати конфігурацію зображень не будемо.
інтернаціоналізація
У версії magento 1.9.x для зберігання файлів csv з перекладами створювалася папка locale в папці теми. Далі створювалася папка з мовою, наприклад, ru_RU, а вже в ній - безпосередньо сам файл з перекладами translate.csv.
В Magento 2 все трохи інакше. Тепер в корені теми необхідно створити папку i18n. Далі в папці i18n створюється файл з перекладом, наприклад, ru_RU.csv.
Анотація: В англійській мові для слова «internationalization» прийнято скорочення «i18n». При цьому число 18 означає кількість пропущених між «i» та «n» букв. (Wikipedia).
приклад:
Створення каталогів для статичних файлів
У нашому випадку це:
Анотація: Каталог web, що знаходиться в кореневій папці теми, служить для зберігання статичних файлів теми. Якщо є необхідність в підключенні файлу для певного модуля, необхідно створити каталог модуля в папці теми, і вже в ньому розмістити папку web з описаної вище структурою.
Приклад: /
В Magento 2 організована нова структура, де присутній чіткий поділ між файлами модулів і файлами теми. Це дуже зручно. Ми повернемося до цього питання для більш детального вивчення.
Визначення логотипу теми
В Magento 2 логотип logo.svg за замовчуванням розташовується в
Для того, щоб використовувати свій логотип, необхідно:
1 - Якщо Ваш логотип в форматі .svg:
Перейменувати його в logo.svg, і помістити в
Анотація: В даному випадку ми розширюємо лейаута батьківської теми. В Magento 2 лейаута можна перевизначати і розширювати. Більш детально про це ми поговоримо в наступній статті.
Далі в цьому лейаута необхідно прописати інформацію про логотип.
Наприклад, логотип astrio.png розміром 150x30 буде оголошений так:
висновок
Отже, процес створення теми закінчений. Ось яка структура у нас вийшла:
Далі необхідно зайти в зону адміністратора, активувати нашу тему і почистити кеш. В області фронтенда змін не буде, тому що ми повністю успадковуємо стандартну тему Luma.
У наступній статті ми поговоримо про множині спадкування в Magento 2, а також розберемо extend / override layouts.
