Иконка, изображение и баннер для категории

Цена: 999 руб.
Купить*

* При нажатии на кнопку, Вы перейдете в магазин приложений WebAsyst, где сможете купить данный товар

  • Описание
  • Примеры и рекомендации к размещению
  • Иконки в блоке навигации

Обзор

Современный посетитель ориентирован на зрительный образ — картинки, изображения.

Проиллюстрированные названия категорий, сделают Ваш сайт более привлекательным и удобным для его посетителей. Красивые изображения наглядно покажут содержимое категории, а баннеры расскажут посетителям об акциях и скидках.

Предназначение плагина:

Позволяет использовать несколько графических элементов (иконка, изображение, банер) для обозначения категорий.

Например:
- иконку можно вывести в меню навигации дерева категорий (в следующих обновлениях тем оформлений «купить просто» и «удобная покупка» будет реализовано взаимодействие плагина с темами без изменения исходного кода).
- изображение, для вывода списка категорий на главной или списка подкатегорий на странице категории.
- банер, изображение на странице категории для уведомления посетителя о проходящих акциях или выгодных торговых предложениях.

Загрузка изображений:

Изображения загружаются во всплывающем окне настроек категории (магазин-товары-категория- «Настройки категории»).

Настройка размеров эскизов изображений:

На странице плагина (магазин-плагины-«Иконка, изображение и баннер для категории »), размещается таблица размеров каждого типа изображений.

Вы можете в любой момент изменить пропорции каждого типа изображений.
* После изменения размеров, не забудьте нажать на кнопку «сохранить», и кликнуть кнопку «Удалить и заново создать эскизы всех изображений категорий».

Плагин работает с копиями оригинала и по этой причине Вы можете экспериментировать с размерами эскизов, столько, сколько Вам потребуется.

Используемые термины:
* иконка - небольшое изображение, представляющее категорию магазина.
* изображение - графический элемент предоставляющий информацию содержимого принадлежащей категории.
* банер - статическое изображение рекламного характера (Баннеры размещают для привлечения клиентов, для информирования или для создания позитивного имиджа).

Примеры и рекомендации к размещению

Размещение "Банера"

В файле "category.html" (магазин-витрина-дизайн-шаблоны), перед строкой
"{if $category.description}"
пропишите конструкцию:

{if shopWmimageincatPlugin::getCategoryImage($category.id, 'banner')}
<div><img src="{shopWmimageincatPlugin::getCategoryImage($category.id, 'banner')}" alt="{$category.name}" title="{$category.description|strip_tags}" /></div>
{/if}

Размещение списка "изображений" категорий на странице отдельной категории

в файле "category.html" (для страницы категорий) перед строкой "{if $category.description}"

пропишите следующий блок кода:

{if $category.id}
{$category_list = $wa->shop->categories($category.id, 1)}
{else}
{$category_list = $wa->shop->categories(0, 0)}
{/if}

<ul class="category_list">
{*кол-во ячеек в строке*}{$num_cell = 3}
{foreach $category_list as $cl}
{if $cl@first || ($cl@index is div by $num_cell)}<li>{/if}
<a class="name" href="{$cl.url}">
{if shopWmimageincatPlugin::getCategoryImage($cl.id, 'image')}<div><img src="{shopWmimageincatPlugin::getCategoryImage($cl.id, 'image')}" /></div>{/if}
<span>{$cl.name}</span></a>
{if $cl@last || (($cl@index+1) is div by $num_cell)}</li>{/if}
{/foreach}
</ul>

Так же Вы можете воспользоваться предоставленными правилами CSS для данного блока. Пропишите указанный ниже блок правил перед преведенной выше конструкции <style type="text/css">
.category_list{
margin:0 0 20px;
display:table;
padding:0;
width:100%;
}
.category_list>li{
display:table-row;
}
.category_list>li>a:hover{

}
.category_list>li>a{
text-align:center;
display:table-cell;
text-decoration:none;
font-size:1.2em;
font-weight:bold;
width:33%;
border:1px dashed #ccc;
border-color: transparent #ccc #ccc transparent;
padding:5px;
}
.category_list>li>a div{
overflow:hidden;
display:inline-block;
}
.category_list>li>a img{
transition: all .8s ease-in-out 0s;
}
.category_list>li>a:hover img{
transform:scale(1.2) rotate(-2deg);
}
.category_list>li:first-child a{
border-top-color: #ccc;
}
.category_list>li>a:first-child{
border-left:1px dashed #ccc;
}
.category_list>li>a span{
display:block;
}
.category_list>li>a:hover{
box-shadow:0 0 10px #999;
border-color: #ccc;
}
</style>

