Основы редактирования Smarty-шаблонов в Shop-Script

Шаблоны дизайна Shop-Script построены на движке Smarty. Это означает, что прямо внутри HTML-кода вы можете использовать переменные, условия и циклы — без знания PHP. В этой статье разберём базовые приёмы, которые пригодятся при правке готовых тем.

Где редактировать шаблоны

Откройте бекенд вашего магазина и перейдите в Сайт → Дизайн. Здесь вы увидите список файлов текущей темы оформления.

Редактор шаблонов в бекенде — список файлов темы и код index.html

Основные файлы:

Файл	Что содержит
`index.html`	Общая обёртка всех страниц (head, шапка, подвал)
`home.html`	Главная страница магазина
`category.html`	Страница категории (список товаров)
`product.html`	Карточка товара
`checkout.html`	Оформление заказа
`search.html`	Результаты поиска

Переменные — вывод данных

Любая переменная в Smarty оборачивается в фигурные скобки:

{$product.name}           {* Название товара *}
{$product.price}          {* Цена *}
{$category.name}          {* Название категории *}
{$wa->accountName()}      {* Название магазина *}

Переменные могут быть вложенными — через точку обращаемся к полям массива:

{$product.images[0].id}   {* ID первого изображения товара *}

Условия — показываем контент по ситуации

Конструкция {if}...{/if} позволяет показывать блоки только при выполнении условия:

{* Показать старую цену, только если она задана *}
{if $product.compare_price}
    <s class="old-price">{$product.compare_price} ₽</s>
{/if}

{* Разный текст для авторизованных и гостей *}
{if $wa->user()->isAuth()}
    <a href="{$wa->getUrl('/my/')}">Личный кабинет</a>
{else}
    <a href="{$wa->loginUrl()}">Войти</a>
{/if}

Циклы — перебор списков

Для вывода списка товаров, категорий, изображений используется {foreach}:

{foreach $products as $product}
    <div class="product-card">
        <a href="{$product.frontend_url}">
            {$product.name} — {$product.price} ₽
        </a>
    </div>
{forelse}
    <p>Товары не найдены</p>
{/foreach}

Полезные свойства внутри цикла:

{$product@first}      {* true для первого элемента *}
{$product@last}       {* true для последнего *}
{$product@iteration}  {* Порядковый номер: 1, 2, 3... *}
{$product@total}      {* Всего элементов в массиве *}

Подключение других шаблонов

Повторяющиеся блоки (карточка товара, шапка, подвал) удобно выносить в отдельные файлы и подключать:

{include file="product-card.html" product=$p}

В подключённом файле product-card.html переменная $product будет доступна.

Фигурные скобки и JavaScript

Smarty воспринимает {} как свой синтаксис. Если в шаблоне есть JavaScript с фигурными скобками, оберните его в {literal}:

{literal}
<script>
    const config = { currency: 'RUB', locale: 'ru' };
</script>
{/literal}

Полезные глобальные переменные

Настройки темы дизайна — оформление и группы настроек

Эти переменные доступны в любом шаблоне темы:

{$wa_url}              {* Корневой URL Webasyst *}
{$wa_app_url}          {* URL магазина *}
{$wa_theme_url}        {* URL папки текущей темы (для CSS, JS, картинок) *}
{$wa->currentUrl()}    {* URL текущей страницы *}
{$wa->locale()}        {* Локаль: ru_RU *}

Форматирование дат и чисел

Webasyst предоставляет готовые фильтры для вывода дат и цен:

{$order.create_datetime|wa_datetime}            {* 05.01.2025 14:30 *}
{$order.create_datetime|wa_date}                {* 05.01.2025 *}
{$review.datetime|wa_datetime:'humandate'}      {* 5 января 2025 *}

{$product.price|wa_format_number}               {* 1 234,00 *}

Что дальше

Освоив эти базовые конструкции, вы сможете:

Менять разметку карточки товара и страницы категории
Добавлять условные блоки (акции, уведомления, баннеры)
Выносить повторяющийся код в отдельные шаблоны
Безопасно вставлять JavaScript-код в шаблоны