Темы и дочерняя тема

Внешний вид витрины задаёт тема — папка в themes с шаблонами Smarty, стилями и скриптами. Стандартная тема называется classic. Править её файлы нельзя: обновление магазина вернёт их в исходное состояние. Вместо этого создают дочернюю тему: она наследует всё от родительской и содержит только изменённые файлы.

Из чего состоит тема

themes/classic/
├── assets/          стили, скрипты, картинки
├── config/
│   └── theme.yml    описание темы
├── modules/         шаблоны модулей, изменённые темой
├── templates/       шаблоны страниц
└── preview.png      картинка для панели

Создание дочерней темы

Создайте вручную папку themes/acme и в ней три файла:

themes/acme/
├── assets/
│   └── css/
│       └── custom.css
├── config/
│   └── theme.yml
└── preview.png

# themes/acme/config/theme.yml
parent: classic
name: acme
display_name: Acme
version: 1.0.0
assets:
  use_parent_assets: true
  css:
    all:
      - id: acme-style
        path: assets/css/custom.css
        priority: 200

Строка parent делает тему дочерней. name совпадает с именем папки. use_parent_assets подключает стили и скрипты родителя, а блок css добавляет поверх них свой файл.

/* themes/acme/assets/css/custom.css */
#header {
    border-bottom: 3px solid #2563eb;
}

Включение

Откройте в панели «Дизайн → Тема и логотип». Тема «Acme» появилась в списке — нажмите «Использовать эту тему». Обновите витрину: она выглядит как classic, но под шапкой появилась синяя линия.

Подмена шаблона

Чтобы изменить шаблон, его копируют из родительской темы в дочернюю по тому же пути и правят копию. Движок сначала ищет шаблон в дочерней теме, затем в родительской.

Замена одного блока

Копировать шаблон целиком не обязательно — можно унаследовать его и переопределить один блок:

{* themes/acme/templates/catalog/product.tpl *}
{extends file='parent:catalog/product.tpl'}
 
{block name='product_description_short'}
    {$smarty.block.parent}
    <p class="acme-note">{l s='Доставка за два дня' d='Shop.Theme.Catalog'}</p>
{/block}

Приставка parent: указывает на шаблон родительской темы. {$smarty.block.parent} выводит исходное содержимое блока, а строка под ним добавляется после краткого описания товара. Такой файл переживёт обновление темы classic лучше, чем полная копия.

Шаблон модуля

Тема может подменить и шаблон модуля. Его кладут в папку modules темы, повторяя путь внутри модуля:

{* themes/acme/modules/acmehello/views/templates/hook/home.tpl *}
<section class="acme-hello acme-hello--banner">
    <p>{$greeting}</p>
</section>

Теперь приветствие на главной выводится этим шаблоном, а файл в самом модуле не тронут. Это работает потому, что модуль указывает путь с приставкой module: — по ней движок сначала ищет файл в теме.

Что куда класть

Хуки в теме

Места для модулей в шаблоне расставляет тема: {hook h='displayFooterProduct' product=$product}. Если в своём шаблоне убрать такой вызов, блоки всех модулей на этом хуке пропадут. При копировании шаблонов вызовы хуков сохраняйте.

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

Вы изменили шаблон или стиль, а на сайте всё по-старому. При настройке «Никогда не перекомпилировать файлы шаблона» Smarty не смотрит на дату файла. На время правок переключите компиляцию на «Перекомпилировать шаблоны при изменении файлов» на странице «Расширенные параметры → Производительность» или нажмите там «Очистить кеш».