Добавить Характеристику Товара На Превью
#1
Отправлено 24 Март 2017 - 01:24
Очень понравилась реализация отображения характеристик товара на превью товаров в каталоге. На сайте http://climl.ru/ (Рисунки 1, 2).
Можно ли реализовать что-то подобное на моём сайте clear-m.ru ?
#2
Отправлено 28 Март 2017 - 13:03
Barmalei (24 Март 2017 - 01:24) писал:
Очень понравилась реализация отображения характеристик товара на превью товаров в каталоге. На сайте http://climl.ru/ (Рисунки 1, 2).
Можно ли реализовать что-то подобное на моём сайте clear-m.ru ?
#3
Отправлено 29 Март 2017 - 01:00
Stasya (28 Март 2017 - 13:03) писал:
Можно увеличить ширину: сделать так-же, по три товара в строку. Но тогда это нужно провернуть: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.
#4
Отправлено 01 Апрель 2017 - 10:42
Barmalei (29 Март 2017 - 01:00) писал:
Изменения Вам произвел, проверьте, пожалуйста.
#5
Отправлено 01 Апрель 2017 - 19:42
Danil (01 Апрель 2017 - 10:42) писал:
Изменения Вам произвел, проверьте, пожалуйста.
Ваш бэкап, так же сохранён (от 01.04.17 14:47:43)
Давайте попробуем так:
1) При наведении мыши на любой товар магазина, появляется окошко с кратким описанием товара (рисунок 3). Теперь это окно (с кратким описанием) не актуально, давайте его уберём.
2) При наведении на картинку товара или его название, пусть всплывает текст "Перейти на страницу "НАЗВАНИЕ ТОВАРА". Т.е. сделать так, как было в базовом шаблоне.. (Рисунки 4,5).
3) Теперь, собственно, как я хочу сделать превью товара: на рисунке 6:
3.1) В строке три товара
3.2) Под названием товара фотография(адекватного размера, как на рисунке 6)
3.3) Под фотографией товара короткое описание товара (тот текст, который всплывает в окошке на рисунке 3)
3.4) В левом нижнем углу цена. Но шрифт цены нужно сделать крупнее, чем сейчас; и подчеркнуть.
3.5) В правом нижнем углу кнопка "В корзину". Но её, получается, нужно сделать короче... Как сделать?
4) Микро-вопрос. Как сделать жирным шрифт короткого описания описания товаров, при отображении товаров списком (Рисунок 7)?
Можно ли сделать данные изменения? Напомню, все изменения нужны: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.
#6
Отправлено 04 Апрель 2017 - 03:40
#7
Отправлено 04 Апрель 2017 - 09:50
Gost (04 Апрель 2017 - 03:40) писал:
Здравствуйте. В шаблоне Товары Вам нужно после кода:
<div class="img txtalgncnt"> <a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </div
добавить:
<table class="charactir fnt12n txtalgnlft padd" style="width: 500px; margin: 10px;" cellspacing="0" cellpadding="0"> {%FOR goods_attr_list%} <tr> <td class="fnt12b" width="50%">{goods.goods_attr_list.NAME}</td> <td>{goods.goods_attr_list.VALUE} </td> </tr> {%ENDFOR%} </table>
#8
Отправлено 04 Апрель 2017 - 17:44
MikDark (04 Апрель 2017 - 09:50) писал:
<div class="img txtalgncnt"> <a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </div
добавить:
<table class="charactir fnt12n txtalgnlft padd" style="width: 500px; margin: 10px;" cellspacing="0" cellpadding="0"> {%FOR goods_attr_list%} <tr> <td class="fnt12b" width="50%">{goods.goods_attr_list.NAME}</td> <td>{goods.goods_attr_list.VALUE} </td> </tr> {%ENDFOR%} </table>
#9
Отправлено 05 Апрель 2017 - 10:22
#11
Отправлено 13 Апрель 2017 - 15:34
Barmalei (01 Апрель 2017 - 19:42) писал:
Ваш бэкап, так же сохранён (от 01.04.17 14:47:43)
Давайте попробуем так:
1) При наведении мыши на любой товар магазина, появляется окошко с кратким описанием товара (рисунок 3). Теперь это окно (с кратким описанием) не актуально, давайте его уберём.
2) При наведении на картинку товара или его название, пусть всплывает текст "Перейти на страницу "НАЗВАНИЕ ТОВАРА". Т.е. сделать так, как было в базовом шаблоне.. (Рисунки 4,5).
3) Теперь, собственно, как я хочу сделать превью товара: на рисунке 6:
3.1) В строке три товара
3.2) Под названием товара фотография(адекватного размера, как на рисунке 6)
3.3) Под фотографией товара короткое описание товара (тот текст, который всплывает в окошке на рисунке 3)
3.4) В левом нижнем углу цена. Но шрифт цены нужно сделать крупнее, чем сейчас; и подчеркнуть.
3.5) В правом нижнем углу кнопка "В корзину". Но её, получается, нужно сделать короче... Как сделать?
4) Микро-вопрос. Как сделать жирным шрифт короткого описания описания товаров, при отображении товаров списком (Рисунок 7)?
Можно ли сделать данные изменения? Напомню, все изменения нужны: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.
#12
Отправлено 14 Апрель 2017 - 15:04
Gost (05 Апрель 2017 - 10:22) писал:
<div class="name fnt14b"> <a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»">{goods.NAME}</a> </div>и сразу после него вставить код
<table class="charactir fnt12n txtalgnlft padd" style="width: 500px; margin: 10px;" cellspacing="0" cellpadding="0"> {%FOR goods_attr_list%} <tr> <td class="fnt12b" width="50%">{goods.goods_attr_list.NAME}</td> <td>{goods.goods_attr_list.VALUE} </td> </tr> {%ENDFOR%} </table>Далее необходимо найти код на 194 строке
<div class="img txtalgncnt"> <a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </div>и сразу после него вставить код
<table class="charactir fnt12n txtalgnlft padd" style="width: 500px; margin: 10px;" cellspacing="0" cellpadding="0"> {%FOR goods_attr_list%} <tr> <td class="fnt12b" width="50%">{goods.goods_attr_list.NAME}</td> <td>{goods.goods_attr_list.VALUE} </td> </tr> {%ENDFOR%} </table>
#13
Отправлено 17 Апрель 2017 - 13:43
Stasya (13 Апрель 2017 - 15:34) писал:
Ещё пара уточнений, пожалуйста
1) Можно ли, всё-таки, изменить "Рублей" на "Руб." исключительно при отображении товаров таблицей? (Рисунок 1) Не хочу менять это в настройках: тогда на всём сайте будет "Руб.", вместо "Рублей" - а это не очень эстетично.
2) Скажите, где можно поменять шрифт/размер/цвет этой надписи (Рисунок 2)? Хочу сам подобрать шрифт. Или попробуйте поставить такой-же шрифт, как в описании товарной категории (Рисунок 4).
3) Скажите, где можно поменять шрифт/размер/цвет этой надписи (Рисунок 3)? Хочу сам подобрать шрифт. Или попробуйте поставить такой-же шрифт, как в описании товарной категории (Рисунок 4).
4) Если добавить к товару "Старую цену" - то превью коряво отображается (рисунок 5). Есть идеи, как сделать читабельно? Может, разместить "Старую цену" над "Новой"? А если не хватает места - то чуть-чуть вытянуть ячейку с товаром? Конечно-же, "Старая цена" должна писаться вместе с "Руб." а не "Рублей".
Жду, спасибо!
#14
Отправлено 18 Апрель 2017 - 06:31
1. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div>
замените на:
<div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW}<span>руб.</span></a> </div>
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.descBlock { font-weight: bold; }
замените на:
.descBlock { font-family: arial,helvetica,sans-serif; font-size: 15px; color: #000; }
3. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.goodsListItemPriceNew { margin: 5px; text-align: center; width: 140px; position: absolute; left: -10px; bottom: 10px; text-decoration: underline; }
перед ним вставьте:
.goodsListItem .goodsListItemBlock > div > p { color: #000; font-size: 15px; }
4. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div>
замените на:
<div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT}<span>руб.</span></a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD}<span>руб.</span></a> {% ENDIF %} </div>
далее зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.goodsListItemPriceNew { margin: 5px; text-align: center; width: 140px; position: absolute; left: -10px; bottom: 10px; text-decoration: underline; }
после него пропишите:
.goodsListItemPriceOld { position: absolute; left: 10px; bottom: 0; } .goodsListItemPriceOld a { font-size: 12px; font-weight: normal; color: #999; }
#15
Отправлено 20 Апрель 2017 - 17:47
Vaccina (18 Апрель 2017 - 06:31) писал:
1. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div>
замените на:
<div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW}<span>руб.</span></a> </div>
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.descBlock { font-weight: bold; }
замените на:
.descBlock { font-family: arial,helvetica,sans-serif; font-size: 15px; color: #000; }
3. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.goodsListItemPriceNew { margin: 5px; text-align: center; width: 140px; position: absolute; left: -10px; bottom: 10px; text-decoration: underline; }
перед ним вставьте:
.goodsListItem .goodsListItemBlock > div > p { color: #000; font-size: 15px; }
4. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div>
замените на:
<div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT}<span>руб.</span></a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD}<span>руб.</span></a> {% ENDIF %} </div>
далее зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.goodsListItemPriceNew { margin: 5px; text-align: center; width: 140px; position: absolute; left: -10px; bottom: 10px; text-decoration: underline; }
после него пропишите:
.goodsListItemPriceOld { position: absolute; left: 10px; bottom: 0; } .goodsListItemPriceOld a { font-size: 12px; font-weight: normal; color: #999; }
Спасибо большое, всё отлично!
Правда, у меня теперь промежуток между разрядами чисел исчез.. Т.е., допустим, было "5 490 руб." - а стало "5490 руб.". Пропал пробел после тысячного разряда (в данном случае цифра "пять"). Как вернуть пробел?
И кнопку "В корзину" нельзя чуть сузить?
#16
Отправлено 20 Апрель 2017 - 19:39
Barmalei (20 Апрель 2017 - 17:47) писал:
Правда, у меня теперь промежуток между разрядами чисел исчез.. Т.е., допустим, было "5 490 руб." - а стало "5490 руб.". Пропал пробел после тысячного разряда (в данном случае цифра "пять"). Как вернуть пробел?
И кнопку "В корзину" нельзя чуть сузить?
В шаблоне main.css Вам нужно найти:
.goodsListItemBlock a.readmore { color: #ff0000; font-size: 17px; font-weight: bold; width: 110px; border-radius: 10px; border: 1px solid #b2d6ea; background: linear-gradient(to top, #c6e6f8, #ffffff); padding: 0; }
и уменьшить параметр width для сужения кнопки. Десятичные отделить нельзя, к сожалению, т.к. мы убрали отображение валюты, а это все взаимосвязано
#17
Отправлено 21 Апрель 2017 - 12:35
MikDark (20 Апрель 2017 - 19:39) писал:
.goodsListItemBlock a.readmore { color: #ff0000; font-size: 17px; font-weight: bold; width: 110px; border-radius: 10px; border: 1px solid #b2d6ea; background: linear-gradient(to top, #c6e6f8, #ffffff); padding: 0; }
и уменьшить параметр width для сужения кнопки. Десятичные отделить нельзя, к сожалению, т.к. мы убрали отображение валюты, а это все взаимосвязано
Ясно, спасибо!
Где можно поменять шрифт и цвет надписи кнопки "В корзину" при отображении товаров списком? На рисунке 4 скриншот
И шрифт/цвет кнопки в отображении товара (Рисунок 5)
#18
Отправлено 21 Апрель 2017 - 13:26
Barmalei (21 Апрель 2017 - 12:35) писал:
Где можно поменять шрифт и цвет надписи кнопки "В корзину" при отображении товаров списком? На рисунке 4 скриншот
И шрифт/цвет кнопки в отображении товара (Рисунок 5)
В конец main.css добавьте код
.listing .contm a.readmore {font: bold 12px/30px Tahoma, Geneva, sans-serif;color: #666;}стили изменяйте на свои.
#19
#20
Отправлено 21 Апрель 2017 - 14:05
Barmalei (21 Апрель 2017 - 13:47) писал:
.more-link , a.read-more, .paymentFormTbodySubmitButton { font: bold 12px/30px Tahoma, Geneva, sans-serif; color: #666; text-decoration: none; background: url("{ASSETS_IMAGES_PATH}read_more.jpg") no-repeat left top; height: 30px; width: 135px; padding-left: 15px; display: inline-block; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных