Задача
Добавить на произвольную страницу витрины Shop-Script список ссылок на основные категории товаров (с их названиями и описаниями), отображаемыми в виде прямоугольных кнопок.
Как должно выглядеть
Категория товаров 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Категория товаров 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Категория товаров 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Категория товаров 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Категория товаров 5
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Категория товаров 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Вариант решения
Создайте новую страницу в разделе «Витрина → Дизайн → Страницы», переключитесь в 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.
