docs.modx.pro
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
Зависимости
  1. Компоненты
  2. PageBuilder
  3. Вывод на сайте

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

Шаблон ​

Сниппет PageBuilder вставляют в шаблон или в поле content. Вызов некэшированный:

modx
[[!PageBuilder]]
fenom
{'!PageBuilder' | snippet}

Опубликованные секции рендерятся через Fenom chunks в core/components/pagebuilder/elements/chunks/. Имя chunk совпадает с полем chunk в JSON типа: pagebuilder_hero, pagebuilder_cta, для Pro — pagebuilderpro_{key}. FenomSectionRenderer буферизует вывод чанка: exception FetchIt или Fenom не оставляет обрезанный HTML на странице.

CSS ​

По умолчанию сниппет регистрирует:

  • pagebuilder-sections.css: базовые стили секций Free
  • при Pro и интерактивных секциях подключается pagebuilder-sections.js (tabs, carousel)

Отключить глобально: pagebuilder_load_frontend_css = 0. На одном вызове: &load_css=0``.

Обёртка страницы <div class="pb-page"> управляется wrap_page (по умолчанию совпадает с load_css).

Токены, BEM и Fenom-оболочка: Дизайн-система.

Кеш HTML ​

Параметр use_cache=1 (по умолчанию) кеширует итоговый HTML в MODX. После публикации секций сбросьте кеш сайта или временно вызовите с use_cache=0.

События pbOnBeforeRenderDocument и pbOnBeforeRenderSection вызываются только при промахе кеша (когда HTML ещё не закэширован).

Фильтр секций ​

Параметр section_types ограничивает вывод списком ключей:

modx
[[!PageBuilder? &section_types=`hero,cta`]]
fenom
{'!PageBuilder' | snippet : ['section_types' => 'hero,cta']}

Удобно, если нужны фрагменты страницы в разных местах шаблона.

JSON вместо HTML ​

return_values=1 возвращает JSON с извлечёнными значениями полей (plainText, структура sections). Подходит для headless-сценариев или своего шаблонизатора. Срабатывает pbOnGetValues.

Видимость секций ​

В settings секции можно задать:

  • contexts: список ключей контекста MODX (текущий контекст запроса)
  • utm: правила по UTM из $_SESSION['utm'] после PageBuilderUtmSession

В Pro при флаге conditions добавляется settings.conditions (loggedIn, guest, context, GET-параметры и др.). Проверка идёт через SectionVisibility и событие pbOnCheckSectionVisibility.

Секция не попадает в HTML, если правило не выполнено.

В менеджере эти блоки открывает диалог Видимость (pagebuilder_inspector_visibility_enabled). См. Рабочий процесс.

Responsive на сайте ​

При pagebuilder_responsive_apply=manual (по умолчанию) на сайт уходит одно значение breakpoint: query ?pb_bp= или pagebuilder_default_breakpoint.

При css в HTML попадают все значения. Pro-рендер оборачивает их в <span class="pb-rv"> с data-pb-bp, стили media query подключаются автоматически. В chunk для таких полей:

fenom
{$title|pb_text}

pb_text пропускает разметку .pb-rv и экранирует обычный текст. Не заменяйте его на |escape, иначе сломается CSS-режим.

Схема поля и JSON: Обзор полей → responsive. Настройки: Системные настройки → Responsive.

Превью черновика ​

Публичный сайт показывает только опубликованную версию. Черновик смотрят через менеджер (кнопка Preview) или URL:

{assets_url}components/pagebuilder/preview.php

Токен подписывается pagebuilder_preview_secret. В iframe подключаются CSS шаблона (pagebuilder_preview_include_template_css) и список из pagebuilder_preview_css_urls.

Кастомизация chunks ​

  1. Скопируйте chunk секции в категорию темы.
  2. Измените Fenom-разметку, сохраните имя или переопределите mapping в plugin на pbOnBeforeRenderSection.

Plugin может подменить секцию до рендера chunk через SectionRenderPipeline::replaceSection().

Связанные страницы ​