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

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

Как это выглядит

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

Решение

1. Создайте новую страницу в разделе «Страницы» или откройте существующую страницу, на которой нужно разместить кнопки.
2. Переключите редактор в режим HTML (или «Исходный код»).
3. Добавьте следующий код:

<style>
.catalog-item { width: 400px; height: 220px; display: inline-block; margin-bottom: 1em; margin-right: 1em; border: 1px solid #ddd; }
.catalog-item a { display: block; text-decoration: none; }
.catalog-item a:hover { background: #f7f7f7; }
.catalog-item a:hover .catalog-item-name { text-decoration: underline; }
.catalog-item-container { width: 400px; height: 220px; display: table-cell; vertical-align: middle; padding: 1em; box-sizing: border-box; }
.catalog-item-name { font-size: 2em; text-align: center; }
.catalog-item-description { margin-top: 1em; }
</style>

<div class="catalog">
    {foreach $wa->shop->categories(0, 0, false) as $category}
        <div class="catalog-item">
            <a href="{$category.url}">
                <div class="catalog-item-container">
                    <div class="catalog-item-name">{$category.name}</div>
                    {if trim($category.description)}<div class="catalog-item-description">{$category.description}</div>{/if}
                </div>
            </a>
        </div>
    {/foreach}
</div>

Настройка размеров

Измените параметры в CSS-стилях, чтобы настроить ширину и высоту кнопок:

• width — ширина блока;
• height — высота блока;
• padding — отступы внутри блока;
• font-size — размер текста названия категории.

Например, чтобы сделать кнопки меньше, замените значения:

.catalog-item { width: 300px; height: 180px; }
.catalog-item-container { width: 300px; height: 180px; }