docs.modx.pro

Русский

English

Русский

English

Тема

PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Dependencies
  1. Компоненты
  2. PageBuilder
  3. Каталог секций
  4. Pro
  5. Сравнение товаров

Сравнение товаров ​

Вы вручную выбираете несколько товаров в инспекторе. На сайте появится таблица характеристик по колонкам.

Информация

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

Сравнение в PageBuilder ​

  • Несколько товаров в одной таблице характеристик
  • Подсветка отличий опциональна
  • Выбор SKU в инспекторе, не GET-параметры

Где показывать ​

  • На странице «Сравнение» в каталоге
  • Для подбора аналогов в B2B
  • На лендинге: два–три SKU рядом

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

Товары и подсветка ​

Repeater или multirelation Товары. Подсветить отличия включает визуальное выделение разных значений.

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

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

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

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

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

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

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

Товары (products) ​

Тип multirelation. Обязательное. Выбор нескольких ресурсов. В JSON сохраняются ID.

Подсветить отличия (highlight_differences) ​

Тип yesno. Необязательное. Переключатель да/нет.

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

Таблица pb-product-comparison.

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

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

json
{
  "title": "Заголовок секции",
  "products": [
    201,
    202,
    203
  ],
  "highlight_differences": true
}

Шаблон chunk ​

Fenom chunk pagebuilderpro_product_comparison:

fenom
{var $productIds = $comparison_product_ids|default:''}
{var $listing = ''}
{if $productIds}
  {var $listing = $modx->runSnippet('msProducts', [
    'resources' => $productIds,
    'limit' => 4,
    'tpl' => 'pagebuilderpro_product_comparison_cell',
    'includeVendorFields' => '*',
    'includeOptions' => '*',
    'withCurrency' => 1,
    'showZeroPrice' => 1
  ])}
{/if}
<section
  class="pb-section pb-section--product-comparison pb-product-comparison{if $highlight_differences} pb-product-comparison--diff{/if}{if $cssClass} {$cssClass|escape}{/if}"
  data-pb-section="product_comparison"
  {if $id} id="pb-{$id|escape}"{/if}
>
  <div class="pb-section__inner pb-product-comparison__inner">
    {if $title}
      <h2 class="pb-heading pb-product-comparison__title">{$title|escape}</h2>
    {/if}
    {if $listing}
      <div class="pb-product-comparison__scroll" tabindex="0" role="region" aria-label="{$title|default:'Product comparison'|escape}">
        <div class="pb-product-comparison__grid">
          {$listing}
        </div>
      </div>
    {else}
      <p class="pb-listing__empty">Выберите от 2 до 4 товаров для сравнения.</p>
    {/if}
  </div>
</section>

JSON-определение ​

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

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