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

Задача

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

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

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

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

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

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

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

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

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