Настройка карточки товара в шаблоне

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

Основные данные товара

В шаблоне product.html доступен массив $product со всеми свойствами:

<h1>{$product.name}</h1>

{* Краткое описание — обычно выводится над основным *}
{if $product.summary}
    <div class="product-summary">{$product.summary}</div>
{/if}

{* Полное HTML-описание *}
<div class="product-description">
    {$product.description}
</div>

Изображения товара

Для вывода изображений используйте хелперы $wa->shop:

{* Главное изображение *}
{$wa->shop->productImgHtml($product, '600x600', [
    'class' => 'product__main-img',
    'alt'   => $product.name|escape
])}

{* Галерея всех изображений *}
{foreach $product.images as $image}
    <a href="{$wa->shop->imgUrl($image, '1200x1200')}">
        {$wa->shop->imgHtml($image, '200x200', [
            'class'   => 'product__thumb',
            'loading' => 'lazy'
        ])}
    </a>
{/foreach}

Стандартные размеры: 50x50, 100x100, 200x200, 255x255, 600x600, 1200x1200. Можно указать произвольный, например 400x0 (ширина 400, высота пропорционально).

Цена и старая цена

<div class="product-price">
    {* Текущая цена *}
    <span class="price">
        {$product.price|wa_format_number} {$currency_info.sign_html}
    </span>

    {* Зачёркнутая цена до скидки *}
    {if $product.compare_price > $product.price}
        <span class="price-old">
            <s>{$product.compare_price|wa_format_number} {$currency_info.sign_html}</s>
        </span>
        {* Процент скидки *}
        {$discount = ($product.compare_price - $product.price) / $product.compare_price * 100}
        <span class="price-discount">-{$discount|round}%</span>
    {/if}
</div>

Значки (бейджи) и рейтинг

Shop-Script автоматически назначает значки товарам (новинка, распродажа и т. д.):

{* Значок товара *}
{if $product.badge}
    {$wa->shop->badgeHtml($product.badge)}
{/if}

{* Звёздный рейтинг *}
{if $product.rating > 0}
    {$wa->shop->ratingHtml($product.rating, 16)}
    <span>({$reviews_total_count})</span>
{/if}

Артикулы (SKU) и выбор вариантов

Если у товара несколько SKU (размер, цвет и т. п.), данные доступны через $product.skus и $features_selectable:

{* Характеристики для выбора варианта (цвет, размер) *}
{foreach $features_selectable as $feature}
    <div class="sku-feature">
        <label>{$feature.name}:</label>
        {if $feature.type == 'color'}
            {* Цветовые кружки *}
            {foreach $feature.values as $val}
                <span class="color-swatch"
                      style="background-color: {$val.value}"
                      title="{$val.title}">
                </span>
            {/foreach}
        {else}
            {* Текстовые варианты (размер и пр.) *}
            <select>
                {foreach $feature.values as $val}
                    <option value="{$val.id}">{$val.title}</option>
                {/foreach}
            </select>
        {/if}
    </div>
{/foreach}

Наличие на складе

{foreach $product.skus as $sku}
    {if $sku.available}
        <span class="in-stock">В наличии ({$sku.count} шт.)</span>
    {else}
        <span class="out-of-stock">Нет в наличии</span>
    {/if}
{/foreach}

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

Характеристики (вес, материал, страна и пр.) выводятся через $product.features:

{if $product.features}
<table class="features-table">
    {foreach $product.features as $feature}
        {* Пропускаем разделители *}
        {if $feature.type == 'divider'}
            <tr><th colspan="2">{$feature.name}</th></tr>
        {else}
            <tr>
                <td>{$feature.name}</td>
                <td>
                    {foreach $feature.values as $val}
                        {$val}{if !$val@last}, {/if}
                    {/foreach}
                    {if $feature.unit.name_short} {$feature.unit.name_short}{/if}
                </td>
            </tr>
        {/if}
    {/foreach}
</table>
{/if}

Дополнительные вкладки

У товара могут быть дополнительные страницы (вкладки) — например, «Инструкция», «Гарантия»:

{if $product.pages}
<div class="product-tabs">
    {foreach $product.pages as $page}
        <div class="tab">
            <h3>{$page.name}</h3>
            <div class="tab-content">{$page.content}</div>
        </div>
    {/foreach}
</div>
{/if}

Рекомендуемые и сопутствующие товары

В шаблоне product.html доступны два типа рекомендаций:

{* Похожие / альтернативные товары *}
{$product->upSelling()}

{* Перекрёстные продажи — «С этим товаром покупают» *}
{$product->crossSelling()}

На странице корзины (cart.html) перекрёстные продажи вызываются через хелпер:

{$wa->shop->crossSelling()}

Число в скобках задаёт количество выводимых товаров:

{$product->upSelling(4)}
{$product->crossSelling(6)}
{$wa->shop->crossSelling(4)}

Кастомный вывод рекомендаций

{if $crossselling}
<div class="cross-selling">
    <h2>С этим товаром покупают</h2>
    {foreach $crossselling as $p}
        <a href="{$p.frontend_url}">
            {$wa->shop->productImgHtml($p, '200x200', ['loading' => 'lazy'])}
            <span>{$p.name}</span>
            <span>{$p.price|wa_format_number} {$currency_info.sign_html}</span>
        </a>
    {/foreach}
</div>
{/if}

Хуки плагинов

Чтобы плагины (отзывы, сравнение, избранное) работали на странице товара, в шаблоне должны присутствовать хуки:

{* Дополнительные вкладки от плагинов *}
{$frontend_product.menu}

{* Блоки контента от плагинов *}
{$frontend_product.block}

{* Блоки в зоне покупки *}
{$frontend_product.cart}

Не удаляйте хуки

Если убрать эти переменные из шаблона, установленные плагины перестанут отображаться на странице товара.

Категории и теги товара

{* Хлебные крошки по категориям *}
{foreach $product.categories as $cat}
    <a href="{$cat.full_url}">{$cat.name}</a>
{/foreach}

{* Теги *}
{if $product.tags}
    {foreach $product.tags as $tag}
        <span class="tag">{$tag}</span>
    {/foreach}
{/if}