Последнее обновление: 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)
Добрый день! Подскажите пожалуйста как в отображение изображений подкатегорий на странице категории картинки подкатегорий сделать меньше размером?
Здравствуйте!
ширина картинок меняется в зависимости от ширины экрана
для ширины экрана от 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
Можно сделать так, чтобы при просмотре категории товаров отображались только те подкатегории в которые загружены изображения
Да,
в файле "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}
А как сделать так, чтобы если картинки нет, то отображались ссылки на подкатегории, так же как, когда плагин отключен.
в файле "category.html" (магазин-витрина-шаблоны), замените код:
на код:
у меня при данном изменении названия подкатегорий схлопываются в одну строку и налезают на название категории. как исправить?
Попробуйте добавить в пользовательские стили правило:
Да, всё работает
Изображения основных категорий на главной странице магазина (со списком подктегорий) отображаются на прозрачном фоне. Как сделать чтобы они были на белом фоне как и остальные элементы главной страницы, например как "лучшие предложения" на скриншоте.
В файле home.html замените строку:
строкой:
Спасибо за ответы.
Не подскажите еще, у меня при изменении согласно посту 1566 (при отсутствии картинки должны показываться только ссылки)
http://wm-site.ru/profitbuy/294/ikonka-izobrazheni...
названия подкатегорий начинают налезать на название категории и прописываются друг на друга в несколько слоев, в чем может быть проблема?
Попробуйте добавить в пользовательские стили правило:
Здравствуйте! Как в этом плагине вывести иконки в блок навигации сайта?
Этот плагин для только категорий
с помощью него не получится вывести иконки к другим объектам
Сколько доработка будет стоить, я б оплатил если не дорого. Принцип то один и тот же должен быть, или нет? А потом можно было бы добавить к функционалу, повысит ценность продукта и возможно больше заявок будет на нее.
Доработать не получится, нужно делать несколько отдельных плагинов. Если вы используете тему оформления "Выгодная покупка", то в грядущем обновлении будет возможность указать иконки для страниц, используя доп. параметры страниц.
Здравствуйте! Нет страницы at.html, версия видимо старее. Как вывести в меню иконки?
В версии 1.0 нужно смотреть файл theme.script.html, действия примерно те же, заменить 0 на 1..
Тема Выгодная покупка 1.2.0, тоже нет файла at.html и theme.script.html. Как включить иконки для категорий
тема 1.2.0, файлы находятся сайт-дизайн-шаблоны
Доброго дня, подскажите, а как после действий с постами 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
задать категориям выравнивание по середние (вертикаль и горизонталь)?
заранее спасибо!
Укажите адрес вашего сайта
kform.ru
В файл 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;
}
после такого изменения да, выравнивание появилось, но
на главной вот что творится: http://c2n.me/3JVLhV4
пропали подкатегории под изображениями(на главной) и появилась хрень сбоку слева.
В этом случае отмените сделанные изменения. Получается вы хотите разное отображение в разных местах одного и того же блока, для этого нужно учесть все варианты размещения и условия их отображения. Пишите на почту, будем рассматривать как индивидуальную доработку.
не совсем так.
я хочу сделать выравнивание подкатегорий http://c2n.me/3JVN6HE
главные категории трогать не нужно.
Тогда попробуйте заменить в файле 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;
}
Александр,
спасибо.
выравнивание появилось. тестим.
Добрый день, подскажите пожалуйста как изменить высоту ячеек в отображение изображений подкатегорий на странице категории?
Изменить выделенные значения в файле 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;}
Александр, к сожалению ничего не поменялось, изменил все три на 50рх но высота не изменилась http://g-bike.ru/category/okhotniche-snaryazhenie/
разобрался), первый пост...
что изменить размеры для каждого типа экрана необходимо в пользовательских стилях прописать правила
/*для ширины от 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;
}
Здравствуйте!
подскажите как задать максимальное количество в одной строке отображаемых категорий на главной?
напишите адрес сайта
Если только черновую версию.
http://s160505-243.host.webasyst.com/
в "выгодной покупке" в файле profitbuy.shop.min.css
в строке
Здравствуйте!
Можно ли отключить плагин в мобильной версии сайта?
В самом плагине такого функционала не предусмотрено, но в теме оформления можно использовать конструкцию Smarty:
{if !$wa->isMobile()} ... {/if}
код внутри будет показан только на десктопах
Спасибо!