Таблица характеристик

Двухколоночная таблица для технических данных. Сверху необязательный заголовок и вступление.

Информация

Требуется PageBuilder Pro.

Specs в таблице

• Параметр и значение в таблице, не в prose
• Вступление и заголовок секции опциональны
• Поле table редактируется в инспекторе

Типичные страницы

• На карточке товара: вес, размер, материал
• На странице оборудования: specs
• Для сравнения одного продукта с нормой

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

• Товар (описание): Tabs → вкладка «Характеристики» = Spec table
• Оборудование: Hero → Spec table → CTA

Таблица характеристик

Поле Характеристики типа table: колонки параметр и значение. Чередующиеся строки включает zebra-стиль.

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

• Таблица данных для строк из embeddedTable в панели управления
• Сравнение товаров для нескольких SKU (MS3)

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

Параметр	Значение
key	spec_table
Слой	Pro
Категория	контент (content)
Chunk	pagebuilderpro_spec_table
Требования	pro

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

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

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

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

Вступление (intro)

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

Характеристики (specs)

Тип table. Обязательное. Таблица с фиксированными колонками.

Колонки:

Колонка	Тип	Подпись
label	text	Параметр
value	text	Значение

Чередующиеся строки (striped)

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

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

HTML-таблица pb-spec-table.

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

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

{
  "title": "Заголовок секции",
  "intro": "Краткое вступление перед основным содержимым.",
  "striped": true
}

Шаблон chunk

Fenom chunk pagebuilderpro_spec_table:

{var $rows = $spec_rows|default:($specs|default:[])}
<section class="pb-section pb-section--spec-table pb-spec-table{if $striped} pb-spec-table--striped{/if}{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="spec_table"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-spec-table__inner">
    {if $title}
      <h2 class="pb-heading pb-spec-table__title">{$title|escape}</h2>
    {/if}
    {if $intro}
      <p class="pb-spec-table__intro">{$intro|escape}</p>
    {/if}
    {if $rows && ($rows | length) > 0}
      <div class="pb-spec-table__scroll">
        <table class="pb-spec-table__table">
          <thead>
            <tr>
              <th scope="col">Параметр</th>
              <th scope="col">Значение</th>
            </tr>
          </thead>
          <tbody>
            {foreach $rows as $row}
              <tr>
                <th scope="row">{$row.label|default:''|escape}</th>
                <td>{$row.value|default:''|escape}</td>
              </tr>
            {/foreach}
          </tbody>
        </table>
      </div>
    {else}
      <p class="pb-spec-table__empty">Добавьте строки характеристик в инспекторе.</p>
    {/if}
  </div>
</section>

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

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

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

• Каталог секций
• Обзор полей
• Вывод на сайте