Настройки темы дизайна через theme.xml

Темы дизайна Shop-Script могут предоставлять удобный интерфейс настроек: цвет, логотип, заголовки, переключатели блоков. Всё это настраивается через файл theme.xml и позволяет менять внешний вид магазина без правки HTML-кода.

Где найти настройки

Перейдите в Сайт → Дизайн → Настройки темы (иконка шестерёнки). Здесь отображаются все параметры, определённые разработчиком темы в файле theme.xml.

Как настройки работают изнутри

1. Разработчик описывает настройку в theme.xml с уникальным именем переменной (var)
2. В шаблонах значение доступно через {$theme_settings.имя_переменной}
3. Пользователь меняет значение в бекенде — шаблон автоматически подхватывает его

Типы настроек

Текстовое поле

Для заголовков, подписей, номеров телефонов:

<setting control_type="text" var="header_phone">
    <value locale="ru_RU">+7 (800) 123-45-67</value>
    <name locale="ru_RU">Телефон в шапке</name>
    <description locale="ru_RU">Отображается в верхней части сайта</description>
</setting>

Использование в шаблоне:

{if $theme_settings.header_phone}
    <a href="tel:{$theme_settings.header_phone}">
        {$theme_settings.header_phone}
    </a>
{/if}

Флажок (checkbox)

Для включения/выключения блоков:

<setting control_type="checkbox" var="show_bestsellers">
    <value>1</value>
    <name locale="ru_RU">Показывать хиты продаж на главной</name>
</setting>

{if $theme_settings.show_bestsellers}
    {* Вывод блока хитов продаж *}
    {include file="bestsellers-block.html"}
{/if}

Выпадающий список (select)

Для выбора из нескольких вариантов:

<setting control_type="select" var="products_per_row">
    <value>3</value>
    <name locale="ru_RU">Товаров в строке</name>
    <options>
        <option value="2">
            <name locale="ru_RU">2 товара</name>
        </option>
        <option value="3">
            <name locale="ru_RU">3 товара</name>
        </option>
        <option value="4">
            <name locale="ru_RU">4 товара</name>
        </option>
    </options>
</setting>

<div class="products-grid products-grid--cols-{$theme_settings.products_per_row}">
    {* ... товары ... *}
</div>

Выбор цвета

<setting control_type="color" var="accent_color">
    <value>#3B82F6</value>
    <name locale="ru_RU">Акцентный цвет</name>
    <description locale="ru_RU">Используется для кнопок и ссылок</description>
</setting>

<style>
    :root {literal}{{/literal}
        --accent-color: {$theme_settings.accent_color};
    {literal}}{/literal}
</style>

Выбор цвета из предустановок (color_select)

Позволяет выбрать цвет из заранее заданных вариантов:

<setting var="brand_color" control_type="color_select">
    <value>#3B82F6</value>
    <name locale="ru_RU">Цвет бренда</name>
    <options>
        <option value="#3B82F6">
            <name locale="ru_RU">Синий</name>
        </option>
        <option value="#10B981">
            <name locale="ru_RU">Зелёный</name>
        </option>
        <option value="#F59E0B">
            <name locale="ru_RU">Жёлтый</name>
        </option>
    </options>
</setting>

Загрузка изображения

Для логотипа, фоновых изображений:

<setting control_type="image" var="logo">
    <value></value>
    <filename>images/logo.*</filename>
    <name locale="ru_RU">Логотип магазина</name>
    <description locale="ru_RU">Рекомендуемый размер: 200×60 пикселей</description>
</setting>

{if $theme_settings.logo}
    <img src="{$theme_settings.logo}" alt="{$wa->accountName()|escape}">
{else}
    <span class="site-name">{$wa->accountName()}</span>
{/if}

Формат filename

В элементе <filename> указывается путь относительно папки темы. Символ * заменяется на расширение загруженного файла. Например, images/logo.* сохранит файл как images/logo.png или images/logo.jpg.

Радио-кнопки

<setting control_type="radio" var="header_style">
    <value>fixed</value>
    <name locale="ru_RU">Тип шапки</name>
    <options>
        <option value="fixed">
            <name locale="ru_RU">Фиксированная</name>
            <description locale="ru_RU">Шапка остаётся вверху при прокрутке</description>
        </option>
        <option value="static">
            <name locale="ru_RU">Обычная</name>
            <description locale="ru_RU">Шапка прокручивается вместе со страницей</description>
        </option>
    </options>
</setting>

Группировка настроек

При большом количестве настроек их удобно разбить на группы:

{* Группа «Шапка» *}
<setting var="group_header" control_type="group_divider">
    <name locale="ru_RU">Шапка сайта</name>
</setting>

<setting control_type="text" var="header_phone">
    <value>+7 (800) 123-45-67</value>
    <name locale="ru_RU">Телефон</name>
</setting>

<setting control_type="image" var="logo">
    <value></value>
    <filename>images/logo.*</filename>
    <name locale="ru_RU">Логотип</name>
</setting>

{* Группа «Главная страница» *}
<setting var="group_homepage" control_type="group_divider">
    <name locale="ru_RU">Главная страница</name>
</setting>

<setting control_type="checkbox" var="show_slider">
    <value>1</value>
    <name locale="ru_RU">Показывать слайдер</name>
</setting>

В бекенде настройки будут отображаться в аккордеоне — каждую группу можно свернуть и развернуть.

Вложенные группы

Группы можно вкладывать друг в друга через формат родитель/потомок в <value>:

<setting var="group_design" control_type="group_divider">
    <name locale="ru_RU">Оформление</name>
</setting>

<setting var="group_colors" control_type="group_divider">
    <value>group_design/group_colors</value>
    <name locale="ru_RU">Цвета</name>
</setting>

Скрытые настройки

Настройки для продвинутых пользователей можно скрыть по умолчанию:

<setting var="custom_css" control_type="text" invisible="true">
    <value></value>
    <name locale="ru_RU">Пользовательский CSS-класс body</name>
</setting>

Они станут видны только при включении флажка «Показать скрытые настройки» в бекенде.

Практический пример

Допустим, вы хотите дать пользователю возможность выбирать приветственный текст и цвет акцента на главной. Добавьте в theme.xml:

<settings>
    <setting var="group_main" control_type="group_divider">
        <name locale="ru_RU">Главная страница</name>
    </setting>

    <setting control_type="text" var="welcome_text">
        <value locale="ru_RU">Добро пожаловать в наш магазин!</value>
        <name locale="ru_RU">Приветствие на главной</name>
    </setting>

    <setting control_type="color" var="accent">
        <value>#2563EB</value>
        <name locale="ru_RU">Цвет акцента</name>
    </setting>
</settings>

В home.html:

<section class="hero" style="--accent: {$theme_settings.accent}">
    <h1>{$theme_settings.welcome_text}</h1>
</section>

Теперь контент-менеджер сможет менять текст и цвет прямо в настройках темы, без доступа к коду.

Безопасное обновление темы дизайна

При обновлении темы все файлы в wa-apps/shop/themes/ перезаписываются. Чтобы не потерять свои правки, используйте следующий алгоритм.

Шаг 1. Обновите тему через Инсталлер

Перейдите в приложение Инсталлер и нажмите Обновить рядом с темой дизайна.

Дождитесь окончания установки — все этапы должны завершиться успешно.

Шаг 2. Сохраните текущую тему

Перейдите в Магазин → Витрина → Оформление. Через меню Действия экспортируйте настройки текущей темы — это страховка на случай, если что-то пойдёт не так.

Шаг 3. Создайте клон темы

Создайте клон текущей рабочей темы — дайте ему понятное имя с датой, например marketplace19022025. Клон сохранит все ваши правки.

Шаг 4. Назначьте клон основной темой

Переключите витрину на клонированную тему. Теперь сайт работает на вашей копии, а оригинальную тему можно безопасно обновить.

Шаг 5. Обновите оригинальную тему

Вернитесь к оригинальной теме — вы увидите уведомление «Доступно обновление до версии X.X.X». Примените обновление.

Шаг 6. Протестируйте обновлённую тему

В настройках приложения Сайт назначьте обновлённой теме тестовое поселение (например, /test/). Перенесите свои правки с клона на обновлённую тему. Проверьте результат по адресу www.ваш-сайт.ru/test/.

Шаг 7. Переключитесь на обновлённую тему

Когда все правки перенесены и проверены — назначьте обновлённую тему основной, а клон можно удалить.

Не обновляйте тему напрямую

Если вы обновите тему, которая сейчас используется на витрине, все ваши правки в оригинальных файлах будут потеряны. Всегда работайте через клон.