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

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

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

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

Specs в таблице ​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Колонки:

КолонкаТипПодпись
labeltextПараметр
valuetextЗначение

В инспекторе доступны строки-группы (_pbGroup), объединение ячеек (_span по label / value) и превью под сеткой.

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

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

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

HTML-таблица pb-spec-table. При striped добавляется pb-spec-table--striped. Группы — pb-spec-table__row--group. Строки, полностью закрытые span, — pb-spec-table__row--span-cont.

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

Пример JSON после сохранения. На выводе Pro добавляет spec_rows через TableCells::present() (_pb_cells у каждой строки):

json
{
  "title": "Характеристики",
  "intro": "Основные параметры модели.",
  "striped": true,
  "specs": [
    { "label": "Габариты", "value": "", "_pbGroup": true },
    {
      "label": "Память",
      "value": "128 ГБ",
      "_span": { "value": { "colspan": 1, "rowspan": 2 } }
    },
    { "label": "Толщина с чехлом", "value": "" },
    { "label": "Цвет", "value": "Графит" }
  ]
}

Шаблон chunk ​

Fenom chunk pagebuilderpro_spec_table берёт $spec_rows, иначе $specs:

fenom
{set $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">{'pagebuilder_fe_spec_param' | lexicon}</th>
              <th scope="col">{'pagebuilder_fe_spec_value' | lexicon}</th>
            </tr>
          </thead>
          <tbody>
            {foreach $rows as $row}
              {if $row._pbGroup}
                <tr class="pb-spec-table__row--group">
                  <th colspan="2" scope="colgroup">{$row.label|default:''|escape}</th>
                </tr>
              {elseif $row._pb_cells.label.hidden && $row._pb_cells.value.hidden}
                <tr class="pb-spec-table__row--span-cont" aria-hidden="true"></tr>
              {else}
                <tr>
                  {if !$row._pb_cells.label.hidden}
                    <th scope="row" colspan="{$row._pb_cells.label.colspan|default:1}" rowspan="{$row._pb_cells.label.rowspan|default:1}">{$row.label|default:''|escape}</th>
                  {/if}
                  {if !$row._pb_cells.value.hidden}
                    <td colspan="{$row._pb_cells.value.colspan|default:1}" rowspan="{$row._pb_cells.value.rowspan|default:1}">{$row.value|default:''|escape}</td>
                  {/if}
                </tr>
              {/if}
            {/foreach}
          </tbody>
        </table>
      </div>
    {else}
      <p class="pb-spec-table__empty">{'pagebuilder_fe_spec_empty' | lexicon}</p>
    {/if}
  </div>
</section>

Текст ячеек экранируется (|escape). HTML из редактора на сайте не исполняется.

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