Характеристики товара

Характеристики — это «Цвет: красный», «Класс: 33», «Вес: 275 г». Магазин собирает их в одном месте и отдаёт шаблону готовыми: тема ничего не форматирует и никуда не ходит, она перебирает список и рисует его так, как задумано в оформлении.

Один и тот же список приходит на страницу товара, на плитку в подборке, в позицию корзины и в печатный бланк. Поэтому товар выглядит одинаково везде, и менять формат в одном месте не нужно.

Где они есть#

У товара без характеристик это пустой список, а не отсутствующее поле, так что {if $product.features} безопасно.

Что лежит в каждой строке#

Значение уже отформатировано магазином. Число идёт вместе с единицей («275 г»), «да/нет» — словами, значение из словаря — с подписью на языке витрины. Собирать эту строку самим не нужно: если тема начнёт форматировать по-своему, на сайте будет «0.800», а в накладной «0,8 кг», и покупатель не поймёт, где правда.

Простой вывод выглядит так:

{foreach $product.features as $f}
    <div class="spec">
        <span class="spec__name">{$f.name}</span>
        <span class="spec__value">{$f.value}</span>
    </div>
{/foreach}

Несколько значений у одной характеристики#

У «Цвета», «Материала» или «Интернета» значений бывает несколько. Строка при этом остаётся одна: магазин перечисляет значения в value через запятую — «WAP, 4G, 3G, EDGE, GPRS». Три строки «Цвет» подряд покупатель читает как ошибку каталога.

Если вам нужно больше, чем строка через запятую, переберите values. У каждого значения есть:

Так значения выводит базовая тема — цветные показываются кружком, а ссылка ведёт на то значение, по которому кликнули:

{foreach $f.values as $v}{if !$v@first}, {/if}
    {if $v.color}<i class="spec-dot" style="background: {$v.color|escape}"></i>{/if}
    {if $v.link}<a href="{$v.link}">{$v.label}</a>{else}{$v.label}{/if}
{/foreach}

Всё выражение держат в одной строке намеренно: шаблоны выводят переносы и отступы как есть, и разложенный «красиво» перебор дал бы пробелы перед запятыми.

Ссылка у строки целиком (link) заполняется, только когда значение одно. У характеристики с тремя значениями непонятно, куда вела бы одна общая ссылка, поэтому там ссылки живут внутри values.

Значения, которые принадлежат варианту покупки#

У варианта бывают свои значения: «вес 275 г» у одной фасовки и «310 г» у другой. Такие строки приходят отдельными, и у них заполнен sku_id. В разметку попадают строки всех вариантов сразу, а показывается набор выбранного — переключает их сам магазин, если тема пометила строки:

{foreach $product.features as $f}
    <tr{if $f.sku_id} data-spec-sku="{$f.sku_id}"{if $f.sku_id != $product.default_sku_id} hidden{/if}{/if}>
        <td>{$f.name}</td>
        <td>{$f.value}</td>
    </tr>
{/foreach}

Без этой пометки таблица останется от прежнего варианта: покупатель выберет другую фасовку, а вес увидит от предыдущей.

Чего в списке нет#

Опций покупки. Цвет и размер, по которым покупатель выбирает вариант, — это не строка таблицы, а переключатель над ценой. Они приходят в $product.variants и описаны на странице «Данные товара». Иначе покупатель видел бы один и тот же цвет дважды: и кнопкой, и строкой характеристик.

Скрытых характеристик. Владелец магазина может выключить показ характеристики в справочнике — такие в список не попадают вовсе, прятать их темой не нужно.

Одна конкретная характеристика#

Когда нужна не вся таблица, а одно значение — берите по коду:

{if $product.features_by_code.color}
    <span class="badge">{$product.features_by_code.color.value}</span>
{/if}

Набор полей там тот же самый, включая values. Код характеристики задаёт владелец магазина в справочнике, поэтому тема, рассчитывающая на конкретный код, должна переживать его отсутствие — как в примере выше.

Краткий список на первом экране#

$product.short_features — первые пять характеристик товара. Это тот же формат, и выводится он тем же кодом; в базовой теме он стоит рядом с ценой, а полная таблица — во вкладке ниже. Полезно показать ссылку на неё, когда характеристик больше:

{if $product.features|@count > $product.short_features|@count}
    <a href="#specs">Все характеристики</a>
{/if}

Значок характеристики#

У характеристики может быть свой значок — мелкая картинка рядом с названием: гирька у «Веса», щит у «Гарантии». Владелец загружает его в редакторе характеристики (PNG, JPG, WebP или SVG), а магазин отдаёт готовый адрес в поле icon. Значка нет — в поле null, и проверка {if $f.icon} безопасна.

Растровый значок приходит уменьшенным до 96 точек, SVG — как есть.

{foreach $product.features as $f}
    <div class="spec">
        <span class="spec__name">
            {if $f.icon}<img class="spec__icon" src="{$f.icon}" alt="" loading="lazy">{/if}
            {$f.name}
        </span>
        <span class="spec__value">{$f.value}</span>
    </div>
{/foreach}

Значок приходит везде, где приходит сама характеристика: и на странице товара, и на плитке в подборке. Тема сама решает, где его показывать, — в базовой теме он стоит в таблице характеристик.