Изменить Отображение Товаров В Каталоге
#1
Отправлено 07 Июнь 2013 - 18:34
прикладываю фото для иллюстраций
1) как зафиксировать (выделить определенную область) блок с ценой и названием? например, привязать цену к нижней границе блока с товаром. да и вообще хотелось бы поиграться с расположением картинки, названия товара и его цены.
Сейчас она "плавает" в засисимости от длины названия товара (1-2-3 строки названия товара).
1а) как я понимаю, если добавить кнопки "купить-подробнее" в каталог, как в шаблоне Техника, проблема будет решена, верно?
2) как сделать картинку товара в каталоге максимально большой относительно блока с товаром? и как опустить картинку ниже?
3) как переместить фильтры по товарам в каталоге из под левого меню наверх и разместить сразу под названием категории? точнее даже так - как задать нужные размеры для этого блока?
#2
Отправлено 08 Июнь 2013 - 00:45
.goodsListItemName { line-height: 1.2em; margin: 0; max-height: 70px; overflow: hidden; padding: 0 2px; }
и заменить на
.goodsListItemName { line-height: 1.2em; margin: 0; overflow: hidden; padding: 0 2px; height: 70px; display: block; margin-bottom: 20px; }
2) Чтобы опустить изображение - необходимо в файле стилей main.css найти
.stikyes { background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center top transparent; float: right; height: 77px; margin: -15px 0 -77px; position: relative; top: 0; width: 103px; z-index: 33; }
и заменить на
.stikyes { background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center top transparent; float: right; height: 77px; margin: 0 0 -77px; position: relative; top: 0; width: 103px; z-index: 33; }
далее найти
.stikno { background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center bottom transparent; float: right; height: 77px; margin: -15px 0 -77px; position: relative; top: 0; width: 103px; z-index: 33; }
и заменить на
.stikno { background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center bottom transparent; float: right; height: 77px; margin: 0 0 -77px; position: relative; top: 0; width: 103px; z-index: 33; }
Цитата
Не совсем понятен ваш вопрос, вы хотите увеличить изображение сообщающее наличие товара? Если да, то для этого необходимо изменить(увеличить) изображение "stikerbg5.png" которое находиться у вас в разделе редактора тем.
3) Немного не понятен ваш вопрос, вы знаете как переместить блок, но не знаете как изменить размер блока с фильтрами? или вы хотите чтобы фильтры отображались иначе например в строку по типу? Если да, то найдите в файле стилей
.contentTbodySearchFilterBlockValues { padding: 1em 0 1em 1em; }
и замените на
.contentTbodySearchFilterBlockValues { padding: 1em 0 1em 1em; display: inline-block; vertical-align: middle; margin: 0 25px; text-align: left; }
#3
Отправлено 10 Июнь 2013 - 10:59
Можно ли сортировку товаров в каталоге сделать по увеличению размера товара? Размер мы указываем в Характеристиках.
#4
Отправлено 10 Июнь 2013 - 11:23
a_podarkov (10 Июнь 2013 - 10:59) писал:
Можно ли сортировку товаров в каталоге сделать по увеличению размера товара? Размер мы указываем в Характеристиках.
Все доступные сортировки указаны в настройках-Основные.
По характеристикам можно добавить фильтры к категориям. Товары-Каталог на редактирование-внизу фильтры
#5
Отправлено 10 Июнь 2013 - 12:05
#6
Отправлено 10 Июнь 2013 - 13:39
a_podarkov (10 Июнь 2013 - 12:05) писал:
Внизу Каталога есть ссылки на страницы. Нажмите на 2.http://ateljepodarko...atalog/?&page=2
#7
Отправлено 10 Июнь 2013 - 16:47
miyako (10 Июнь 2013 - 13:39) писал:
#8
Отправлено 10 Июнь 2013 - 18:13
a_podarkov (10 Июнь 2013 - 16:47) писал:
в разделе настройки -> основные -> выставите Шаг для выбора пользователем лимита выдачи товаров на страницу от 1 до 100
#10
Отправлено 11 Июнь 2013 - 11:09
Сake (08 Июнь 2013 - 00:45) писал:
Не совсем понятен ваш вопрос, вы хотите увеличить изображение сообщающее наличие товара? Если да, то для этого необходимо изменить(увеличить) изображение "stikerbg5.png" которое находиться у вас в разделе редактора тем.
за ответ про смещение "стикеров наличия" спасибо! поправил ))
но спрашивал я про изображение самого товара. хочется опустить его немного ниже (ближе к названию) и сделать больше.
#11
Отправлено 11 Июнь 2013 - 12:03
Serg83 (11 Июнь 2013 - 11:09) писал:
но спрашивал я про изображение самого товара. хочется опустить его немного ниже (ближе к названию) и сделать больше.
Отредактировать размеры изображений вы можете в Основных Настройках
#13
Отправлено 11 Июнь 2013 - 15:53
Сake (08 Июнь 2013 - 00:45) писал:
3) Немного не понятен ваш вопрос, вы знаете как переместить блок, но не знаете как изменить размер блока с фильтрами? или вы хотите чтобы фильтры отображались иначе например в строку по типу? Если да, то найдите в файле стилей
.contentTbodySearchFilterBlockValues { padding: 1em 0 1em 1em; }
и замените на
.contentTbodySearchFilterBlockValues { padding: 1em 0 1em 1em; display: inline-block; vertical-align: middle; margin: 0 25px; text-align: left; }
да, все верно.
я хочу переместить блок с фильтрами, изменить его размеры и сделать их отображение строкой, а не столбцом.
если приведененый код выше делает фильтры строкой, то подскажите как переместить их на место "сортировки товаров"
#14
#15
Отправлено 11 Июнь 2013 - 16:44
Serg83 (11 Июнь 2013 - 15:53) писал:
я хочу переместить блок с фильтрами, изменить его размеры и сделать их отображение строкой, а не столбцом.
если приведененый код выше делает фильтры строкой, то подскажите как переместить их на место "сортировки товаров"
в шаблоне HTML найдите блок
<!-- Если в тарифном плане подключен модуль фильтров по товарам --> {% IF TARIFF_FEATURE_GOODS_FILTERS %} <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам --> {% IF SHOW_GOODS_FILTERS %} <br /><h4 class="contentTbodyCatalogHeader noBorder">Фильтры по товарам</h4> <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь --> <form action="" method="get"> <div class="contentTbodySearchFilterBlock cornerAll"> <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) --> {% FOR filter_attr_list %} <em>{filter_attr_list.NAME}</em> <div class="contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br /> {% ENDFOR %} </div> {% ENDFOR %} <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> {% FOR filter_prop_list %} <em>{filter_prop_list.NAME}</em> <div class="contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br /> {% ENDFOR %} </div> {% ENDFOR %} </div> </form> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
уберите его и теперь зайдите в шаблон Товары
и сразу после
<h1>{CATEGORY_NAME}</h1>вставьте блок
<!-- Если в тарифном плане подключен модуль фильтров по товарам --> {% IF TARIFF_FEATURE_GOODS_FILTERS %} <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам --> {% IF SHOW_GOODS_FILTERS %} <br /><h4 class="contentTbodyCatalogHeader noBorder">Фильтры по товарам</h4> <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь --> <form action="" method="get"> <div class="contentTbodySearchFilterBlock cornerAll"> <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) --> <table> <tr> {% FOR filter_attr_list %} <td class="goodsListItem"> <div> <em>{filter_attr_list.NAME}</em> <div class="contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} /> <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br /> {% ENDFOR %} </div> </div> </td> {% IFNOT filter_attr_list.values.last %}{filter_attr_list.values.index | is_divided("3","</tr><tr>","")}{% ENDIF %} {% ENDFOR filter_attr_list.values %} </tr> </table> <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) --> <table> <tr> {% FOR filter_prop_list %} <td class="goodsListItem"> <div> <em>{filter_prop_list.NAME}</em> <div class="contentTbodySearchFilterBlockValues"> {% FOR values %} <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} > <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br /> {% ENDFOR %} </div> </div> </td> {% IFNOT filter_prop_list.values.last %}{filter_prop_list.values.index | is_divided("3","</tr><tr>","")}{% ENDIF %} {% ENDFOR filter_prop_list.values %} </tr> </table> </div> </form> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
теперь зайдите в файл main.css и найдите строчку
.contentTbodySearchFilterBlockValues {padding:1em 0 1em 1em;}замените ее на
.contentTbodySearchFilterBlockValues {padding: 1em 2px 1em 1em; text-align: left; border-right: 1px solid #f0f1f4 ;border-left: 1px solid #f0f1f4; height: 50px;}
#16
Отправлено 13 Июнь 2013 - 20:07
support 2.0 (11 Июнь 2013 - 16:32) писал:
получается изображение привязано к верхней границе.
можно его привязать к центру? или как его относительно названия расположить?
#17
Отправлено 13 Июнь 2013 - 21:03
support 2.0 (11 Июнь 2013 - 16:44) писал:
.contentTbodySearchFilterBlockValues {padding:1em 0 1em 1em;}замените ее на
.contentTbodySearchFilterBlockValues {padding: 1em 2px 1em 1em; text-align: left; border-right: 1px solid #f0f1f4 ;border-left: 1px solid #f0f1f4; height: 50px;}
спасибо.
фильтры перенести получилось.
но вот последний приведенный код не совсем верный.
фильтры остались горизонтальными.
использовал этот код
.contentTbodySearchFilterBlockValues { padding: 1em 0 1em 1em; display: inline-block; vertical-align: middle; margin: 0 15px; text-align: left; }
а подскажите как разместить название фильтра над его значениями?
как на картинке
#19
Отправлено 13 Июнь 2013 - 21:21
1) блок с "купить" и "вариантами доставки" прилипает к изображению товара... как его выровнять по правому краю с небольшим отступом?
2) блок с описанием товара "прилипает" к кромке сайта. как его немного отобдинуть, чтобы была видна граница описания товара справа?
3) Как отодвинуть текст описания товара от границы блока описания? сейчас они вполную к друг другу
#20
Отправлено 14 Июнь 2013 - 01:10
Serg83 (13 Июнь 2013 - 20:07) писал:
можно его привязать к центру? или как его относительно названия расположить?
Добавьте в ваш файл стилей main.css
.goodsListItemImage { display: table; margin: 0 auto; } .goodsListItemImage a { display: table-cell; vertical-align: middle; } .goodsListItemBlock a img { vertical-align: middle; }
Цитата
Найдите в вашем коде фильтра следующий код
<em>{filter_prop_list.NAME}</em> <div class="contentTbodySearchFilterBlockValues">
и замените его на
<div class="contentTbodySearchFilterBlockValues"> <em>{filter_prop_list.NAME}</em><br />
Цитата
В шаблоне "Товар" найдите
<h3>Отзывы о
и замените на
<h3 id="review">Отзывы о
и далее в необходимом месте например после кнопки в корзину - вставьте ссылку вида
<a href="#review">Перейти к отзывам ({GOODS_OPINION_RATING_CNT_ALL})</a>
Цитата
2) блок с описанием товара "прилипает" к кромке сайта. как его немного отобдинуть, чтобы была видна граница описания товара справа?
3) Как отодвинуть текст описания товара от границы блока описания? сейчас они вполную к друг другу
Добавьте в ваш файл стилей main.css
.goodsDataMainOrder td, .goodsDataMainOrder { padding: 5px; text-align: right; margin: 5px; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных