Темы и замена шаблонов

Тема — внешний вид витрины: шаблоны, стили, картинки. Тема по умолчанию — это файлы Twig в catalog/view/template/ и стили catalog/view/stylesheet/stylesheet.css. Править их напрямую — плохая идея: обновление их перезапишет. Четвёртая версия даёт три способа изменить вид снаружи.

Способы

Редактор темы

Откройте Design → Theme Editor, выберите шаблон в дереве, например common/footer, измените код и сохраните. Изменённая копия хранится в базе, файл остаётся прежним. Страница показывает копию из базы; кнопка сброса возвращает оригинал.

Замена шаблона из дополнения

В четвёртой версии нет папки, где шаблон с тем же именем заменял бы шаблон ядра. Замену делают событием: обработчик view/.../before меняет путь к шаблону.

Скопируйте шаблон ядра в дополнение и измените его там:

extension/acme_hello/catalog/view/template/common/footer.twig

Добавьте обработчик в контроллер витрины модуля:

// extension/acme_hello/catalog/controller/module/acme_hello.php
// триггер: catalog/view/common/footer/before
public function footerTemplate(string &$route, array &$data): void
{
    $route = 'extension/acme_hello/common/footer';
}

Зарегистрируйте событие в install() с триггером catalog/view/common/footer/before и действием extension/acme_hello/module/acme_hello.footerTemplate, затем переустановите модуль. Откройте любую страницу витрины — подвал отрисован из вашего файла, с теми же данными, которые подготовил контроллер ядра.

Чтобы заменить много шаблонов, один обработчик подписывают на catalog/view/*/before, и он меняет маршрут только для путей из своего списка.

Свои стили

Файл стилей добавляют через $this->document до того, как отрисована шапка:

// триггер: catalog/controller/common/header/before
public function addStyles(string &$route, array &$args): void
{
    $this->document->addStyle('extension/acme_hello/catalog/view/stylesheet/acme.css');
}

/* extension/acme_hello/catalog/view/stylesheet/acme.css */
.acme-note {
    color: #b45309;
    font-weight: 600;
}

Откройте исходный код любой страницы витрины — в head есть ссылка на acme.css, а абзац, добавленный в уроке о событиях, стал оранжевым.

Дополнение-тема

Полная тема — дополнение вида theme: у него есть страница настроек в admin/controller/theme/, а выбирают его в настройках магазина, System → Settings, вкладка General. Внутри используется тот же приём — события, которые заменяют пути шаблонов и добавляют стили. Способ, которым тема подключается в начале запроса, менялся между выпусками 4.0 и 4.1, поэтому возьмите за образец работающую тему для своего выпуска.

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

Шаблон один раз копируют в дополнение и забывают о нём. После обновления магазина в шаблоне ядра появляется новая переменная или исправленная форма, а копия остаётся старой — кнопка на странице перестаёт работать. Заменяйте как можно меньше шаблонов и после каждого обновления сравнивайте свои копии с новыми файлами ядра.