docs.modx.pro

English

Русский

English

Русский

Appearance

  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Promo banner

Promo banner ​

Wide promo block: title, text, CTA, background, and optional miniShop3 product card.

Информация

Requires PageBuilder Pro and miniShop3.

Promo between storefronts ​

  • Copy, background, CTA like hero but compact
  • Optional miniShop3 product tie-in
  • Seasonal promos between showcases

Promo scenarios ​

  • Seasonal sale on homepage
  • New arrival linking to product page
  • Banner between catalog sections

Page examples ​

Copy, button, product ​

Set copy and button. Product is optional: chunk may render a mini card.

Similar sections ​

  • Hero for above-the-fold
  • CTA without background or product

Block parameters ​

ParameterValue
keypromo_banner
LayerPro
Categorycommerce (commerce)
Chunkpagebuilderpro_promo_banner
Requirespro, minishop3

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Required.

Text (text) ​

Type textarea. Optional.

Button label (button_label) ​

Type text. Optional.

Button URL (button_url) ​

Type url. Optional.

Background (background) ​

Type image. Optional.

Product (product) ​

Type relation. Optional. Pick one MODX resource in a search modal.

Site output ​

pb-promo-banner with CTA and optional product.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "text": "Supporting text under the title.",
  "button_label": "Learn more",
  "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 template ​

Fenom chunk pagebuilderpro_promo_banner:

fenom
{var $promoBg = is_array($background) ? ($background.url ?: '') : ($background ?: '')}
{var $productId = $pb_product_resource|default:($product_id|default:0)}
{var $listing = ''}
{if $productId}
  {var $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|escape}">{$button_label|escape}</a>
    {/if}
  </div>
</section>

JSON definition ​

PageBuilderPro/core/components/pagebuilderpro/sections/promo_banner.json

See also ​