Webamator Blog

Две иконки для категории Webasyst
MENU
Home » Дизайн » Две иконки для категории Webasyst

Две иконки для категории Webasyst

Любой современный скрипт магазина позволяет при создании категории товаров указать изображение для данной категории – это довольно наглядно и удобно для посетителя. А как быть если для категории нужно, к примеру две картинки – маленькую для списка и большую для самой категории?

Чтобы было понятнее о чем речь, я прикрепил две картинки:

Две иконки для категории Webasyst

Маленькая картинка служит иконкой в списке категорий

Две иконки для категории 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>&nbsp;({$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: 11%

Добавлено 29 октября 2011
Рубрика: Дизайн
Метки:

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Также рекомендую публикации, похожие на "Две иконки для категории Webasyst"

Блокировка доставки по городам в WooCommerce.

Когда-то я уже писал об ограничении штатов США в WooCommerce. Но похожая задача может возникнуть не только на уровне штатов, но и на уровне отдельных округов или городов [...]

Лицензия Webasyst со скидкой от 25% до 100%

Сегодня решил поделиться хорошей новостью с теми, кому нужна официальная лицензия Webasyst со скидкой. Лицензия полностью официальная, т.е. вы получаете полноценную поддержку от разработчиков, доступ ко всем обновлениям [...]

О цене товаров в интернет магазинах

За последние пару месяцев среди заказчиков интернет магазинов заметил некую странную тенденцию – цену на товары просят указывать не в рублях, а в странных непонятных иероглифах… Естественно что [...]

Делаем шаблон Webasyst валидным

Не знаю кому как, но для меня отсутствие ошибок в шаблоне – признак хорошего тона. Примерно так же как и чистый автомобиль – хоть он и не будет [...]

2 комментариев

2 комментариев


RSS feed for comments on this post.

Leave a comment