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

Промо-баннер ​

Широкий промо-блок: заголовок, текст, CTA, фон и опционально карточка товара miniShop3.

Промо-баннер

Информация

Требуются PageBuilder Pro и miniShop3.

Промо между витринами ​

  • Текст, фон и CTA как у hero, но компактнее
  • Optional привязка к товару MS3
  • Подходит для сезонных акций между витринами

Сценарии акций ​

  • Для сезонной распродажи на главной
  • Для новинки с переходом в карточку
  • Между секциями каталога

Примеры страниц ​

Текст, кнопка, товар ​

Заполните текст и кнопку. Товар необязателен. Если выбран, chunk может показать мини-карточку.

Похожие секции ​

  • Hero для первого экрана
  • CTA без фона и товара

Параметры блока ​

ПараметрЗначение
keypromo_banner
СлойPro
Категориямагазин (commerce)
Chunkpagebuilderpro_promo_banner
Требованияpro, minishop3

Поля в редакторе ​

Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.

Заголовок (title) ​

Тип text. Обязательное.

Текст (text) ​

Тип textarea. Необязательное.

Текст кнопки (button_label) ​

Тип text. Необязательное.

URL кнопки (button_url) ​

Тип url. Необязательное.

Фон (background) ​

Тип image. Необязательное.

Товар (product) ​

Тип relation. Необязательное. Выбор одного ресурса MODX в модальном окне поиска.

Что видит посетитель ​

Секция pb-promo-banner с CTA и optional product block.

Данные секции ​

Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:

json
{
  "title": "Заголовок секции",
  "text": "Дополнительный текст под заголовком.",
  "button_label": "Подробнее",
  "button_url": "https://example.com/action",
  "background": {
    "url": "assets/images/example.jpg",
    "id": 12,
    "filename": "example.jpg",
    "extension": "jpg",
    "title": "example.jpg",
    "width": 1920,
    "height": 1080,
    "type": "image"
  },
  "product": 201
}

Шаблон chunk ​

Fenom chunk pagebuilderpro_promo_banner:

fenom
{set $promoBg = is_array($background) ? ($background.url ?: '') : ($background ?: '')}
{set $productId = $pb_product_resource !: ($product_id !: 0)}
{set $listing = ''}
{if $productId}
  {set $listing = $modx->runSnippet('msProducts', [
    'parents' => 0,
    'resources' => $productId,
    'limit' => 1,
    'tpl' => 'pagebuilderpro_ms3_product_row',
    'includeVendorFields' => '*',
    'includeOptions' => 'color,size',
    'withCurrency' => 1,
    'showZeroPrice' => 1
  ])}
{/if}
<section class="pb-section pb-section--promo-banner pb-promo-banner{if $promoBg} pb-promo-banner--media{/if}{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="promo_banner"{if $id} id="pb-{$id|escape}"{/if}{if $promoBg} style="--pb-hero-bg: url('{$promoBg|escape}')"{/if}>
  <div class="pb-section__inner pb-promo-banner__inner">
    <h2 class="pb-heading pb-promo-banner__title">{$title|escape}</h2>
    {if $text}
      <p class="pb-promo-banner__text">{$text|escape}</p>
    {/if}
    {if $listing}
      <div class="pb-promo-banner__product">
        {$listing}
      </div>
    {/if}
    {if $button_label && $button_url}
      <a class="pb-promo-banner__button pb-button" href="{$button_url|pb_href|escape}">{$button_label|escape}</a>
    {/if}
  </div>
</section>

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