docs.modx.pro
  1. Компоненты
  2. PageBuilder
  3. Начало работы
  4. Ключевые возможности

Ключевые возможности ​

PageBuilder собирает страницу из блоков-секций, а не из поля Содержимое ресурса. Редакторы работают во вкладке Секции: черновик, превью, публикация. Разработчики добавляют свои типы секций, поля и шаблоны вывода, подключаются через события pbOn*.

Для кого ​

РольЧто получает
РедакторDrag-and-drop секций, инспектор полей, черновик, превью, публикация без правки шаблона
Начинающий разработчик35 готовых секций, 51 тип полей, JSON-схема и Fenom в chunks без своего Vue
Опытный разработчикСобытия, свои типы секций, табличные данные ресурса, UTM, интеграция с miniShop3 и Collections

Конструктор страницы ​

1. Редактор секций на ресурсе ​

Вкладка Секции на форме ресурса и в панели управления PageBuilder использует один Vue-бандл через VueTools. Вы добавляете секции из каталога, меняете порядок перетаскиванием или Alt+↑/↓, дублируете и копируете блоки между ресурсами. Если закрыли инспектор Отмена сразу после добавления секции, черновик откатывается: пустой блок на странице не остаётся.

Подробнее: Быстрый старт, Менеджер и события.

2. Черновик и публикация ​

Autosave пишет черновик. Превью показывает его без публикации. Сохранить ресурса MODX проверяет поля и публикует раскладку на сайт. Сниппет [[!PageBuilder]] выводит только опубликованную версию.

Подробнее о хранении: Рабочий процесс, Разработчик → Модель данных.

3. Каталог секций Free и Pro ​

СлойСекцийПримеры
Free11hero, richtext, gallery, faq, cta
Pro24products_grid, contact_form, quiz, pricing_table, tabs

У каждой секции своя страница в каталоге: зачем блок, где применять, что заполнить в инспекторе, похожие секции.

4. Инспектор и 51 тип полей ​

Схема полей задаётся в JSON секции: 31 тип Free (text, repeater, migx, editorjs, image, multiselect, video…) и 20 Pro (relation, gallery, combo, embeddedTable…). У каждого типа есть справочная страница с блоками «Зачем», «Когда использовать», «Советы».

См. Обзор полей и справочник типов.

PageBuilder Pro ​

Дополнение pagebuilderpro добавляет флаги Pro и расширяет редактор:

  • Общие блоки: сохранить как shared (сразу link), pull с другой страницы (Связать | Копировать), локальные поля libraryLocalFields
  • Журнал событий секции: View / Restore (capability versions)
  • Шаблоны страниц: упорядоченные пустые секции (pb_page_templates)
  • Примеры: готовые блоки во вкладке каталога (pagebuilder_catalog_examples_enabled)
  • Поля по breakpoints: UI при pagebuilder_responsive_editor_enabled, вывод pagebuilder_responsive_apply (manual или css)
  • Расширенные поля: 20 типов в панели управления (relation, map, table, dependent и др., флаг advanced-fields)
  • Глобальная корзина в панели управления: восстановление и окончательное удаление секций и строк таблиц (флаг basket)

Commerce-секции (products_grid, curated_products…) требуют miniShop3.

Подробнее: PageBuilder Pro, Agent API для скриптов и агентов.

Данные и интеграции ​

5. Табличные данные ресурса ​

Вкладка Таблицы на ресурсе хранит строки в pb_*: фильтры, пагинация, импорт CSV/JSON, корзина строк. Секция data_table и сниппет PageBuilderTableRows выводят данные на сайте. Поле embeddedTable подключает таблицу по table_key без встроенных строк в JSON документа.

6. UTM и контексты ​

UTM registry в панели управления, правила видимости секций по меткам и контексту MODX. Диалог Видимость в инспекторе включается настройкой pagebuilder_inspector_visibility_enabled. Плейсхолдер {{utm:key}} в полях. Сниппеты PageBuilderUtmSession и PageBuilderUtmUrl для сессии и ссылок.

7. Collections ​

При включённых настройках pagebuilder_collections_* на ресурсе появляются вкладки Collections с iframe. Редактор секций и коллекции оказываются на одной форме.

8. Корзина и undo ​

Корзина на странице есть в Free. Глобальная корзина в панели управления доступна в PageBuilder Pro (флаг basket). В редакторе работают отмена и повтор действий. Секции копируют между ресурсами без ручной правки JSON.

Вывод на сайте ​

9. Fenom и chunks секций ​

Каждая секция рендерится через chunk с Fenom (pdoTools). Данные полей лежат в section.data. Примеры MODX и Fenom смотрите на страницах полей и в разделе Вывод на сайте.

10. Сниппеты ​

СниппетНазначение
PageBuilderHTML опубликованных секций
PageBuilderResourceСекции другого ресурса
PageBuilderSitemapXML sitemap по страницам с секциями
PageBuilderTableRowsСтроки табличных данных ресурса
PageBuilderUtmSession / PageBuilderUtmUrlUTM на фронте
PageBuilderQuiz / PageBuilderContactFormFetchIt-handlers Pro (quiz, contact_form; из шаблона не вызываются)
Public APIJSON опубликованных секций для headless (api.php)

Полный список: Сниппеты.

11. События pbOn* ​

Plugin подписывается на save, publish, render, регистрацию типов секций и провайдеров Pro. Точка расширения без правок ядра компонента.

Список событий: События.

Системные требования ​

MODX Revolution3.0.3+
PHP8.2+
VueTools1.1.2+
pdoTools3.0+
miniShop3опционально, для Pro commerce-секций

Namespace в MODX: pagebuilder. Pro ставится дополнением pagebuilderpro (ядро Free подтягивается как зависимость).

С чего начать ​

  1. Установка и первый ресурс
  2. Системные настройки
  3. Каталог секций
  4. FAQ