Работа с кодом «Vega»

На этой странице — всё о редактировании кода темы: как безопасно добавлять стили и скрипты, размещать блоки и элементы на страницах, вставлять произвольный HTML и расширять стандартный контент.

Редактирование файлов

Файлы темы хранятся на сервере. Для приложения «Сайт» путь выглядит так: wa-data/public/site/themes/vega/ . Для других приложений слово «site» в пути заменяется на имя приложения: blog , shop и т.д.

Самый распространённый способ добраться до файлов — FTP-клиент. Подключитесь к серверу и откройте нужную папку как обычный проводник. Данные для подключения (хост, логин, пароль) указаны в панели управления вашим хостингом. Для Windows рекомендуем бесплатный WinSCP — скачать можно на winscp.net. Для Windows, macOS и Linux подойдёт FileZilla — filezilla-project.org.

Если настраивать FTP не хочется, файлы можно редактировать прямо в браузере: в бэкенде Webasyst откройте Сайт → Темы дизайна, выберите тему Vega и нажмите кнопку Шаблоны. Изменения применяются мгновенно после сохранения.

Редактировать файлы темы напрямую стоит только если вы не планируете её обновлять. При выходе новой версии все файлы перезаписываются — внесённые правки будут безвозвратно потеряны.

Если после редактирования файла что-то пошло не так, можно восстановить исходный вид: откройте изменённый файл в разделе «Шаблоны», нажмите Посмотреть оригинал и выберите Сбросить изменения к исходной версии.

Для кода, который должен сохраняться между обновлениями, используйте два специальных файла в корне темы: user.css и user.js. Разработчик никогда их не трогает — они зарезервированы исключительно для вас. Оба файла подключаются автоматически:

/* Убрать скругление у кнопок */
.button-one {
    border-radius: 0;
}

document.addEventListener('DOMContentLoaded', function () {
    // Ваши доработки здесь
});

Если нужно заглянуть в основной CSS или JavaScript темы, отключите настройку Основные настройки → Прочее → Уменьшить размер стилей и скриптов. Вместо минифицированных theme.min.css и theme.min.js в шаблонах появятся обычные читаемые файлы — размер немного увеличится, зато код будет виден.

Утилиты

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

{* Подключает утилиты темы для Сайта *}
{include "{$wa->site->themePath(vega)}utils.html"}

{* Подключает утилиты темы для Блога *}
{include "{$wa->blog->themePath(vega_blog)}utils.html"}

{* Подключает утилиты темы для Shop-Script *}
{include "{$wa->shop->themePath(vega_shop)}utils.html"}

После подключения становятся доступны add_block , add_element и ряд вспомогательных функций.

get_theme_url — возвращает URL папки темы. Работает одинаково для всех приложений: Сайт, Блог, Магазин. Используйте вместо $wa_theme_url , если шаблон может подключаться из разных приложений, например понадобился файлы из темы для Сайта в приложении Фото.

{* get_theme_url возвращает URL папки темы *}
<img src="{call get_theme_url}img/placeholders/500x350.png" alt="Баннер">

lazy_image — выводит атрибут src картинки с поддержкой ленивой загрузки. Если в настройках темы включена ленивая загрузка, автоматически переключается на data-src . Нужен класс js-lazy-load на теге img.

{* lazy_image подставляет src или data-src в зависимости от настроек темы *}
<img class="js-lazy-load" {call lazy_image url="{call get_theme_url}img/placeholders/500x350.png"} alt="Баннер">

animation — добавляет атрибуты data-animate и data-delay для CSS-анимации появления элемента. Значение задаётся в формате тип:задержка_мс.

<div {call animation value='fade-in:300'}>
    Контент с анимацией появления
</div>

pluralform — правильное склонение существительного в зависимости от числа. Принимает три формы: для 1, для 2–4 и для 5+. Выводит число вместе с формой.

{* Выведет строку "5 товаров" *}
{call pluralform n=5 f1='товар' f2='товара' f3='товаров'}

