Последнее обновление: 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

Эта статья была полезна? Да Нет

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

  • Владимир Т Владимир Т 1 ноября 2015 23:45 #

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

    1
  • Колмаков Игорь Колмаков Игорь 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
  • Владимир Юрьевич Шпак Владимир Юрьевич Шпак 11 декабря 2015 21:35 #

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

    2
  • Колмаков Игорь Колмаков Игорь 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 27 апреля 2016 23:33 #

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

      1
      • Тирон Александр Тирон Александр 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
      • Владимир Юрьевич Шпак Владимир Юрьевич Шпак 14 декабря 2015 13:09 #

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

        1
      • 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
        • 14 мая 2016 16:01 #

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

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

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

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


          1
        • Ivan Nikolov Ivan Nikolov 1 ноября 2016 00:56 #

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

          1
        • Колмаков Игорь Колмаков Игорь 1 ноября 2016 11:01 #

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

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

          1
        • Ivan Nikolov Ivan Nikolov 1 ноября 2016 12:23 #

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

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

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

            1
          • Ivan Nikolov Ivan Nikolov 26 ноября 2016 01:15 #

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

            1
          • Георгий Крупин Георгий Крупин 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
          • Георгий Крупин Георгий Крупин 27 апреля 2017 10:40 #

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

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


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

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

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

              1
            • Георгий Крупин Георгий Крупин 27 апреля 2017 10:50 #

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

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

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

              1
              • Тирон Александр Тирон Александр 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
              • Дмитрий Дмитрий 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
                  • Дмитрий Дмитрий 7 мая 2017 20:57 #

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

                    1
                    • Дмитрий Дмитрий 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
                    • Дмитрий Дмитрий 28 ноября 2017 21:34 #

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

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

                      1
                    • Колмаков Игорь Колмаков Игорь 29 ноября 2017 13:03 #

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

                      1
                    • Дмитрий Дмитрий 2 декабря 2017 16:56 #

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

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

                      1
                    • Колмаков Игорь Колмаков Игорь 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 30 марта 2019 07:39 #

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

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

                      1
                      • Тирон Александр Тирон Александр 1 апреля 2019 08:32 #

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

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

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

                        1

                        Добавить комментарий

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

                        Услуги

                        Контакты

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

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

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

                        Internet Explorer

                        от Microsoft

                        Chrome

                        от Google

                        Safari

                        от Apple

                        Opera

                        от Opera Software

                        Firefox

                        от Mozilla

                        Вверх