Как добавить список категорий товаров на страницу интернет-магазина

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

Что получится в результате

На странице отобразится удобный список категорий с подкатегориями:

• Категория 1
  • Подкатегория 1, Подкатегория 2, Подкатегория 3…
• Категория 2
  • Подкатегория 1, Подкатегория 2, Подкатегория 3…
• и так далее

Каждая категория и подкатегория будет ссылкой на соответствующий раздел каталога.

Инструкция

Шаг 1. Создание страницы

1. Откройте панель управления магазином.
2. Перейдите в раздел «Витрина → Дизайн → Страницы».
3. Нажмите кнопку создания новой страницы.
4. Переключите редактор в режим редактирования HTML-кода.

Шаг 2. Добавление кода

Скопируйте и вставьте следующий код в редактор:

<style>
.catalog {
    text-align: center;
}
.catalog-item {
    width: 300px;
    height: 150px;
    display: inline-block;
    margin-bottom: 1em;
    margin-right: 1em;
    border: 1px solid;
}
.catalog-item-container {
    width: 300px;
    height: 150px;
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
    padding: 1em;
}
.catalog-item-top {
    font-size: 2em;
}
.catalog-item-subcategories {
    margin-top: 1em;
}
.catalog-item a {
    text-decoration: none;
}
.catalog-item a:hover {
    text-decoration: underline;
}
</style>

<div class="catalog">
    {foreach $wa->shop->categories(0, 1, true) as $top_category}
        <div class="catalog-item">
            <div class="catalog-item-container">
                <div class="catalog-item-top">
                    <a href="{$top_category.url}">{$top_category.name|escape}</a>
                </div>
                <div class="catalog-item-subcategories">
                    {foreach $top_category.childs as $child_category}
                        <a href="{$child_category.url}">{$child_category.name|escape}</a>{if !$child_category@last}, {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    {/foreach}
</div>

Настройка внешнего вида

Чтобы изменить размеры блоков с категориями, отредактируйте значения width (ширина) и height (высота) в двух местах:

• в .catalog-item
• в .catalog-item-container

Оба значения должны совпадать.

Как это работает

Код автоматически собирает все категории из вашего каталога:

• Функция categories(0, 1, true) получает главные категории и их подкатегории.
• Первый цикл перебирает основные категории и выводит их названия.
• Второй цикл для каждой основной категории выводит список подкатегорий.
• Условие с запятой разделяет подкатегории запятыми — после каждой, кроме последней.