Размещение "Иконки" в строке "название категории" на странице категории

В файле "category.html" (магазин-витрина-дизайн-шаблоны), перед строкой
"{$category.name}"
пропишите конструкцию:


{if $wa->shop && shopWmimageincatPlugin::getCategoryImage($category.id, 'icon')} <img src="{shopWmimageincatPlugin::getCategoryImage($category.id, 'icon')}" style="vertical-align:middle; margin-right:5px;" /> {/if}

* Если у Вас возникают сложности, то пишите мне на email kolmakov.igor@gmail.com

Иконки в блоке навигации

Размещения иконок в блоке навигации дерева категорий

В файле "index.html" (сайт-дизайн-шаблоны),
перед закрывающим элементом </head>
пропишите конструкцию:


<script type="text/javascript">
   {if $wa->shop && class_exists(shopWmimageincatPlugin)}var images = {json_encode(shopWmimageincatPlugin::getCategoryImageObj())};{/if}
      $(document).ready(function(){
         if(typeof(images) != 'undefined'){
            $.each(images, function(k,v){
                if(v.icon) {
                    $('[data-icon-id="'+k+'"]').prepend('<img src="'+v.icon+'" alt="" style="vertical-align:middle; margin-right:3px;">');
                }
            });
        }
    });
</script>

Далее в функции {wa_print_tree}
в элементе "a" добавьте атрибут data-icon-id=":id" что бы получилось так:

{wa_print_tree tree=$data elem='<a href=":url" data-icon-id=":id">:name</a>' selected=$selected_category class="category-tree" attrs="title='Дерево категорий'" collapsible_class="parent"}

* саму конструкцию менять не следует, только добавьте атрибут data-icon-id=":id"
* В разных шаблонах, функция {wa_print_tree} размещается в различных файлах.

Cписок тем оформления, название файлов и их место располажения

Название темы оформления Расположение блока Имя файла Расположение файла
Удобная покупка горизонтальный блок навигации horizontal.tree.html сайт - дизайн - шаблоны
вертикальный блок навигации vertical.tree.html сайт - дизайн - шаблоны
Clear горизонтальный блок навигации navigation.html магазин - витрина - дизайн - шаблоны
CUSTOM горизонтальный блок навигации sidebar.html магазин - витрина - дизайн - шаблоны
Дефолт 2.0 Боковое main.html (1-я конструкция) магазин - витрина - дизайн - шаблоны
Выпадающее main.html (2-я конструкция) магазин - витрина - дизайн - шаблоны
Nifty горизонтальный блок навигации navigation.html магазин - витрина - дизайн - шаблоны
Sidebar 2.0 вертикальный блок навигации nav.sidebar.html магазин - витрина - дизайн - шаблоны

Для тем оформления "файсбук" и "вконтакте", в файле "navigation.html" (магазин - витрина - дизайн - шаблоны) следует изменить конструкцию

{foreach $categories as $c}
<li{if !empty($root_category_id) && $root_category_id == $c.id} class="selected"{/if}><a href="{$c.url}">{$c.name}</a></li>
{/foreach}


добавив после атрибута href="{$c.url}"
строку
data-icon-id="{$c.id}
что бы получилось так:

{foreach $categories as $c}
<li{if !empty($root_category_id) && $root_category_id == $c.id} class="selected"{/if}><a href="{$c.url}" data-icon-id="{$c.id}">{$c.name}</a></li>
{/foreach}

Для темы оформления "mobile", в файле "layout-nav.html" (магазин - витрина - дизайн - шаблоны) следует изменить конструкцию

{foreach $cat_array as $cat_item}
<div class="nav-item">
<a href="{$cat_item.url}">{$cat_item.name}</a>
</div>
{/foreach}


добавив после атрибута href="{$cat_item.url}"
строку
data-icon-id="{$cat_item.id}"
что бы получилось так:

{foreach $cat_array as $cat_item}
<div class="nav-item">
<a href="{$cat_item.url}" data-icon-id="{$cat_item.id}">{$cat_item.name}</a>
</div>
{/foreach}

Контакты

Дорогие друзья!

К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

Пожалуйста, обновите браузер, скачав его по ссылкам ниже, или обратитесь к системному администратору, обслуживающему Ваш компьютер.

Internet Explorer

от Microsoft

Chrome

от Google

Safari

от Apple

Opera

от Opera Software

Firefox

от Mozilla

Вверх