docs.modx.pro
PageBuilder
PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
  • MODX 3
  • PHP 8.2
  • Vue 3
Зависимости
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Pro
  5. Ряд брендов

Ряд брендов ​

Похоже на Логотипы партнёров, но можно подтянуть бренды (vendors) из категории каталога автоматически.

Ряд брендов

Информация

Требуются PageBuilder Pro и miniShop3.

Зачем ряд брендов ​

  • Ручной список или vendors из категории MS3
  • Ссылки на фильтр по бренду
  • Компактнее сетки товаров для логотипов

Сценарии в каталоге ​

  • На главной магазина: бренды категории
  • На странице «Бренды»: ручной список
  • В фильтре: переход в вендора

Примеры страниц ​

Источник брендов ​

Источник: manual (repeater) или Бренды из категории. Для category_vendors укажите Родительскую категорию.

Похожие секции ​

Параметры блока ​

ПараметрЗначение
keybrands_row
СлойPro
Категориямагазин (commerce)
Chunkpagebuilderpro_brands_row
Требованияpro, minishop3

Поля в редакторе ​

Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.

Заголовок (title) ​

Тип text. Необязательное.

Источник (source) ​

Тип select. Необязательное. Выпадающий список с заранее заданными вариантами.

Корень каталога (parent) ​

Тип relation. Необязательное. Выбор одного ресурса MODX в модальном окне поиска.

Лимит (limit) ​

Тип number. Необязательное.

Бренды (items) ​

Тип repeater. Необязательное. Повторяющиеся строки. Кнопка «Добавить» в инспекторе.

В каждой строке:

ПолеТипПодписьОбязательно
logoimageЛоготипнет
nametextНазвание брендада
urlurlСсылканет

Что видит посетитель ​

Ряд pb-brands-row.

Данные секции ​

Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:

json
{
  "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": "Иван Петров",
      "url": "https://example.com/brand"
    }
  ]
}

Шаблон chunk ​

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>

Связанные страницы ​