Список ссылок на основные категории товаров в виде кнопок

Задача

Добавить на произвольную страницу витрины Shop-Script список ссылок на основные категории товаров (с их названиями и описаниями), отображаемыми в виде прямоугольных кнопок.

Как должно выглядеть

Вариант решения

Создайте новую страницу в разделе «Витрина → Дизайн → Страницы», переключитесь в HTML-режим редактирования и добавьте приведенный ниже пример кода.

<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>

Высоту и ширину ячеек-кнопок регулируйте в селекторах .catalog-item и .catalog-item-container.

3 комментария

  • +1
    kktak kktak kktak kktak 13 февраля 2016 15:43 #

    Добрый день, подскажите пожалуйста, а что нужно дописать, чтобы отображались и картинки категории. Спасибо!

  • +1
    Андрей Боливини Андрей Боливини 30 марта 2016 06:52 #

    Куда картинки вставить?


  • +1
    Михаил Ушенин Михаил Ушенин Webasyst 30 марта 2016 07:49 #

    У категорий в Shop-Script по умолчанию нет возможности загрузить иконку/изображение. Поэтому, если у вас иконки категорий каким-то образом и используются, то предполагается, что вы можете самостоятельно доработать этот базовый пример под особенности работы вашего интернет-магазина. Если с этим возникают сложности, расширенную поддержку по редактированию исходного кода темы дизайна вы можете получить у экспертов Webasyst. Для получения бесплатной помощи задайте свой вопрос в хабе поддержки.

    Добавить комментарий

    Чтобы добавить комментарий, зарегистрируйтесь или войдите