Last update: April 1, 2019

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

Размещение

иконки категорий - в дереве категорий (в верхней или в боковой панели)

Банер категории - на странице категории


изображения подкатегорий на странице категории


изображения основных категорий на главной странице магазина (только изображения)


изображения основных категорий на главной странице магазина (со списком подктегорий)


Купить плагин - https://www.webasyst.ru/store/plugin/shop/wmimagei...


Как активировать:

отображение иконок категорий

1. в файле "at.html" (сайт-дизайн-шаблоны)

в строке

{if 0 && class_exists('shopWmimageincatPlugin')}{$at['shop']['plugins']['wmimageincat'] = shopWmimageincatPlugin::getCategoryImageObj()}{/if}

замените 0 на 1

2. отображение "банера категорий"

в файле "category.html" (магазин-витрина-шаблоны)

в коде

{if 0 && shopWmimageincatPlugin::getCategoryImage($category.id, 'banner')}{* PLUGIN WMIMAGEINCAT: replace 0 to 1 to enable *}
<div class="image"><img src="{shopWmimageincatPlugin::getCategoryImage($category.id, 'banner')}" alt="{$category.name}" title="{$category.description|strip_tags}" /></div>
{/if}

замените 0 на 1

3. отображение изображений подкатегорий на странице категории

в файле "category.html" (магазин-витрина-шаблоны)

в строке

{if 0 && $category.subcategories}{* PLUGIN WMIMAGEINCAT: replace 0 to 1 to enable *}

замните 0 на 1

4. отображение категорий на главной странице магазина

в файле "home.html" (магазин-витрина-шаблоны)

в коде

{if 0}{* PLUGIN WMIMAGEINCAT: replace 0 to 1 to enable *}
{include file="homepage.categories.html" inline}
{/if}

замените 0 на 1

4.1 только изображения основных категорий

в файле "homepage.categories.html"

в строке

{$_type_categories = 2}{* type: 1 or 2 *}

замените

2 на 1

4.2 изображение основной категории и список подкатегрий

в файле "homepage.categories.html"

в строке

{$_type_categories = 1}{* type: 1 or 2 *}

замените

1 на 2

Was this article helpful? Yes No

