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

Характеристики — це «Колір: червоний», «Клас: 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}

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