Две иконки для категории Webasyst
Любой современный скрипт магазина позволяет при создании категории товаров указать изображение для данной категории - это довольно наглядно и удобно для посетителя. А как быть если для категории нужно, к примеру две картинки - маленькую для списка и большую для самой категории?
Чтобы было понятнее о чем речь, я прикрепил две картинки:
Маленькая картинка служит иконкой в списке категорий
Большая картинка будет показана вместе с описанием при просмотре категории
Думаю, вы уже обратили внимание что иконка для списка категорий - это абсолютно другая картинка, а не просто уменьшенная копия большой. Большую картинку мы поставим штатными средствами Webasyst - в админпанели, при редактировании категории. А вот для показа маленькой немного пошаманим в шаблоне.
Открываем файл /published/SC/html/scripts/templates/frontend/category.tpl.html и находим вот такую конструкцию:
{section name=i loop=$subcategories_to_be_shown}
перед ней открываем список (т.е. категории в нашем случае будут элементами списка) - для этого просто добавляем тег
<ul>
чуть ниже находим {/section} и сразу после него закрываем список - для этого просто добавляем закрывающий тег
</ul>
а сами категории, как уже говорилось выше, сделаем элементами списка - для этого заменим
<a href="{$_sub_category_url}">{$subcategories_to_be_shown[i][1]}</a>
({$subcategories_to_be_shown[i][2]})<br>
на
<li><a href="{$_sub_category_url}">{$subcategories_to_be_shown[i][1]}</a> ({$subcategories_to_be_shown[i][2]})</li>
в принципе, на данном этапе можно сохранить файл и посмотреть на промежуточный результат. Наши категории уже отображаются в виде списка, правда список еще какой-то не такой…
Попробуем его оформить под наши потребности, вначале уберем маркеры (это такие кружочки перед элементами списка). Создадим какой-нибудь класс, к примеру my_list, в котором отключим маркеры:
.my_list ul {
list-style-type:none;
}
.my_list ul li{
padding-left:40px;/*отступ чтоб поместилась картинка*/
}
а открывающий тег
<ul>
заменим на
<ul class="my_list">
Ну а теперь добавим маленькие иконки - они будут бекграундом для элементов списка. Для этого заменим открывающий тег
<li>
на
<li style="background: url(http://mysite.com/catsicons/{$subcategories_to_be_shown[i][0]}.jpg) no-repeat left top"><a href="{$_sub_category_url}">
http://mysite.com/catsicons/ - это путь к папке с маленькими картинками, вместо указанного в примере поставьте свой. Теперь достаточно закинуть в данную папку картинку с именем ид_категории.jpg - и она будет отображаться возле указанной категории. Ид категории можно узнать в админке - для этого достаточно навести на нужную категорию мышкой.
Общий принцип, думаю понятен - если нет, спрашивайте в комментариях. Аналогично можно поступить с любым другим движком - Webasyst в примере лишь по той причине, что у заказчика который заказывал данную фишку магазин работал на Webasyst-е.
Popularity: 10%
Рубрика: ДизайнМетки: магазин
Seoprodvig пишет: 
t3s 