Категории, навигация и фильтры в шаблонах

Навигация по каталогу — ключевой элемент интернет-магазина. В этой статье разберём, как управлять выводом категорий, фильтров, сортировки и постраничной навигации в шаблонах Shop-Script.

Вывод дерева категорий

Дерево категорий и список товаров в бекенде Shop-Script

Простое меню категорий

Массив $categories доступен глобально и содержит все корневые категории с подкатегориями:

<nav class="catalog-menu">
    <ul>
    {foreach $categories as $cat}
        <li class="{if $cat.id == $selected_category}active{/if}">
            <a href="{$cat.full_url}">{$cat.name}</a>

            {* Подкатегории *}
            {if $cat.childs}
            <ul>
                {foreach $cat.childs as $sub}
                    <li><a href="{$sub.full_url}">{$sub.name}</a></li>
                {/foreach}
            </ul>
            {/if}
        </li>
    {/foreach}
    </ul>
</nav>

Переменная $selected_category содержит ID текущей выбранной категории — используйте её для подсветки активного пункта.

Получение категорий через хелпер

Если вам нужны категории определённого уровня или ветки, используйте метод $wa->shop->categories():

{* Все корневые категории *}
{$root_cats = $wa->shop->categories(0)}

{* Подкатегории категории с ID=5, глубина 2 уровня *}
{$sub_cats = $wa->shop->categories(5, 2)}

{* Дерево категорий (вложенная структура) *}
{$tree = $wa->shop->categories(0, null, true)}

Автоматическое дерево через wa_print_tree

Для сложных многоуровневых меню удобно использовать готовый Smarty-плагин:

{wa_print_tree
    tree=$categories
    elem='<a href=":full_url">:name</a>'
    selected=$selected_category
    class="catalog-tree"
    collapsible_class="has-children"
    depth=2
}

Это автоматически сформирует вложенный <ul> с подсветкой текущей категории и CSS-классами для стилизации.

Страница категории (category.html)

Информация о категории

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

{if $category.description}
    <div class="category-description">
        {$category.description}
    </div>
{/if}

{* Подкатегории текущей категории *}
{if $category.subcategories}
<div class="subcategories">
    {foreach $category.subcategories as $sub}
        <a href="{$sub.full_url}" class="subcategory-link">
            {$sub.name}
        </a>
    {/foreach}
</div>
{/if}

Список товаров в категории

<div class="products-grid">
{foreach $products as $product}
    <div class="product-card">
        <a href="{$product.frontend_url}">
            {$wa->shop->productImgHtml($product, '400x0', [
                'class'   => 'product-card__img',
                'alt'     => $product.name|escape,
                'loading' => 'lazy'
            ])}
        </a>

        {if $product.badge}
            {$wa->shop->badgeHtml($product.badge)}
        {/if}

        <div class="product-card__info">
            <a href="{$product.frontend_url}">{$product.name}</a>

            <div class="product-card__price">
                {$product.price|wa_format_number} ₽
                {if $product.compare_price > $product.price}
                    <s>{$product.compare_price|wa_format_number} ₽</s>
                {/if}
            </div>

            {if $product.rating > 0}
                {$wa->shop->ratingHtml($product.rating, 10)}
            {/if}
        </div>
    </div>
{forelse}
    <p>В этой категории пока нет товаров.</p>
{/foreach}
</div>

Вывод выбранных характеристик в карточке каталога

По умолчанию массив $product.features содержит все характеристики товара. Чтобы показать в каталоге только нужные (например, размер и цвет), используйте хелпер $wa->shop->features() и фильтрацию по кодам.

В начале шаблона категории загрузите характеристики для всех товаров на странице:

{$features = $wa->shop->features($products)}
{assign var="show_features" value=['size','color']}

Вместо size и color подставьте коды нужных характеристик из бекенда (Магазин → Настройки → Характеристики).

Внутри цикла товаров добавьте вывод:

{if !empty($product.features)}
<div class="catalog-feature">
    {foreach $product.features as $f_code => $f_value}
        {if in_array($f_code, $show_features)}
        <div class="feature-item">
            <span class="feature-name">{$features[$f_code].name}:</span>
            <span class="feature-value">
                {if is_array($f_value)}{implode(', ', $f_value)}{else}{$f_value}{/if}
            </span>
        </div>
        {/if}
    {/foreach}
</div>
{/if}

Фильтры товаров

Страница категории на витрине — подкатегории, фильтры, сортировка

Массив $filters содержит все фильтры, настроенные для категории:

{if $filters}
<form class="filters-form" action="{$wa->currentUrl(0, 1)}" method="get">
    {foreach $filters as $filter}
        <div class="filter-group">
            <h4>{$filter.name}</h4>

            {if $filter.type == 'range'}
                {* Диапазон (цена, вес) *}
                <input type="number" name="{$filter.code}.min"
                       placeholder="от {$filter.min}" />
                <input type="number" name="{$filter.code}.max"
                       placeholder="до {$filter.max}" />

            {else}
                {* Чекбоксы (цвет, бренд, материал) *}
                {foreach $filter.values as $val}
                    <label>
                        <input type="checkbox"
                               name="{$filter.code}[]"
                               value="{$val.value}" />
                        {$val.title}
                        <span class="count">({$val.count})</span>
                    </label>
                {/foreach}
            {/if}
        </div>
    {/foreach}

    <button type="submit">Применить</button>
</form>
{/if}

Сортировка

{if $category.params.enable_sorting}
<div class="sorting">
    Сортировать по:
    {foreach $sort_fields as $field => $title}
        <a href="?sort={$field}"
           class="{if $active_sort == $field}active{/if}">
            {$title}
        </a>
    {/foreach}
</div>
{/if}

Доступные поля сортировки: name, price, total_sales, rating, create_datetime, stock.

Постраничная навигация

Используйте встроенный Smarty-плагин {wa_pagination}:

{if $pages_count > 1}
    {wa_pagination
        total=$pages_count
        page=$page
        prev="←"
        next="→"
        attrs=['class' => 'pagination']
    }
{/if}

Это сгенерирует готовый HTML с номерами страниц, стрелками и CSS-классом selected для текущей страницы.

Хлебные крошки

{if $breadcrumbs}
<nav class="breadcrumbs">
    <a href="{$wa_app_url}">Магазин</a>
    {foreach $breadcrumbs as $crumb}
        <span class="separator">/</span>
        {if $crumb.url}
            <a href="{$crumb.url}">{$crumb.name}</a>
        {else}
            <span>{$crumb.name}</span>
        {/if}
    {/foreach}
</nav>
{/if}

Облако тегов

{$tags = $wa->shop->tags(30)}
{if $tags}
<div class="tag-cloud">
    {foreach $tags as $tag}
        <a href="{$wa_app_url}tag/{$tag.uri_name}/"
           style="font-size: {$tag.size}%; opacity: {$tag.opacity}">
            {$tag.name}
        </a>
    {/foreach}
</div>
{/if}

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

Не забудьте оставить хук для плагинов на странице категории:

{$frontend_category}