get_phone — очищает номер телефона, оставляет только цифры и +. Удобно для атрибута href в ссылках.

{* get_phone очищает номер: оставляет только цифры и + *}
<a href="tel:{call get_phone phone='+7 (495) 123-45-67'}">+7 (495) 123-45-67</a>

lorem — выводит lorem ipsum нужного количества слов. Удобно для заглушки текста при вёрстке.

{* Выведет 30 слов lorem ipsum *}
{call lorem words=30}

debug — выводит переменную в console.log браузера. Полезно при отладке шаблонов.

{* Выводит $variable в console.log браузера *}
{call debug data=$variable}

Добавление блоков

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

Чтобы разместить блоки на отдельной странице — создайте новую страницу в бэкенде Webasyst, перейдите в режим редактирования HTML и вставьте код. Готовый код любого блока можно скопировать прямо с главной страницы во фронтенде: выберите нужный блок и нажмите кнопку Получить код в верхней правой части блока.

Генератор копирует сохранённую конфигурацию блока — те настройки, которые хранятся в теме на момент нажатия кнопки. Скопированный код содержит две строки: специальный массив $props , в котором прописаны все параметры (настройки) блока. Ниже находится вызов утилиты add_block , она добавляет сам блок.

{* Подключает утилиты темы для Сайта *}
{include "{$wa->site->themePath(vega)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{* Параметры блока *}
{$props = [
    'id' => '',
    'paddings' => '',
    'color_scheme' => 'primary',
    'image' => 'img/placeholders/1440x480.png',
    'mobile_image' => 'img/placeholders/750x900.png',
    'url' => '#',
    'sticker' => [
        'template' => 'sticker-one',
        'name' => 'Реклама',
        'text' => 'ООО «Вега», ИНН 123456789',
        'description' => '1a2b3c4d5e6f7g8h9'
    ]
]}

{* Утилита, добавляющая блок с параметрами выше *}
{call add_block block="banner" props=$props}

{* Подключает утилиты темы для Блога *}
{include "{$wa->blog->themePath(vega_blog)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{* Параметры блока *}
{$props = [
    'id' => '',
    'paddings' => '',
    'color_scheme' => 'semitone',
    'image' => 'img/placeholders/1440x480.png',
    'mobile_image' => 'img/placeholders/750x900.png',
    'url' => '#',
    'sticker' => [
        'name' => 'Реклама',
        'text' => 'ООО «Вега», ИНН 123456789',
        'description' => '1a2b3c4d5e6f7g8h9'
    ]
]}

{* Утилита, добавляющая блок с параметрами выше *}
{call add_block block="banner" props=$props}

{* Подключает утилиты темы для Shop-Script *}
{include "{$wa->shop->themePath(vega_shop)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{* Параметры блока *}
{$props = [
    'id' => '',
    'paddings' => '',
    'color_scheme' => 'primary',
    'image' => 'img/placeholders/1440x480.png',
    'mobile_image' => 'img/placeholders/750x900.png',
    'url' => '#',
    'sticker' => [
        'template' => 'sticker-one',
        'position' => 'left',
        'name' => 'Sponsored',
        'text' => 'Vega LTD',
        'description' => '1a2b3c4d5e6f7g8h9i',
        'container' => '',
        'gap' => ''
    ]
]}

{* Утилита, добавляющая блок с параметрами выше *}
{call add_block block="banner" props=$props}

Строка {include "...utils.html"} обязательна — без неё утилиты add_block и add_element не будут определены и страница выдаст ошибку. Эту строку достаточно указать один раз в самом начале страницы.

Строка {$wa->globals("userCode", true)} тоже обязательна при вставке блоков. Без неё тема пропустит весь контент страницы через элемент page-one, который оборачивает содержимое в стандартную разметку (стилизованная страница сайдбаром) — и блок отобразится некорректно. Элементы можно использовать без этой строки: элементы допустимо вставлять внутрь блоков, но не наоборот — блок не может находиться внутри элемента.

Редактируйте страницу с блоками только в режиме HTML — визуальный редактор может повредить Smarty-код. Возвращаться в визуальный режим после вставки кода не нужно.

Все пути к картинкам в $props отсчитываются от корневой папки темы. Например, значение img/placeholders/1440x480.png означает полный путь к этому файлу будет wa-data/public/site/themes/vega/img/placeholders/1440x480.png — пример для приложения Сайт. Именно туда и нужно загружать свои картинки через FTP.

Если хочется хранить картинки вне папки темы — например, чтобы они не пропадали при сбросе настроек — можно создать папку wa-data/public/site/img/ и ссылаться на неё через относительный путь: ../../img/my-image.jpg . Две точки ../ означают «подняться на один уровень выше» — два раза поднимаемся из папки темы до wa-data/public/site/ , а затем заходим в нужную папку.

Обратите внимание на несколько важных моментов при работе с $props:

• На одной странице можно разместить несколько одинаковых блоков — например, два баннера. Главное, чтобы у каждого было уникальное значение свойства id: 'banner1' , 'banner2' и т.д. Если задать одинаковый id , это может вызвать ошибки'.
• Свойства в массиве разделяются запятой. После последнего свойства запятая не ставится — иначе Smarty выдаст ошибку синтаксиса.
• Необязательные свойства можно не передавать вовсе или оставить значение пустой строкой '' — блок подставит значение по умолчанию.
• Булевы значения можно записывать двумя способами: true / false или строками '1' / '' (пустая строка) — оба варианта равнозначны в Smarty.

Добавление элементов

Элемент — небольшой настраиваемый компонент: заголовок, кнопка, видео, текст и другие. Вызывается функцией add_element:

{$props = [
    'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit Accusamus alias aliquid.',
    'size' => 'medium, H2',
    'align' => 'left',
    'animation' => '',
    'gap' => '1',
    'container' => '',
    'attributes' => '',
    'classes' => ''
]}
{call add_element element="title" props=$props}

В отличие от блоков, элементы можно вставлять на любую страницу — в том числе со стандартным макетом и сайдбаром, без флага userCode . Из нескольких элементов можно собрать собственный блок. Полный список всех доступных элементов содержится в боковой панели с настройками темы во вкладке «Генератор».

Свойство classes принимает массив строк — можно передать несколько классов сразу:

{call add_element element="title" props=[
    'text' => 'Заголовок',
    'size' => 'medium, h2',
    'gap' => '1',
    'classes' => ['my-title', 'is-highlighted']
]}

Свойство attributes принимает ассоциативный массив — ключ это имя атрибута, значение — его содержимое:

{call add_element element="title" props=[
    'text' => 'Заголовок',
    'size' => 'medium, h2',
    'gap' => '1',
    'attributes' => ['id' => 'section-about', 'data-section' => 'about']
]}

Элемент «Рамка»

Произвольный HTML-код можно свободно вставлять между блоками и элементами. Чтобы он выглядел как полноценный блок — с ограниченной шириной и цветовым фоном — используйте элемент frame . Это универсальный контейнер: добавляет фон, отступы и ограниченную ширину. Содержимое собирается в переменную через capture , а затем передаётся как свойство content . Поддерживает несколько колонок.

Простой пример с произвольным HTML для приложения Сайт:

{* Подключает утилиты темы для Сайта *}
{include "{$wa->site->themePath(vega)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{* Любой HTML код внутри переменной content *}
{capture assign="content"}
    <h2>Название раздела</h2>
    <p>Произвольный HTML-контент.</p>
{/capture}

{* Утилита, добавляющая элемент «Рамка» *}
{call add_element element="frame" props=[
    'color_scheme' => 'primary',
    'paddings' => '60,60',
    'content' => $content
]}

В этот элемент можно не только поместить HTML код, но и другие элементы темы. При желании можно создать несколько колонок. Пример для приложения Сайт:

{* Подключает утилиты темы для Сайта *}
{include "{$wa->site->themePath(vega)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{* Содержимое левой колонки в переменной $left *}
{capture assign="left"}
    {* Элемент «Заголовок» *}
    {$props = [
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing.',
        'size' => 'medium, H2',
        'align' => 'left',
        'animation' => '',
        'gap' => '1',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="title" props=$props}

    {* Элемент «Текст» *}
    {$props = [
        'content' => '<p>Lorem ipsum dolor sit amet Accusamus alias aliquid animi aut consequatur est eum exercitationem libero magni modi nulla officiis pariatur velit vero vitae?</p> <p>Ab consectetur cumque cupiditate dignissimos doloribus eius facere impedit natus obcaecati qui quis reprehenderit ut voluptas?</p>',
        'size' => 'medium',
        'align' => 'left',
        'column_count' => '',
        'width' => '800',
        'gap' => '1',
        'animation' => '',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="text" props=$props}

    {* Элемент «Кнопка» *}
    {$props = [
        'template' => 'button-one',
        'mode' => 'link',
        'url' => '#',
        'type' => 'primary',
        'size' => 'large',
        'width' => 'wide',
        'text' => 'Show more',
        'ymtarget' => '',
        'anchor' => '1',
        'animation' => '',
        'gap' => '1',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="button" props=$props}
{/capture}

{* Содержимое правой колонки в переменной $right *}
{capture assign="right"}
    {* Элемент «Отзыв» *}
    {$props = [
        'template' => 'review-one',
        'color_scheme' => 'secondary',
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit Accusamus alias aliquid animi aut consequatur distinctio dolore ea eligendi est eum exercitationem libero magni modi nulla officiis.',
        'name' => 'John Smith',
        'description' => 'Software developer',
        'image' => 'img/placeholders/100x100-user.png',
        'url' => '#',
        'width' => '500',
        'animation' => '',
        'gap' => '1',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="review/`$props.template`" props=$props}
{/capture}

{* Вызываем элемент «Рамка» и передаем ему обе колонки *}
{call add_element element="frame" props=[
    'paddings' => '',
    'color_scheme' => 'secondary',
    'content' => [$left, $right],
    'columns' => 'two'
]}

В таблице ниже — все доступные свойства элемента «Рамка» с описанием и допустимыми значениями:

Элемент «Страница»

Элемент page оборачивает контент в типографическую разметку с заданной максимальной шириной. Используйте его, когда нужно вставить читаемый текстовый блок — заголовки, абзацы, списки.

{* Подключает утилиты темы Vega *}
{include "{$wa->site->themePath(vega)}utils.html"}

{* Убирает оформление страницы и сайдбар *}
{$wa->globals("userCode", true)}

{capture assign="content"}
    <h1>Заголовок страницы</h1>
    <p>Текст страницы.</p>
    <ul>
        <li>Первый пункт списка</li>
        <li>Второй пункт списка</li>
        <li>Третий пункт списка</li>
    </ul>
{/capture}

{call add_element element="page/page-one" props=[
    'size' => 'medium',
    'content' => $content
]}

В таблице ниже — все доступные свойства элемента «Страница»:

До и после контента

Блоки можно добавить до или после основного контента страницы, не отключая стандартный макет. Это удобно, когда нужно дополнить обычную страницу с сайдбаром — например, добавить баннер в начало или подборку товаров в конец.

Используйте глобальные переменные beforePage и afterPage , пример для приложения Сайт:

{* Подключает утилиты темы для Сайта *}
{include "{$wa->site->themePath(vega)}utils.html"}

...

<h1>Привет, мир!</h1>

...

{capture assign="content"}
    <!-- Код блоков, элементов или ваша HTML разметка, который нужно добавить ПЕРЕД контентом -->
{/capture}
{$wa->globals("beforePage", $content)}

{capture assign="content"}
    <!-- Код блоков, элементов или ваша HTML разметка, который нужно добавить ПОСЛЕ контента -->
{/capture}
{$wa->globals("afterPage", $content)}

Флаг userCode здесь не нужен — стандартная разметка страницы и сайдбар остаются нетронутыми.