
PageBuilder
Visual section builder for MODX 3: draft and publish without overwriting resource content
- MODX 3
- PHP 8.2
- Vue 3


On a product page, shows other SKUs from the same (or chosen) category except the current resource.

Информация
Requires PageBuilder Pro and miniShop3.
Category, Exclude product (current), Limit. Best on product resource context. The type is marked "cacheable": false.
| Parameter | Value |
|---|---|
| key | related_products |
| Layer | Pro |
| Category | Commerce (commerce) |
| Chunk | pagebuilderpro_related_products |
| Requires | pro, minishop3 |
Field types: field types reference.
title) Type text. Optional.
parent) Type relation. Required. Pick one MODX resource in a search modal.
product) Type relation. Optional. Pick one MODX resource in a search modal.
limit) Type number. Optional.
sortby) Type select. Optional. Dropdown with predefined options.
pb-related-products grid via msProducts.
Example payload after save:
{
"title": "Section title",
"parent": 101,
"product": 201,
"limit": 6,
"sortby": "menuindex"
}Fenom chunk pagebuilderpro_related_products:
{set $catalogParent = $parent.id|default:($parent_id|default:0)}
{set $excludeId = $product.id|default:($product_id|default:0)}
{set $listing = ''}
{if $catalogParent}
{set $listing = $modx->runSnippet('msProducts', [
'parents' => $catalogParent,
'depth' => 10,
'limit' => $limit|default:4,
'tpl' => 'pagebuilderpro_ms3_product_row',
'includeVendorFields' => '*',
'includeOptions' => 'color,size',
'withCurrency' => 1,
'showZeroPrice' => 1,
'resources' => ($excludeId > 0) ? ('-' ~ $excludeId) : '',
'sortby' => $ms_sortby|default:'msProduct.menuindex',
'sortdir' => $ms_sortdir|default:'ASC'
])}
{/if}
<section class="pb-section pb-section--related-products pb-related-products pb-listing{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="related_products"{if $id} id="pb-{$id|escape}"{/if}>
<div class="pb-section__inner">
{if $title}
<h2 class="pb-heading">{$title|escape}</h2>
{/if}
{if $listing}
<div class="pb-listing__grid">
{$listing}
</div>
{else}
<p class="pb-listing__empty">{'pagebuilder_fe_listing_empty_related' | lexicon}</p>
{/if}
</div>
</section>