Иконки в категориях плагин + css как решить? Есть решение

Вывел для категорий иконки с помощью бесплатного плагина "Изображения для категорий"

код вывода вот такой сделал в main.html

{$categories = $wa->shop->categories(0, null, true)}

{foreach $categories as $top_category key=i}

{$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

{/foreach}

{wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name"><img src=":icon" />:name</a>'}


Иконки выводятся картинкой, а по дизайну ссылки в меню когда не активные должны иметь одну картинку и фон, а когда наводишь другую картинку и фон.

Я подумал что если картинку загружать в категорию через плагин где 2 разных изображения иконки.

А стилями css менять :hover т.е картинку при наведении на ссылку.

Вопрос: как сделать что бы ссылка :icon подставлялась в стилях?

примерно так

<style >

.iconka {

background:url(:icon);

}

</style >


Буду ооочень признателен за помощь.

13 ответов

  • 1
    Leva 4 августа 2015 03:49 # Решение

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

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

    Я установил плагин "Изображения для категорий" в каждую категорию сделал иконки в спрайт т.е сдвоенное изображение в png (верхнее черное нижнее белое) т.е для активного и не активного меню.

    Код вывода меню

    {$categories = $wa->shop->categories(0, null, true)}

    <div class="ind_men"> {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'} </div>

    {else}

    <div class="vn_men"> {$categories = $wa->shop->categories(0, null, true)}

    {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {if isset($category)}{$selected_category=$category.id}{else}{$selected_category=null}{/if}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name"><span style="background-image: url(:icon);"></span>:name</a>'} </div>

    {/if}


    css иконок меню

    главная страница

    main .ind_men .menu-v.category-tree a{

    background-repeat:no-repeat;

    }

    main .ind_men .menu-v.category-tree a:hover {

    background-position: bottom left;

    background-repeat:no-repeat;

    }


    внутренние

    main .vn_men .menu-v.category-tree a span {

    background-repeat: no-repeat;

    background-size:100%;

    height:35px;

    width:35px;

    display:block;

    float:left;

    margin-top:-10px;

    margin-right:5px;

    }

    main .vn_men .menu-v.category-tree a:hover span {

    background-position: bottom left;

    background-repeat: no-repeat;

    }


    здесь сделал через span т.к когда активный раздел открыт, если делать на ссылку либо на тег li то виден весь спрайт картинки


    Единственный недостаток в том что у других ссылок в подменю этот span тоже остается с пустым background-image: url()

    В общем что бы топик не был не законченным вот такой вот замудренный метод вывода иконок я выложил, результат выкладываю картинками:

    Главная

    Внутрянка


  • 1

    Попробуйте в качестве иконок использовать спрайты и по умолчанию показывать одну часть спрайта, а при наведении курсора — другую (для этого напишите CSS-селектор с псевдо-классом :hover, в котором меняйте background-position для элемента, на который наводится курсор).

    • +1
      Leva Leva 2 июля 2015 10:21 #

      а пример можно? я просто не АС в css так любитель :)

      я наверное про эти спрайты и говорил, вопрос в другом как вывести ссылку самой иконки которую я загрузил для каждой категории разную

      • +1

        Не проверял, но вроде так должно сработать:

        {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:url); background-position: top; background-size: 100% 50%;">:name</a>'}

        CSS:

        .menu-v.category-tree a:hover { background-position: bottom; }

        А спрайт в этом случае сделайте, слепив две картинки в одну: основная вверху, а та, что будет появляться при наведении курсора, — внизу.

  • 1
    Leva 6 июля 2015 09:11 #

    а спасибо все заработало вот готовое решение:

    ставим бесплатный плагин "Изображения для категорий"

    Код вывода категорий и картинок к ним такой:

    {$categories = $wa->shop->categories(0, null, true)}

    {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}


    делаем иконки для категорий т.е спрайт слепив две картинки в одну: основная вверху, а та, что будет появляться при наведении курсора, — внизу.

    В админке на каждую категорию загружаем эти спрайты

    и сам css код такой

    .menu-v.category-tree a{

    background-repeat:no-repeat;

    }

    .menu-v.category-tree a:hover {

    background-position: bottom left;

    background-repeat:no-repeat;

    }

    все работает как часы


    P/S если сам фон ссылок меню с градиентом то его надо прописывать на тег li и соответсвенно li:hover

  • 1
    Leva 28 июля 2015 11:08 #

    Вопрос продолжение..

    у меня вот такая конструкция вывода меню на главной и на остальных страницах с разным дизайном

    {$categories = $wa->shop->categories(0, null, true)}
    <div class="ind_men">

    {foreach $categories as $top_category key=i}
    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}
    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}

    </div>

    {else}

    <div class="vn_men">


    {foreach $categories as $top_category key=i}
    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}
    {/foreach}


    {if isset($category)}{$selected_category=$category.id}{else}{$selected_category=null}{/if}
    {wa_print_tree tree=$wa->shop->categories(0, null, true) selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}

    </div>
    {/if}

    как мне сделать что бы во втором меню тоже выводились ссылка на иконку :icon

    вот этот код срабатывал

    {foreach $categories as $top_category key=i}
    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}
    {/foreach}


    • +1

      Попробуйте указывать URL иконки в доп. параметрах категории (icon=http://***) и затем использовать его в виде :params.icon при вызове wa_print_tree.

      • +1
        Leva Leva 29 июля 2015 05:44 #

        На главной все работает, а вот когда во внутрь заходишь то это не работает :icon, т.е я иконки не через параметры вывожу а через плагин так удобней загрузил в админке и все

  • 1
    Leva 29 июля 2015 08:28 #

    ок задам вопрос по другому :)

    как заставить этот код работать не только на главной но и на внутренних страницах в магазине?

    {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}

  • 1
    Leva 29 июля 2015 10:04 #

    мне надо что бы в стилях background-image: url(:icon); выводилась ссылка на иконку, на главной работает такая конструкция как писал выше, а на внутренние страницы каталога заходишь эта ссылка не фурычит

    • +1

      Попробуйте выяснить, что возвращает вызов "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}" внутри цикла foreach. Возможно, там пустота. Если так, попробуйте уточнить у разработчикам плагина, что не так в передаваемых вами данных при вызове этого метода.

      • +1

        И заодно — так неправильно писать:

        {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

        Лучше так:

        {$categories[$i].icon = shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}
  • 1
    Leva 29 июля 2015 10:06 #

    просто в теле шаблона выводится ссылка {shopCategoryImagesPlugin::getCategoryImageUrl($category.id)}

    а в стилях не работает

  • 1
    Leva 29 июля 2015 10:22 #

    вот что пишут в админке что бы вывести этот плагин

    Для вывода изображения вручную в файле шаблоне (catagory.html) вставьте <img src="{shopCategoryImagesPlugin::getCategoryImageUrl($category.id)}" / >, где $category.id - идентификатор категории


    а в моем случае надо не картинкой а стилями

    <a href=":url" title=":name" style="background-image: url(:icon);">:name</a>

    вот на главной странице вот эта штука :icon работает т.е выводит ссылку на иконку которая загружена плагином в категории.

    И на главной я вывел методом научного тыка и с подсказками на форуме вот так

    {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}


    а вот когда заходишь в категорию товара мне надо что бы выводились категории с подкатегориями, я это сделал вот так

    {if isset($category)}{$selected_category=$category.id}{else}{$selected_category=null}{/if}


    {wa_print_tree tree=$wa->shop->categories(0, null, true) selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}


    Но здесь не работает в стиле вот эта штука :icon, я по примеру главной страницы вывел вот так:


    {foreach $categories as $top_category key=i}
    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}
    {/foreach}


    {if isset($category)}{$selected_category=$category.id}{else}{$selected_category=null}{/if}

    {wa_print_tree tree=$wa->shop->categories(0, null, true) selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}


    Я не программер, так что могу изъясняться не правильно ))) такие вещи делаю методом научного тыка и с вашей помощью )) так что не судите строго.

  • 1
    Leva 29 июля 2015 10:29 #

    проще говоря как заставить вот этот код плагина

    {shopCategoryImagesPlugin::getCategoryImageUrl($category.id)}

    работать в стиле style="background-image: url();" что бы выводился урл иконки вот и все?


  • 1
    Sed_Lex 29 июля 2015 13:26 #

    покажите результат

  • 1
    Leva 30 июля 2015 04:36 #

    результат чего?

  • 1
    Leva 3 августа 2015 07:37 #

    Проблема так и не решена

  • 1
    Leva 3 августа 2015 10:14 #

    аааааа! уже весь форум перелопатил нет решения нифига

    помогите люди добрые )))

    либо этот код что бы показывал подкатегории в активной категории

    {$categories = $wa->shop->categories(0, null, true)}

    {foreach $categories as $top_category key=i}

    {$categories[$i].icon = "{shopCategoryImagesPlugin::getCategoryImageUrl($top_category.id)}"}

    {/foreach}

    {wa_print_tree tree=$categories selected=$selected_category unfolded=false class="menu-v category-tree" elem ='<a href=":url" title=":name" style="background-image: url(:icon);">:name</a>'}

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите