Редактирование дизайна Shop-Script (Webasyst) через админ-панель: пошаговое руководство

Встроенный инструмент работы с кодом в Webasyst позволяет кастомизировать интерфейс интернет-магазина без использования FTP-клиентов и сторонних редакторов. Платформа предоставляет полноценную IDE с подсветкой синтаксиса и поддержкой шаблонизатора Smarty прямо в браузере.

В этой статье разберем, как устроена работа с шаблонами и как внести правки в дизайн вашего магазина, не сломав его логику.

Шаг 1. Переход в управление дизайном магазина

В экосистеме Webasyst каждое приложение (Сайт, Магазин, Блог, Поддержка) имеет собственный независимый слой дизайна и свои шаблоны. Поскольку мы работаем с витриной интернет-магазина, нам нужно именно приложение Shop-Script.

1. Авторизуйтесь в панели управления.
2. В главном меню приложений выберите «Магазин» (Shop-Script).
3. В левой навигационной панели перейдите в раздел «Витрина», а затем откройте вкладку «Дизайн».

wa-magazin.ru

Шаг 2. Выбор активной темы оформления

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

• В верхней части рабочей области убедитесь, что в выпадающем списке выбрана именно та тема оформления, которую вы хотите отредактировать (текущая активная тема обычно подсвечена или выбрана по умолчанию).

Шаг 3. Работа с деревом файлов

В левой колонке откроется файловая структура темы оформления Shop-Script. Для открытия файла кликните по его названию в списке — код развернется в центральном окне встроенного редактора.

wa-magazin.ru

Шаг 4. Редактирование и сохранение

Внесите необходимые изменения в код. Редактор поддерживает стандартные горячие клавиши:

• Ctrl + S (или Cmd + S для macOS) — быстрое сохранение файла без перезагрузки страницы.

После сохранения изменения сразу применяются на боевом сайте.

Если изменения не появились: Перейдите в приложение «Настройки» и в правом верхнем углу нажмите кнопку «Очистить кэш».

Золотые правила безопасности при работе с кодом в Shop-Script

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

1. Защита от обновлений: Клонирование темы

Если вы используете готовую тему оформления, купленную в Инсталлере Webasyst, разработчики будут выпускать для нее обновления (исправления багов, новый функционал). При обновлении темы все оригинальные файлы перезаписываются.

• Решение: Если планируются серьезные изменения в HTML-структуре, перед началом работ нажмите на название темы в редакторе и выберите пункт «Клонировать тему оформления». Задайте ей уникальный ID (например, my_shop_theme). Назначьте этот клон в настройках витрины и спокойно редактируйте код.

2. Использование файла custom.css

Для изменения цветов, отступов или шрифтов не нужно править весь массивный файл theme.css.

• В большинстве современных тем в блоке «Стили» предусмотрен изолированный пустой файл custom.css (или user.css).
• Он подключается на сайте последним, поэтому его стили имеют наивысший приоритет.
• Этот файл защищен от перезаписи при стандартных обновлениях темы оформления.

3. Экранирование JavaScript (Тег {literal})

Шаблонизатор Smarty, на котором работает Shop-Script, использует фигурные скобки { } для вызова своих переменных и функций. Если вы решите вставить стандартный JS-скрипт (например, счетчик метрики, пиксель ретаргетинга или код онлайн-чата), в котором тоже есть фигурные скобки, шаблонизатор попытается их обработать и сайт упадет в Fatal Error.

{literal}
<script>
    function checkSomething() {
        console.log("Фигурные скобки внутри этого тега безопасны");
    }
</script>
{literal}