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

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

В файле «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){
                $('[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}