Конструктор страниц в «Сайте»: создание блоков-плагинов и интеграция для тем дизайна

Начиная с версии 3.2.0 в премиум-редакции приложения «Сайт» появился визуальный конструктор страниц. Страницы в конструкторе собираются из готовых блоков и элементов, в каждом из которых есть много разных настроек.

Такие блочные страницы могут взаимодействовать с плагинами и темами дизайна.

Плагины

В конструкторе страниц есть некоторый стандартный набор блоков — крупных: например, основное содержимое, меню, баннеры, подвал и более мелких: например, абзац текста, кнопка, список, изображение, форма и т. д.

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

Создание плагина со своими блоками

Проще всего использовать в качестве образца простой плагин exampleblock, исходный код которого мы опубликовали на GitHub. В коде плагина есть подробные комментарии — они помогут разобраться.

Устройство подобного плагина выглядит так: обработчик хука blockpage_blocks должен вернуть массив со списком новых блоков и элементов, которые должны появиться в конструкторе страниц. Каждый элемент массива должен представлять собой подмассив со следующими ключами:

title: Локализованное название блока или элемента.
block_type_class: Имя PHP-класса, если нужно реализовать полностью индивидуальный блок. Этот класс должен быть унаследован от базового класса siteBlockType.

В поддиректории templates/ внутри папки с файлом этого класса должен находиться файл с HTML-/Smarty-шаблоном для формирования содержимого блока. Посмотрите в примере на GitHub, как надо составить имя файла с шаблоном, чтобы он подключился к классу.
block_type: Экземпляр класса, унаследованного от siteBlockType (или любого его наследника). Используйте этот ключ массива вместо 'block_type_class', если нужно создать собственный блок на основе уже существующего. В конструктор класса можно передавать разные параметры, чтобы задать какие-то стартовые настройки для этого блока. Например, размер шрифта или цвет фона.
data: Экземпляр класса siteBlockData с данными для заполнения блока каким-то стартовым содержимым: текстом, HTML-кодом, изображениями и т. п. Именно с этим стартовым содержимым каждый новый экземпляр блока добавляется пользователем на страницу. В поле block_type этого объекта должен быть указан экземпляр класса, унаследованного от siteBlockType (или любого его наследника) — так же, как при использования ключа 'block_type', который описан выше.

Можно использовать этот ключ вместо 'block_type_class' или 'block_type', если удобно формировать стартовое содержимое прямо в обработчике хука, — например, если оно сравнительно простое и имеет небольшой размер.
tags: Массив идентификаторов категорий, внутри которых пользователь будет находить ваш блок в диалоге добавления нового блока на страницу.

Каждый блок может быть доступен внутри одной или нескольких категорий, например, массив ['category_main_page', 'category_advantages'] сделает блок доступным внутри категорий «Главный экран» и «Преимущества». Список всех доступных категорий можно посмотреть в исходном коде класса siteBlockCategories.

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

Вместе со значением 'element' в этом массиве можно указывать также дополнительные произвольные значения — чтобы разместить элемент не в основном списке элементов, а в вашем собственном выпадающем подменю внутри этого списка. В этом случае к списку значений нужно также добавить строку 'hidden', если нужно, чтобы элемент был всегда доступен только в выпадающем меню и не был доступен в основном списке. Об этом подробнее расскажем ниже.
icon: CSS-класс иконки Font Awesome, которую нужно показать рядом с названием блока-элемента (например, 'fas fa-user' или просто 'user'). Для основных структурных блоков не используется.
app_icon: Относительный путь (от корневой директории фреймворка) к файлу иконки, которую нужно показать рядом с названием блока-элемента вместо иконки Font Awesome. Для основных структурных блоков не используется.

Добавление своих подменю в список выбора элементов

Плагин может также добавить свои подменю в выпадающий список выбора элементов.

Для этого нужно в обработчике хука blockpage_elements_list вернуть в виде массива список с информацией о своих дополнительных подменю. Каждый элемент списка соответствует отдельному подменю и должен представлять собой подмассив со следующими ключами:

