Опубликовано: 26 ноября 2015
Как я могу изменить размер фотографий товаров в списке категории Есть решение
1. Как я могу изменить размер фотографий товаров в списке товаров категории?
(сделать их крупнее)? В старых "шопскриптах" это задавалось в настройках.
Комментарии (3)
максимальный размер изображения в ширину не может превышать 200px
минимальный размер - ширина родительского блока контейнера
ширина блока выражается в % (от 100% до 25%) в зависимости от ширины области просмотра и наличия/отсутствия боковой панели
для области просмотра больше 1281px, ширина блока
для области просмотра от 993px до 1281px
для области просмотра от 741px до 993px - 33.33%
для области просмотра от 481px до 741px
для области просмотра до 481px
1. что бы сделать изображения большим максимальным размером (больше 200px)
необходимо сделать изменения в файле "list-thumbs.html" (магазин-витрина-шаблоны)
в строках
{if empty($without_micro_markup)} {$wa->shop->productImgHtml($p, '200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])} {else} {$wa->shop->productImgHtml($p, '200', ['alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])} {/if}заменить параметр "200" на больший - например "300"
2. что бы увеличить/уменьшить изображения в списке товаров
необходимо изменить ширину содержащих их блоков (это приведет к тому, что кол-во товаров в строке будет изменено)
в пользовательских стилях пропишите
/*для экранов меньше 481px*/ ul.product-list > li{ width:100%; } .without-sidebar ul.product-list.thumbs > li{ width:100%; } ul.product-list.thumbs li .pl-item-wrapper{ height: 340px; } /*для экранов от 481px до 741px*/ @media only screen and (min-width:481px){ ul.product-list.thumbs > li{ width:50%; } .without-sidebar ul.product-list.thumbs > li{ width:50%; } ul.product-list.thumbs li .pl-item-wrapper{ height: 340px; } } /*для экранов от 741px до 993px*/ @media only screen and (min-width:741px){ ul.product-list.thumbs > li{ width:33.33%; } .without-sidebar ul.product-list.thumbs > li{ width:33.33%; } ul.product-list.thumbs li .pl-item-wrapper{ height: 340px; } } /*для экранов от 993px до 1281px*/ @media only screen and (min-width:993px){ ul.product-list.thumbs > li{ width:25%; } .without-sidebar ul.product-list.thumbs > li{ width:33.33%; } ul.product-list.thumbs li .pl-item-wrapper{ height: 340px; } } /*для экранов свыше 1281px*/ @media only screen and (min-width:1281px){ ul.product-list.thumbs > li{ width:20%; } .without-sidebar ul.product-list.thumbs > li{ width:25%; } ul.product-list.thumbs li .pl-item-wrapper{ height: 340px; } }где после каждого комментария идут медиа запросы определяющие ширину области просмотра браузера (кроме 1-го).
Каждый последующий блок переопределяет правила предыдущего (т.ч. менять порядок их следования не следует)
в каждом медиа запросе присутствуют правила, селекторы которых обозначают
* внимание!
Ширину блоков следует определять следующим образом:
в случае если требуется в строке разместить 8 товаров, то расчет ширины будет следующим
100 / 8 = 12.5
т.е.
width:12.5%;
если требуется разместить 4 товара в строке, расчет
100 / 4 = 25
т.е.
width:25%;
если требуется разместить 3 товара в строке, расчет
100 / 3 = 33.3
т.е.
width:33.3%;
Хотел увеличить количество товаров в строке на главной, но что-то некорректно получается- на главной блоки сужаются, на на месте новых пустота, но если нажать на кнопку "показать еще" , всё встает на свои места , а в списке "бестселлеры".блоки не сужаются. Тему обновил на днях
Шаблон адаптивный и настроен на отображение определенного количества товаров в строке для наиболее оптимального отображения на том или ином устройстве.
Тут приведены общие рекомендации как можно изменить это/т поведение/механизм для опытных пользователей. Если у вас нет опыта работы с HTML/CSS/SMARTY, то лучше не стоит пытаться что то сделать самостоятельно.
Вы можете заказать изменение списка товаров под ваши нужды как отдельную доработку.
Как сделать тоже самое, но для вывода в режиме фото с описанием.
С плиткой все увеличено, а в фото с описанием все как было, нужно именно там увеличить фото.
Заранее спасибо!