Темы, стили и скрипты

Тема — набор файлов, отвечающих за внешний вид витрины. Модуль приносит шаблоны «по умолчанию», а тема может заменить любой из них и добавить свои стили, не трогая модуль. Свою тему наследуют от готовой и меняют только нужное.

Где лежит тема

Темы витрины находятся в app/design/frontend/Поставщик/тема. Создадим тему Acme/simple:

app/design/frontend/Acme/simple/
├── registration.php
├── theme.xml
├── Acme_Hello/
│   └── templates/
│       └── greeting.phtml
└── web/
    └── css/
        └── source/
            └── _extend.less

Создание темы

Оба обязательных файла создают вручную:

// app/design/frontend/Acme/simple/registration.php
use Magento\Framework\Component\ComponentRegistrar;
 
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Acme/simple', __DIR__);

<?xml version="1.0"?>
<!-- app/design/frontend/Acme/simple/theme.xml -->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Acme Simple</title>
    <parent>Magento/luma</parent>
</theme>

Тег parent называет родительскую тему: всё, чего нет в вашей теме, берётся из неё. Выполните bin/magento setup:upgrade, затем в панели откройте «Содержимое → Дизайн → Конфигурация» (Content → Design → Configuration), выберите витрину и укажите тему Acme Simple. Внешне магазин пока не изменится.

Переопределение шаблона

Чтобы заменить шаблон модуля, в теме создают файл с тем же путём внутри папки с именем модуля:

Скопируйте исходный файл в тему и измените его. После bin/magento cache:clean страница использует файл из темы. Тем же способом в папке Модуль/layout темы дополняют макеты.

Стили темы

Темы Luma и Blank написаны на LESS. Свои правила добавляют в файл web/css/source/_extend.less:

/* app/design/frontend/Acme/simple/web/css/source/_extend.less */
.hello-greeting {
    padding: 20px;
    background: #f5f5f5;
}

Magento сам соберёт этот файл вместе со стилями родительской темы.

Стили из модуля

Модуль может принести обычный файл CSS. Его кладут в view/frontend/web/css и подключают в макете, в разделе head:

<!-- app/code/Acme/Hello/view/frontend/layout/hello_index_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Acme_Hello::css/hello.css"/>
    </head>
</page>

Файл app/code/Acme/Hello/view/frontend/web/css/hello.css подключится только на странице /hello.

Скрипты

Скрипты в Magento загружает библиотека RequireJS: каждый файл — отдельный модуль JavaScript. Создайте view/frontend/web/js/hello.js:

// app/code/Acme/Hello/view/frontend/web/js/hello.js
define([], function () {
    'use strict';
 
    return function (config, element) {
        element.textContent = config.message;
    };
});

Скрипт привязывают к элементу в шаблоне атрибутом data-mage-init:

<!-- app/code/Acme/Hello/view/frontend/templates/greeting.phtml -->
<p data-mage-init='{"Acme_Hello/js/hello": {"message": "Скрипт работает"}}'></p>

После загрузки страницы в абзаце появится текст «Скрипт работает». Функция получает настройки из атрибута и сам элемент.

Обновление статических файлов

В режиме разработчика стили и скрипты собираются при первом обращении и попадают в pub/static. Если правка не видна, удалите содержимое папок pub/static/frontend и var/view_preprocessed и обновите страницу.

Частая ошибка

Шаблон в теме положили не в ту папку: app/design/frontend/Acme/simple/templates/greeting.phtml без имени модуля. Magento такой файл не найдёт и молча возьмёт исходный. Путь в теме всегда начинается с имени модуля: Acme_Hello/templates/....