docs.modx.pro

English

Русский

English

Русский

Appearance

  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Curated products

Curated products ​

Unlike Products grid, no single category: you pick exact product IDs in multirelation.

Информация

Requires PageBuilder Pro and miniShop3.

How it differs from the grid ​

  • Exact SKU list, order follows multirelation
  • Not tied to one category
  • Same card markup as grid

Curated scenarios ​

  • "Recommended" on homepage
  • New arrivals: manual list without category filter
  • Bundle on a landing page

Page examples ​

Product multirelation ​

Products multirelation: selection order is kept. Limit is the number of picked items.

Similar sections ​

Block parameters ​

ParameterValue
keycurated_products
LayerPro
Categorycommerce (commerce)
Chunkpagebuilderpro_curated_products
Requirespro, minishop3

Inspector fields ​

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

Title (title) ​

Type text. Optional.

Products (products) ​

Type multirelation. Required. Pick multiple resources. JSON stores resource IDs.

Intro (intro) ​

Type textarea. Optional.

Site output ​

pb-curated-products grid from multirelation IDs.

Section data ​

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

json
{
  "title": "Section title",
  "products": [
    201,
    202,
    203
  ],
  "intro": "Short intro before the main content."
}

Chunk template ​

Fenom chunk pagebuilderpro_curated_products:

fenom
{var $resourceIds = $curated_product_ids|default:''}
{var $listing = ''}
{if $resourceIds}
  {var $listing = $modx->runSnippet('msProducts', [
    'parents' => 0,
    'resources' => $resourceIds,
    'limit' => 12,
    'tpl' => 'pagebuilderpro_ms3_product_row',
    'includeVendorFields' => '*',
    'includeOptions' => 'color,size',
    'withCurrency' => 1,
    'showZeroPrice' => 1
  ])}
{/if}
<section class="pb-section pb-section--curated-products pb-curated-products pb-listing{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="curated_products"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner">
    {if $title}
      <h2 class="pb-heading">{$title|escape}</h2>
    {/if}
    {if $intro}
      <p class="pb-listing__intro">{$intro|escape}</p>
    {/if}
    {if $listing}
      <div class="pb-listing__grid">
        {$listing}
      </div>
    {else}
      <p class="pb-listing__empty">Select products in the section inspector.</p>
    {/if}
  </div>
</section>

JSON definition ​

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

See also ​