К содержимому
Параметры, хуки и интеграции

Собственные блоки и варианты

Обновлено

Готовые секции Slate можно использовать не только на главной: например, собрать страницу услуги из первого экрана, списка работ, прайса, отзывов и формы. Сначала попробуйте обычные настройки и готовые блоки из справочника. Если нужна собственная структура, поручите вставки или доработку разработчику: здесь используются шаблоны Smarty, а не визуальное перетаскивание секций.

Вставка блоков в содержимое страницы

Откройте страницу в Сайт → Страницы и переключите редактор содержимого в режим HTML. Тема поддерживает несколько вставок на одной странице; обычные абзацы между ними сохраняются. Тот же механизм предусмотрен для информационных страниц магазина.

Пример первого экрана и списка работ:

{include "{$wa->site->themePath(waRequest::getTheme())}u-blocks.html" blocks=[
    ["block" => "page-hero", "props" => [
        "title" => "Ремонт квартиры",
        "lead" => "Поможем составить план и оценить работы",
        "image" => "/wa-data/public/site/remont.webp"
    ]],
    ["block" => "checklist", "props" => [
        "title" => "Что входит",
        "columns" => 2,
        "items" => ["Обмер помещения", "Подготовка сметы", "Согласование графика"]
    ]]
]}

Укажите адрес реально загруженного изображения. block выбирает секцию, props передаёт её содержимое, variant при необходимости выбирает готовый вид. Имена блоков и поддерживаемые поля различаются: произвольное поле не создаст новый элемент автоматически.

Для одиночной вставки достаточно короткой записи:

{include "{$wa->site->themePath(waRequest::getTheme())}u-blocks.html"
    block="faq"
    props=["title" => "Частые вопросы", "items" => [
        ["q" => "Как получить смету?", "a" => "<p>Оставьте заявку на консультацию.</p>"]
    ]]
}

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

Заголовки, содержимое и повторные вставки

Заголовок страницы над блоками печатается всегда — и тогда, когда страница начинается с page-hero: сам блок его не прячет. Чтобы заголовком страницы стал заголовок первого экрана, задайте странице дополнительный параметр hide_title=1, а у блока — явный тег "title_tag" => "h1" (у page-hero он по умолчанию). Без hide_title=1 на странице окажется два заголовка первого уровня. В остальных секциях для скрытия общей шапки блока предусмотрено "head" => false в записи массива blocks.

Параметры вставки имеют преимущество перед настройками главной в тех полях, которые поддерживает конкретный блок. У нескольких блоков передача собственного списка items также убирает подзаголовок с главной; заголовки и дополнительные поля лучше задавать явно. Не предполагайте, что весь блок автоматически отвязан от главной: например, примечание тарифа или общая кнопка могут продолжать брать значение из настроек, если их не переопределить.

Для простых вставок удобны page-hero, text, checklist, features, steps, faq, listing, plans, callout и offices. У offices форма «Заявок» под контактами выводится только при "form" => true (форма берётся из настройки блока) или явном "form_id"; "form_id" => 0 её скрывает. Блоки блога и фотографий продолжают требовать соответствующее приложение и источник. Каталог, товары и промоакции требуют магазина. Для страниц «Сайта» есть отдельный блок категорий catalog — три вида, выбор и исключение категорий, мини-карточки на телефоне; его настройки — в «Страницы → Каталог», и от блока «Каталог» главной он не зависит:

{include "{$wa->site->themePath(waRequest::getTheme())}u-blocks.html" block="catalog"}

Галерея и покупка товара рассчитаны на страницу товара: одного указания имени блока недостаточно.

Если кнопка должна открыть форму, используйте адрес form:<номер вашей формы> в поддерживаемом поле ссылки. Форма должна существовать в приложении «Заявки»; номер из чужого демо не подходит. Перед запуском проверьте открытие окна на компьютере и телефоне. Поля формы редактируются в «Заявках», а внешний вид — в теме. Подробнее — формы и заявки.

Когда нужен собственный блок

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

Все доработки размещайте в custom/ активной site-темы, в том числе для страниц магазина. Не редактируйте базовые html/, CSS и JS поставки: обновление темы заменяет эти файлы. Если на сайте есть отдельная пользовательская копия темы, работайте с ней, а не с исходником установленного пакета. До изменения сохраните копию пользовательских файлов. Разработчик должен также зарегистрировать новые файлы как пользовательские в манифесте копии темы (custom="1"). Если пришлось изменить файл поставки, ему нужен другой признак — modified="1", иначе автоматическое обновление может перезаписать правку. Порядок действий — в статье об обновлениях.

Минимальная структура своего блока:

custom/blocks/service-note/data.html
custom/blocks/service-note/01-default.html
custom/css/service-note.css
custom/head.html

В data.html подготовьте данные и назначьте вариант по умолчанию:

{$node_default = "01-default"}
{$node_data = [
    "title" => $props.title|default:"Перед началом работ",
    "text" => $props.text|default:""
]}

В 01-default.html находится разметка; она получает $data и $props:

<section class="s-service-note">
    <div class="s-container">
        {call block_head block="service-note" title=$data.title}
        {if $data.text != ""}
            <p class="s-service-note__text">{$data.text|escape}</p>
        {/if}
    </div>
</section>

Заголовок выводится общим компонентом block_head, как у готовых блоков: отступы и вид совпадут с остальными секциями. Он принимает также subtitle, eyebrow и ссылку справа (link, link_text), например «Показать все»; текст экранирует сам.

Подключите отдельный файл стилей через существующий custom/head.html, сохранив его остальные подключения:

{call assets file="custom/css/service-note.css"}

Используйте классы своего блока и цвета темы через CSS-переменные. Для кнопок берите общий класс s-button, для полей — s-field, для флажков и переключателей — s-check; размеры xs, sm, md, lg, xl и состояния задаёт общий набор интерфейса. Не копируйте в CSS блока базовые высоты, рамки и состояния этих элементов: иначе они перестанут следовать настройкам сайта. Для статического блока дополнительные библиотеки и JavaScript не нужны. Если нужна интерактивность, она должна соответствовать браузерам, поддерживаемым Slate.

После этого блок можно вставить через u-blocks.html с block="service-note". Чтобы поставить его на главную, разработчик добавляет запись в список «Сортировки блоков», например {"id": "service-note", "app": "site", "active": true, "name": "Памятка перед работами"}. Поле name (строка или {"ru_RU": "…", "en_US": "…"}) — подпись строки в панели; без него строка подписывается названием раздела настроек блока, если разработчик его предусмотрел, иначе — именем блока. Дополнительные виды размещаются рядом, например 02-compact.html, и выбираются параметром variant. Необязательный _bare.html служит запасным вариантом. В самих файлах блока подключать utils.html повторно не нужно.

Подмена готового блока и целой страницы

Для изменения одного вида существующего блока можно положить файл с его именем в custom/blocks/<имя>/<вариант>.html. Для полной подмены разметки узла существует custom/blocks/<имя>.html: такой файл имеет преимущество перед выбранным видом. Данные готового блока сохраняются, пока отдельно не заменён его data.html. При замене данных сохраните все поля, которые использует разметка.

Разработчик может собрать отдельный шаблон страницы из массива блоков и вызова render_layout. У страницы «Сайта» или магазина для этого задаётся параметр layout, а шаблон размещается в custom/site/pages/<значение>.html. Файл начинается с подключения utils.html. Это отдельный способ оформления всей страницы, а не обязательный шаг для обычных вставок между абзацами.

Подмена главной через custom/site/home.html или custom/shop/home.html сильнее её обычной раскладки. В таком шаблоне порядок задаёт разработчик; владельцу нужно заранее согласовать, какие настройки панели продолжат действовать. При копировании базовой страницы необходимо убрать обёртку её собственной подмены, чтобы не получить рекурсивное подключение. На главной магазина нужно сохранить вызов frontend_homepage, иначе исчезнет содержимое сторонних плагинов.

Данные, обновления и проверка

Для нескольких текстовых карточек удобнее передавать содержимое во вставке. Большие списки разработчик может хранить в отдельном файле данных, а материалы, которым нужен полноценный редактор, — в приложении. Шаблоны работают под ограничениями безопасности Smarty: произвольные PHP-функции и прямое чтение через file_get_contents здесь недоступны. Нельзя переносить любой пример PHP в шаблон без проверки.

После доработки проверьте страницу без прав администратора, оба цветовых режима, ширину телефона, ссылки, открытие форм и отсутствие повторных заголовков. Отдельно проверьте пустой источник данных. При обновлении темы пользовательские файлы обычно остаются, но продолжают заменять обновлённую базовую разметку: разработчик должен сверить их с изменившимся контрактом блока. Храните перечень таких подмен и резервную копию вместе с документацией сайта.