docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Pricing table

Pricing table ​

Price table for subscriptions and service tiers. Each plan has a name, price, billing period, and plain-text feature list.

Pricing table

Информация

Requires PageBuilder Pro.

Why a pricing table ​

  • Multiple plans in one section
  • Feature list as plain text, one line per item
  • Price and button per plan

Typical pages ​

  • SaaS: three tiers on pricing page
  • Services: Starter / Business / Enterprise packages
  • Landing: block before the lead form

Page examples ​

Pricing repeater ​

Plans repeater. Features is plain text, one line per feature. Set the plan button via row button fields.

Similar sections ​

Block parameters ​

ParameterValue
keypricing_table
LayerPro
Categoryconversion (conversion)
Chunkpagebuilderpro_pricing_table
Requirespro

Inspector fields ​

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

Title (title) ​

Type text. Optional.

Plans (items) ​

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

FieldTypeLabelRequired
nametextPlan nameyes
pricecurrencyPriceyes
periodtextBilling periodno
descriptiontextareaDescriptionno
featurestextareaFeatures (one per line)no
button_labeltextCTA labelno
button_urlurlCTA URLno
highlightedyesnoHighlighted planno
badgetextBadgeno

Site output ​

pb-pricing with plan cards.

Section data ​

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

json
{
  "title": "Section title",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "name": "Jane Doe",
      "price": 990,
      "period": "per month",
      "description": "Short block description for the first screen.",
      "features": "Unlimited projects\nPriority support\nAPI access",
      "button_label": "Learn more",
      "button_url": "https://example.com/action",
      "highlighted": true,
      "badge": "Text"
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilderpro_pricing_table:

fenom
<section class="pb-section pb-section--pricing-table pb-pricing-table{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="pricing_table"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-pricing-table__inner">
    {if $title}
      <h2 class="pb-heading pb-pricing-table__title">{$title|escape}</h2>
    {/if}
    <div class="pb-pricing-table__grid pb-grid pb-grid--cards">
      {foreach $items as $item}
        <article class="pb-pricing-table__plan{if $item.highlighted} pb-pricing-table__plan--highlight{/if}">
          {if $item.badge}
            <span class="pb-pricing-table__badge">{$item.badge|escape}</span>
          {/if}
          <h3 class="pb-pricing-table__name">{$item.name|escape}</h3>
          {if $item.description}
            <p class="pb-pricing-table__description">{$item.description|escape}</p>
          {/if}
          <p class="pb-pricing-table__price">
            <span class="pb-pricing-table__amount">{$item.price|escape}</span>
            {if $item.period}
              <span class="pb-pricing-table__period">{$item.period|escape}</span>
            {/if}
          </p>
          {if $item.features_list}
            <ul class="pb-pricing-table__features">
              {foreach $item.features_list as $feature}
                <li>{$feature|escape}</li>
              {/foreach}
            </ul>
          {elseif $item.features}
            <ul class="pb-pricing-table__features">
              {foreach $item.features|split:"\n" as $feature}
                {if $feature|trim}
                  <li>{$feature|trim|escape}</li>
                {/if}
              {/foreach}
            </ul>
          {/if}
          {if $item.button_label && $item.button_url}
            <a class="pb-button pb-pricing-table__cta" href="{$item.button_url|pb_href|escape}">{$item.button_label|escape}</a>
          {/if}
        </article>
      {/foreach}
    </div>
  </div>
</section>

See also ​