docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Categories row

Categories row ​

Catalog navigation: child categories of a parent with thumbnail and link.

Categories row

Информация

Requires PageBuilder Pro and miniShop3.

Why a categories row ​

  • Subcategories from msCategory via pdoResources
  • Catalog navigation without hand-built menus
  • Thumbnails and links from resources

Catalog navigation ​

  • Catalog homepage: top sections
  • Parent category page: subcategories
  • Landing: department showcase

Page examples ​

Parent and limit ​

Parent category and Limit. Resources must be msCategory.

Similar sections ​

Block parameters ​

ParameterValue
keycategories_row
LayerPro
Categorycommerce (commerce)
Chunkpagebuilderpro_categories_row
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.

Parent category (parent) ​

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

Limit (limit) ​

Type number. Optional.

Site output ​

Horizontal pb-categories-row.

Section data ​

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

json
{
  "title": "Section title",
  "parent": 101,
  "limit": 6
}

Chunk template ​

Fenom chunk pagebuilderpro_categories_row:

fenom
{set $catalogParent = $parent.id|default:($parent_id|default:0)}
{set $listing = ''}
{if $catalogParent}
  {set $listing = $modx->runSnippet('pdoResources', [
    'parents' => $catalogParent,
    'depth' => 1,
    'limit' => $limit|default:8,
    'where' => ['class_key' => 'MiniShop3\\Model\\msCategory'],
    'tpl' => 'pagebuilderpro_ms3_category_row'
  ])}
{/if}
<section class="pb-section pb-section--categories-row pb-categories-row{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="categories_row"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-categories-row__inner">
    {if $title}
      <h2 class="pb-heading">{$title|escape}</h2>
    {/if}
    {if $listing}
      <div class="pb-categories-row__grid pb-grid">
        {$listing}
      </div>
    {else}
      <p class="pb-listing__empty">{'pagebuilder_fe_listing_empty_category' | lexicon}</p>
    {/if}
  </div>
</section>

See also ​