Комментарии (41)

  • Владимир Т Владимир Т November 1, 2015 23:45 #

    Добрый день! Подскажите пожалуйста как в отображение изображений подкатегорий на странице категории картинки подкатегорий сделать меньше размером?

    1
  • Колмаков Игорь Колмаков Игорь November 2, 2015 11:18 #

    Здравствуйте!

    ширина картинок меняется в зависимости от ширины экрана

    для ширины экрана от 1281px это 25%,

    для ширины от 993 это 33%

    для ширины от 481 это 50%

    и для меньших экраноы - 100%

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

    /*для ширины от 1281*/

    @media only screen and (min-width: 1281px){
    .without-sidebar .piicsl .piicsl-item{
    width: 25%;
    }
    }
    @media only screen and (min-width: 993px){
    .piicsl .piicsl-item .piicsl-img {
    max-height: 200px;
    min-height: 200px;
    line-height: 200px;
    }
    }

    /*для ширины от 993*/
    @media only screen and (min-width: 993px){
    .without-sidebar .piicsl .piicsl-item {
    width: 33.33%;
    }
    }

    /*для ширины от 481*/
    @media only screen and (min-width: 481px){
    .piicsl .piicsl-item {
    width: 50%;
    }
    }

    /*для ширины меньше 481px*/
    .piicsl .piicsl-item {
    width: 100%;
    }

    .piicsl .piicsl-item .piicsl-img {
    max-height: 270px;
    min-height: 270px;
    line-height: 270px;
    }


    * где width - ширина каждого контейнера для изображения (само изображение занимает 100% ширины родительского блока)

    * где max-height, min-height, line-height - высота блока

    * удалить название категории можно с помощью правила

    .piicsl .piicsl-item .piicsl-title{

    display:none;

    }

    Уменьшить само изображение можно только относительно родительского блока

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

    ..piicsl .piicsl-item .piicsl-img img {
    max-width: 100%;
    max-height: 100%;
    }

    * где в значении свойств max-width и max-height пропорционально уменьшите значение в пределах от 1 до 100

    1
  • Можно сделать так, чтобы при просмотре категории товаров отображались только те подкатегории в которые загружены изображения

    2
  • Колмаков Игорь Колмаков Игорь December 14, 2015 09:11 #

    Да,

    в файле "category.html" (магазин-витрина-шаблоны)

    замените код


    {foreach $category.subcategories as $sc}
    <li class="piicsl-item">
    <a href="{$sc.url}">
    <div class="piicsl-img">
    <img src="{if shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{else}{$wa_theme_url}img/dummy200.png{/if}" alt="" />
    </div>
    <span class="piicsl-title">{$sc.name|escape}</span>
    </a>
    </li>
    {/foreach}

    на

    {foreach $category.subcategories as $sc}
    {if shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}

    <li class="piicsl-item">
    <a href="{$sc.url}">
    <div class="piicsl-img">
    <img src="{shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}" alt="" />
    </div>
    <span class="piicsl-title">{$sc.name|escape}</span>
    </a>
    </li>

    {/if}
    {/foreach}

    2
    • Ivan Chers Ivan Chers April 27, 2016 23:33 #

      А как сделать так, чтобы если картинки нет, то отображались ссылки на подкатегории, так же как, когда плагин отключен.

      1
      • Тирон Александр Тирон Александр April 28, 2016 10:00 #

        в файле "category.html" (магазин-витрина-шаблоны), замените код:

        {foreach $category.subcategories as $sc}
        	<li class="piicsl-item">
        		<a href="{$sc.url}">
        			<div class="piicsl-img">
        				<img src="{if shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{else}{$wa_theme_url}img/dummy200.png{/if}" alt="" />
        			</div>
        			<span class="piicsl-title">{$sc.name|escape}</span>
        		</a>
        	</li>
        {/foreach}

        на код:

        {foreach $category.subcategories as $sc}
        	<li class="piicsl-item">
        		<a href="{$sc.url}">
        			{if shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}
        			<div class="piicsl-img">
        				<img src="{if shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{shopWmimageincatPlugin::getCategoryImage($sc.id, 'image')}{else}{$wa_theme_url}img/dummy200.png{/if}" alt="" />
        			</div>
        			{/if}
        			<span class="piicsl-title">{$sc.name|escape}</span>
        		</a>
        	</li>
        {/foreach}
        1
        • May 2, 2016 13:36 #

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

          1
        • Да, всё работает

          1
        • May 2, 2016 13:56 #

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


          1
          • В файле home.html замените строку:

            {include file="homepage.categories.html" inline}

            строкой:

            <div class="fill-background">{include file="homepage.categories.html" inline}</div>
            1
          • May 14, 2016 16:01 #

            Спасибо за ответы.

            Не подскажите еще, у меня при изменении согласно посту 1566 (при отсутствии картинки должны показываться только ссылки)

            http://wm-site.ru/profitbuy/294/ikonka-izobrazheni...

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


            1
          • Ivan Nikolov Ivan Nikolov November 1, 2016 00:56 #

            Здравствуйте! Как в этом плагине вывести иконки в блок навигации сайта?

            1
          • Колмаков Игорь Колмаков Игорь November 1, 2016 11:01 #

            Этот плагин для только категорий

            с помощью него не получится вывести иконки к другим объектам

            1
          • Ivan Nikolov Ivan Nikolov November 1, 2016 12:23 #

            Сколько доработка будет стоить, я б оплатил если не дорого. Принцип то один и тот же должен быть, или нет? А потом можно было бы добавить к функционалу, повысит ценность продукта и возможно больше заявок будет на нее.

            1
            • Тирон Александр Тирон Александр November 1, 2016 12:34 #

              Доработать не получится, нужно делать несколько отдельных плагинов. Если вы используете тему оформления "Выгодная покупка", то в грядущем обновлении будет возможность указать иконки для страниц, используя доп. параметры страниц.

              1
            • Ivan Nikolov Ivan Nikolov November 26, 2016 01:15 #

              Здравствуйте! Нет страницы at.html, версия видимо старее. Как вывести в меню иконки?

              1
              • Тирон Александр Тирон Александр November 28, 2016 11:23 #

                В версии 1.0 нужно смотреть файл theme.script.html, действия примерно те же, заменить 0 на 1..

                1
                • Maxim Jakovlev Maxim Jakovlev May 23, 2018 17:10 #

                  Тема Выгодная покупка 1.2.0, тоже нет файла at.html и theme.script.html. Как включить иконки для категорий

                  1
                • Георгий Крупин Георгий Крупин April 27, 2017 10:00 #

                  Доброго дня, подскажите, а как после действий с постами 1566 и 1641

                  http://wm-site.ru/profitbuy/294/ikonka-izobrazhenie-i-banner-dlya-kategorii/#comment1566

                  http://wm-site.ru/profitbuy/294/ikonka-izobrazhenie-i-banner-dlya-kategorii/#comment1641


                  задать категориям выравнивание по середние (вертикаль и горизонталь)?

                  заранее спасибо!

                  1
                  • Тирон Александр Тирон Александр April 27, 2017 10:08 #

                    Укажите адрес вашего сайта

                    1
                  • Тирон Александр Тирон Александр April 27, 2017 10:35 #

                    В файл profitbuy.shop.min.css(Магазин-Витрина-Шаблоны) в конец, добавьте строки:

                    .piicsl .piicsl-item .piicsl-title {

                    display: inline-block;

                    vertical-align: middle;

                    position: static !important;

                    }

                    .piicsl-item a {

                    position: absolute;

                    top: 0;

                    left: 0;

                    right: 0;

                    bottom: 0;

                    }

                    .piicsl-item a:before {

                    content: '';

                    display: inline-block;

                    height: 100%;

                    vertical-align: middle;

                    }

                    1
                  • Георгий Крупин Георгий Крупин April 27, 2017 10:40 #

                    после такого изменения да, выравнивание появилось, но

                    на главной вот что творится: http://c2n.me/3JVLhV4


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

                    1
                    • Тирон Александр Тирон Александр April 27, 2017 10:47 #

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

                      1
                    • Георгий Крупин Георгий Крупин April 27, 2017 10:50 #

                      не совсем так.

                      я хочу сделать выравнивание подкатегорий http://c2n.me/3JVN6HE

                      главные категории трогать не нужно.

                      1
                      • Тирон Александр Тирон Александр April 27, 2017 12:30 #

                        Тогда попробуйте заменить в файле category.html строку:

                        piicsl

                        строкой:

                        piicsl my-class

                        после чего в файл profitbuy.shop.min.css(Магазин-Витрина-Шаблоны) в конец, добавьте строки:

                        .piicsl.my-class .piicsl-item .piicsl-title {

                        display: inline-block;

                        vertical-align: middle;

                        position: static !important;

                        }

                        .my-class .piicsl-item a {

                        position: absolute;

                        top: 0;

                        left: 0;

                        right: 0;

                        bottom: 0;

                        }

                        .my-class .piicsl-item a:before {

                        content: '';

                        display: inline-block;

                        height: 100%;

                        vertical-align: middle;

                        }

                        1
                      • Дмитрий Дмитрий May 5, 2017 13:28 #

                        Добрый день, подскажите пожалуйста как изменить высоту ячеек в отображение изображений подкатегорий на странице категории?

                        1
                        • Изменить выделенные значения в файле profitbuy.shop.min.css

                          .piicsl .piicsl-item .piicsl-img{max-height:270px;min-height:270px;border-radius:4px;margin:.8rem;line-height:270px;overflow:hidden;}



                          1
                          • Дмитрий Дмитрий May 7, 2017 20:57 #

                            Александр, к сожалению ничего не поменялось, изменил все три на 50рх но высота не изменилась http://g-bike.ru/category/okhotniche-snaryazhenie/

                            1
                            • Дмитрий Дмитрий May 7, 2017 21:05 #

                              разобрался), первый пост...


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

                              /*для ширины от 1281*/

                              @media only screen and (min-width: 1281px){
                              .without-sidebar .piicsl .piicsl-item{
                              width: 25%;
                              }
                              }
                              @media only screen and (min-width: 993px){
                              .piicsl .piicsl-item .piicsl-img {
                              max-height: 200px;
                              min-height: 200px;
                              line-height: 200px;
                              }
                              }

                              /*для ширины от 993*/
                              @media only screen and (min-width: 993px){
                              .without-sidebar .piicsl .piicsl-item {
                              width: 33.33%;
                              }
                              }

                              /*для ширины от 481*/
                              @media only screen and (min-width: 481px){
                              .piicsl .piicsl-item {
                              width: 50%;
                              }
                              }

                              /*для ширины меньше 481px*/
                              .piicsl .piicsl-item {
                              width: 100%;
                              }

                              .piicsl .piicsl-item .piicsl-img {
                              max-height: 270px;
                              min-height: 270px;
                              line-height: 270px;
                              }


                              * где width - ширина каждого контейнера для изображения (само изображение занимает 100% ширины родительского блока)

                              * где max-height, min-height, line-height - высота блока

                              * удалить название категории можно с помощью правила

                              .piicsl .piicsl-item .piicsl-title{

                              display:none;

                              }

                              0
                            • Дмитрий Дмитрий November 28, 2017 21:34 #

                              Здравствуйте!

                              подскажите как задать максимальное количество в одной строке отображаемых категорий на главной?

                              1
                            • Колмаков Игорь Колмаков Игорь November 29, 2017 13:03 #

                              напишите адрес сайта

                              1
                            • Дмитрий Дмитрий December 2, 2017 16:56 #

                              Если только черновую версию.

                              http://s160505-243.host.webasyst.com/

                              1
                            • Колмаков Игорь Колмаков Игорь December 4, 2017 12:22 #

                              в "выгодной покупке" в файле profitbuy.shop.min.css

                              в строке

                              @media only screen and (min-width:1281px){.piicsl .piicsl-item{width:20%;}.without-sidebar .piicsl .piicsl-item{width:25%;}.piicsl2 .piicsl-item{width:25%;}.without-sidebar .piicsl2 .piicsl-item{width:33.33%;}}
                              
                              замените 20% на меньший процент
                              (100% / на желаемое кол-во категорий в строке)


                              1
                            • foma foma March 30, 2019 07:39 #

                              Здравствуйте!

                              Можно ли отключить плагин в мобильной версии сайта?

                              1
                              • В самом плагине такого функционала не предусмотрено, но в теме оформления можно использовать конструкцию Smarty:

                                {if !$wa->isMobile()} ... {/if}

                                код внутри будет показан только на десктопах

                                1

                                Add comment

                                To add a comment please sign up or login

                                Контакты

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

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

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

                                Internet Explorer

                                от Microsoft

                                Chrome

                                от Google

                                Safari

                                от Apple

                                Opera

                                от Opera Software

                                Firefox

                                от Mozilla

                                Вверх