title: Локализованное название подменю.
icon: CSS-класс иконки Font Awesome, которую нужно показать рядом с названием подменю (например, 'fas fa-user' или просто 'user').
app_icon: Относительный путь (от корневой директории фреймворка) к файлу иконки, которую нужно показать рядом с названием подменю вместо иконки Font Awesome.
tags: Массив произвольных строковых значений («тегов»), все из которых должны совпасть с такими же «тегами» в свойствах элементов, которые должны попасть в это подменю.

Допустим, в обработчике хука blockpage_blocks вы добавили свой элемент с такими значениями в ключе 'tags':
```
['element','myplugin','submenu-1']
```
Напомним: значение 'element' нужно для того, чтобы элемент стал доступен в меню выбора элементов, а не основных блоков. Остальные значения в этом примере — 'myplugin' и 'submenu-1' — будут служить маркерами того, что элемент нужно разместить не в основном меню выбора элементов, а внутри выпадающего подменю вашего плагина.

Значение 'myplugin' в этом примере условное — вместо него можно написать любое другое, например, подставлять идентификатор вашего плагина с помощью $this->id:
```
['element', $this->id,'submenu-1']
```
Теперь, чтобы элемент с такими «тегами» появился в вашем подменю, в обработчике хука blockpage_elements_list в свойствах подменю нужно указать те же самые «теги» (за исключением 'element' — он служебный, указывать его для этой цели необязательно).

Код обработчика хука blockpage_elements_list, добавляющего собственное подменю с элементами, получится таким:
```
return [
    [
        'title' => _wp('My submenu #1'),
        'icon' => 'fas fa-user',
        'tags' => [$this->id,'submenu-1'],
    ],
 ];
```

Использование хелперов плагинов в блоках

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

Какой-то отдельной разработки с вашей стороны такое использование не потребует — пользователь должен сам добавить вызов хелпера вашего плагина в настройках блока. Просто имейте в виду, что такая возможность существует, и по возможности расскажите о ней в описании вашего плагина в «Инсталлере», чтобы пользователям было удобно.

Темы дизайна

Главное меню и подвал

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

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

blockpage.header.html — с содержимым главного меню;
blockpage.footer.html — с содержимым подвала.

Во многих случаях может быть достаточно просто подключить к этим файлам существующие шаблоны темы дизайна, например, как это сделано в теме «Дефолт»:

в шаблоне blockpage.header.html подключается файл header.section.html;
в шаблоне blockpage.footer.html подключается файл footer.section.html.

Простое отображение блочных страниц

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

В такой теме тоже можно отображать содержимое блочных страниц — для этого в шаблоне blockpage.layout.html подключите файл index.html по образцу:

{include file="`$wa_active_theme_path`/index.html" is_blockpage="true" content=$rendered_page_html inline}

И добавьте в index.html подключение стилей блочных страниц:

{if !empty($is_blockpage)}
    <link href="{$wa_app_static_url}css/site.min.css?v={$wa->version()}" rel="stylesheet">
{/if}

В темах дизайна, опубликованных в «Инсталлере», такой упрощённый подход мы не приветствуем, потому что в этом случае могут некорректно работать блоки главного меню и подвала.

Визуальное оформление блоков

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

Чтобы это сработало, в тему дизайна нужно добавить специальные переменные CSS в файле blockpage.wrapper.html.

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

Быстро сгенерировать нужные переменные можно с помощью специального инструмента.

Описание в «Инсталлере»

Если ваша тема дизайна уже поддерживает блочный конструктор «Сайта», расскажите об этом в её описании в «Инсталлере» — это сделает вашу тему более привлекательной и востребованной и поможет скорее рассказать пользователям о новых возможностях «Сайта».

Пишите нам, пожалуйста, в любое время в комментариях или в службу поддержки, если у вас возникнут вопросы или предложения по интеграции плагинов и тем дизайна с премиум-возможностями «Сайта».

29 апреля 2025

Добавление новых комментариев к этой теме отключено.