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

Brands row ​

Like Logo cloud, but can pull vendors from a catalog category automatically.

Brands row

Информация

Requires PageBuilder Pro and miniShop3.

Why a brands row ​

  • Manual list or vendors from MS3 category
  • Links into brand filter URLs
  • Tighter than product grid for logos only

Catalog scenarios ​

  • Store homepage: brands in category
  • Brands page: manual list
  • Filter promo: link to vendor

Page examples ​

Brand source ​

Source: manual repeater or Category vendors. For category_vendors, set Parent category.

Similar sections ​

Block parameters ​

ParameterValue
keybrands_row
LayerPro
Categorycommerce (commerce)
Chunkpagebuilderpro_brands_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.

Source (source) ​

Type select. Optional. Dropdown with predefined options.

Catalog parent (parent) ​

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

Limit (limit) ​

Type number. Optional.

Brands (items) ​

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

Each row:

FieldTypeLabelRequired
logoimageLogono
nametextBrand nameyes
urlurlLinkno

Site output ​

pb-brands-row.

Section data ​

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

json
{
  "title": "Section title",
  "source": "manual",
  "parent": 101,
  "limit": 6,
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "logo": {
        "url": "assets/images/example.jpg",
        "id": 12,
        "filename": "example.jpg",
        "extension": "jpg",
        "title": "example.jpg",
        "width": 1920,
        "height": 1080,
        "type": "image"
      },
      "name": "Jane Doe",
      "url": "https://example.com/brand"
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilderpro_brands_row:

fenom
{set $brands = $brand_items|default:$items}
<section class="pb-section pb-section--brands-row pb-brands-row{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="brands_row"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-brands-row__inner">
    {if $title}
      <h2 class="pb-heading pb-brands-row__title">{$title|escape}</h2>
    {/if}
    {if $brands && ($brands | length) > 0}
      <div class="pb-brands-row__grid">
        {foreach $brands as $item}
          {if $item.url}
            <a class="pb-brands-row__item" href="{$item.url|escape}" title="{$item.name|escape}">
              {if $item.logo}
                {include 'pagebuilder_partial_image' image=$item.logo alt=$item.name class='pb-brands-row__logo'}
              {/if}
              <span class="pb-brands-row__name">{$item.name|escape}</span>
            </a>
          {else}
            <div class="pb-brands-row__item">
              {if $item.logo}
                {include 'pagebuilder_partial_image' image=$item.logo alt=$item.name class='pb-brands-row__logo'}
              {/if}
              <span class="pb-brands-row__name">{$item.name|escape}</span>
            </div>
          {/if}
        {/foreach}
      </div>
    {else}
      <p class="pb-brands-row__empty">{'pagebuilder_fe_brands_empty' | lexicon}</p>
    {/if}
  </div>
</section>

See also ​