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

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


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

Файлы темы Proxima

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

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

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

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

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

Для кода, который должен сохраняться между обновлениями, используйте два специальных файла в корне темы: 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(proxima)}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/800x430.png" alt="Баннер">

add_svg — вставляет SVG-файл из папки img/svg/ темы инлайново. Кеширует содержимое SVG в сессии для повторного использования. Принимает имя файла без расширения.

{* Вставляет img/svg/arrow.svg как инлайн SVG *}
{call add_svg svg="arrow" class="icon-arrow"}

highlight_string — выделяет части текста специальной разметкой. Текст в квадратных скобках [слово] оборачивается в <span class="is-marked"> , символ звёздочки * заменяется на <span class="check-mark"> .

{* [Слово] → <span class="is-marked">, * → <span class="check-mark"> *}
{call highlight_string string='* Доставка по [всей России] бесплатно'}

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/800x430.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(proxima)}utils.html"}

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

{* Параметры блока *}
{$props = [
    'paddings' => '',
    'color_scheme' => 'primary',
    'boxed' => '1',
    'gradient' => '',
    'title' => [
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing.',
        'size' => 'big, H2',
        'align' => 'center',
        'color_scheme' => 'primary',
        'width' => '1500',
        'animation' => 'split-words',
        'gap' => '1'
    ],
    'image' => 'img/placeholders/120x120-user.png',
    'name' => 'John Smith',
    'description' => 'Sales agent, Manager',
    'show_email' => '1',
    'show_phone' => '1',
    'show_whatsapp' => '',
    'show_telegram' => '1',
    'show_max' => '',
    'button' => [
        '1' => [
            'mode' => 'feedback',
            'url' => '#',
            'type' => 'primary',
            'size' => 'large',
            'width' => 'narrow',
            'text' => 'Feedback form',
            'arrow' => '1',
            'anchor' => '1',
            'animation' => '',
            'gap' => ''
        ]
    ]
]}

{* Утилита, добавляющая блок с параметрами выше *}
{call add_block block="cta" props=$props}
{* Подключает утилиты темы для Фото *}
{include "{$wa->photos->themePath(proxima)}utils.html"}

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

{* Параметры блока *}
{$props = [
    'id' => '',
    'align' => 'center',
    'dimming' => '1',
    'fullscreen' => '',
    'background' => 'img/placeholders/2200x1220.png',
    'mobile_background' => 'img/placeholders/480x860.png',
    'title' => [
        'align' => 'center',
        'color_scheme' => 'inverse',
        'scheme_adaptive' => '',
        'animation' => 'split-words',
        'size' => 'huge, H1',
        'text' => 'Заголовок главного экрана'
    ],
    'button' => [
        '1' => [
            'mode' => 'link',
            'url' => '#',
            'type' => 'primary',
            'width' => 'narrow',
            'gap' => '',
            'text' => 'Подробнее',
            'ymtarget' => ''
        ],
        '2' => [
            'mode' => 'link',
            'url' => '#',
            'type' => 'primary',
            'outlined' => '1',
            'width' => 'narrow',
            'gap' => '',
            'text' => 'Смотреть работы',
            'ymtarget' => ''
        ]
    ],
    'step' => []
]}

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

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

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

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

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

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

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

  • На одной странице можно разместить несколько одинаковых блоков — например, два блока mainscreen. Главное, чтобы у каждого было уникальное значение свойства id: 'mainscreen1' , 'mainscreen2' и т.д. Если задать одинаковый 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:

{* Подключает утилиты темы Proxima *}
{include "{$wa->site->themePath(proxima)}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 код, но и другие элементы темы. При желании можно создать несколько колонок. Пример:

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

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

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

    {* Элемент «Текст» *}
    {$props = [
        'content' => '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 pariatur quaerat qui ratione repudiandae rerum sequi velit vero vitae? Ab consectetur cumque cupiditate dignissimos doloribus eius facere impedit natus obcaecati qui quis reprehenderit ut voluptas?',
        'size' => 'medium',
        'color_scheme' => 'primary',
        'scheme_adaptive' => '',
        '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',
        'outlined' => '',
        'size' => 'large',
        'width' => 'wide',
        'text' => 'Show more',
        'ymtarget' => '',
        'anchor' => '1',
        'arrow' => '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' => 'primary',
        'scheme_adaptive' => '1',
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit Accusamus alias aliquid animi aut consequatur distinctio dolore.',
        'image' => 'img/placeholders/120x120-user.png',
        'name' => 'John Smith',
        'description' => 'Sales agent, Manager',
        'gap' => '1',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="review/`$props.template`" props=$props}
{/capture}

{* Элемент «Рамка» *}
{call add_element element="frame" props=[
    'paddings' => '',
    'color_scheme' => 'primary',
    'content' => [$left, $right],
    'columns' => 'two'
]}

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

Свойство Тип данных Описание
paddings String Верхний и нижний отступы через запятую. Пример: 20,60. Допустимые значения: 10, 20, 30, 40, 50, 60, 70, 80, 90. Оставьте пустым для использования стандартных отступов.
color_scheme String Цветовая схема: 'primary', 'secondary', 'semitone', 'inverse'.
content String|String[] HTML-контент элемента. Для нескольких колонок передайте массив строк: [$col1, $col2].
columns String Количество колонок: 'one', 'two', 'three', 'four'. Необязательное свойство.
full_height Boolean Растягивает элемент на всю высоту экрана.
container String HTML-тег обёртки. По умолчанию 'section'.
attributes Object Дополнительные HTML-атрибуты элемента.
classes String[] Дополнительные CSS-классы.

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

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

{* Подключает утилиты темы Proxima *}
{include "{$wa->site->themePath(proxima)}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
]}

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

Свойство Тип данных Описание
size String Размер элемента. Значения: 'small', 'medium'.
content String Контент элемента, допускается использование HTML.
width String Максимальная ширина блока в пикселях. Переопределяет size.
attributes Object Дополнительные HTML-атрибуты элемента. Необязательное свойство.
classes String[] Дополнительные CSS-классы элемента. Необязательное свойство.

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

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

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

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

...

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

...

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

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

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