Задача
Добавить на произвольную страницу витрины Shop-Script список ссылок на основные категории товаров со ссылками на их подкатегории.
Как должно выглядеть
Категория 1
Подкатегория 1, Подкатегория 2, Подкатегория 3, Подкатегория 4, Подкатегория 5, Подкатегория 6, Подкатегория 7
Категория 2
Подкатегория 1, Подкатегория 2, Подкатегория 3, Подкатегория 4, Подкатегория 5, Подкатегория 6, Подкатегория 7
Категория 3
Подкатегория 1, Подкатегория 2, Подкатегория 3, Подкатегория 4, Подкатегория 5, Подкатегория 6, Подкатегория 7
Категория 4
Подкатегория 1, Подкатегория 2, Подкатегория 3, Подкатегория 4, Подкатегория 5, Подкатегория 6, Подкатегория 7
Категория 5
Подкатегория 1, Подкатегория 2, Подкатегория 3, Подкатегория 4, Подкатегория 5, Подкатегория 6, Подкатегория 7
Вариант решения
Создайте новую страницу в разделе «Витрина → Дизайн → Страницы», переключитесь в 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.
