Перейти к содержимому


Добавить Характеристику Товара На Превью


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 19

#1 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 24 Март 2017 - 01:24

Добрый день. Подскажите, пожалуйста.
Очень понравилась реализация отображения характеристик товара на превью товаров в каталоге. На сайте http://climl.ru/ (Рисунки 1, 2).

Можно ли реализовать что-то подобное на моём сайте clear-m.ru ?

Прикрепленные изображения

  • 1.jpg
  • 2.jpg


#2 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 28 Март 2017 - 13:03

Просмотр сообщенияBarmalei (24 Март 2017 - 01:24) писал:

Добрый день. Подскажите, пожалуйста.
Очень понравилась реализация отображения характеристик товара на превью товаров в каталоге. На сайте http://climl.ru/ (Рисунки 1, 2).

Можно ли реализовать что-то подобное на моём сайте clear-m.ru ?
Здравствуйте. В целом такое реализовать можно, но карточки товаров у Вас довольно узкие поэтому отображение будет не совсем красивым. Возможно, Вас устроит вариант вывода характеристик под названием товаров? или можно увеличить ширину карточки товара.

#3 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 29 Март 2017 - 01:00

Просмотр сообщенияStasya (28 Март 2017 - 13:03) писал:

Здравствуйте. В целом такое реализовать можно, но карточки товаров у Вас довольно узкие поэтому отображение будет не совсем красивым. Возможно, Вас устроит вариант вывода характеристик под названием товаров? или можно увеличить ширину карточки товара.

Можно увеличить ширину: сделать так-же, по три товара в строку. Но тогда это нужно провернуть: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.

#4 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 01 Апрель 2017 - 10:42

Просмотр сообщенияBarmalei (29 Март 2017 - 01:00) писал:

Можно увеличить ширину: сделать так-же, по три товара в строку. Но тогда это нужно провернуть: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.
Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.

#5 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 01 Апрель 2017 - 19:42

Просмотр сообщенияDanil (01 Апрель 2017 - 10:42) писал:

Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.
Спасибо! Получилось маленько корявенько, поэтому, я восстановил бэкап, как было. :rolleyes:
Ваш бэкап, так же сохранён (от 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)?

  Можно ли сделать данные изменения? Напомню, все изменения нужны: в каталоге, в товарах на главной странице, сопутствующие товары, "с этим товаром смотрят"; в товарах, выводимых в результатах поиска.

Прикрепленные изображения

  • 3.jpg
  • 4.jpg
  • 5.jpg
  • 6.jpg
  • 7.jpg


#6 Gost

Gost

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 81 сообщений

Отправлено 04 Апрель 2017 - 03:40

Здравствуйте, как подобное сделать а шаблоне "Пластик"?

#7 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 04 Апрель 2017 - 09:50

Просмотр сообщенияGost (04 Апрель 2017 - 03:40) писал:

Здравствуйте, как подобное сделать а шаблоне "Пластик"?

Здравствуйте. В шаблоне Товары Вам нужно после кода:

				<div class="img txtalgncnt">
				  <a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><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 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 04 Апрель 2017 - 17:44

Просмотр сообщенияMikDark (04 Апрель 2017 - 09:50) писал:

Здравствуйте. В шаблоне Товары Вам нужно после кода:

			 <div class="img txtalgncnt">
				 <a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><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 Gost

Gost

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 81 сообщений

Отправлено 05 Апрель 2017 - 10:22

Не работает такой вариант.

#10 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 13 Апрель 2017 - 08:00

Просмотр сообщенияDanil (01 Апрель 2017 - 10:42) писал:

Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.
Ответьте, пожалуйста:)

#11 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 13 Апрель 2017 - 15:34

Просмотр сообщенияBarmalei (01 Апрель 2017 - 19:42) писал:

Спасибо! Получилось маленько корявенько, поэтому, я восстановил бэкап, как было. :rolleyes:
Ваш бэкап, так же сохранён (от 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 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 14 Апрель 2017 - 15:04

Просмотр сообщенияGost (05 Апрель 2017 - 10:22) писал:

Не работает такой вариант.
Здравствуйте. Вам необходимо в шаблоне Товары найти код на 147 строке
<div class="name fnt14b">
			  <a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">{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="Перейти на страницу &laquo;{goods.NAME}&raquo;"><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 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 17 Апрель 2017 - 13:43

Просмотр сообщенияStasya (13 Апрель 2017 - 15:34) писал:

Внесла изменения Вам на сайт. Проверьте, пожалуйста. Сейчас Вам необходимо только в разделе Настройки-> Валюта изменить наименование валюты с рублей на руб или р.
Спасибо большое!! ^_^
Ещё пара уточнений, пожалуйста :)
1) Можно ли, всё-таки, изменить "Рублей" на "Руб." исключительно при отображении товаров таблицей? (Рисунок 1) Не хочу менять это в настройках: тогда на всём сайте будет "Руб.", вместо "Рублей" - а это не очень эстетично.
2) Скажите, где можно поменять шрифт/размер/цвет этой надписи (Рисунок 2)? Хочу сам подобрать шрифт. Или попробуйте поставить такой-же шрифт, как в описании товарной категории (Рисунок 4).
3) Скажите, где можно поменять шрифт/размер/цвет этой надписи (Рисунок 3)? Хочу сам подобрать шрифт. Или попробуйте поставить такой-же шрифт, как в описании товарной категории (Рисунок 4).
4) Если добавить к товару "Старую цену" - то превью коряво отображается (рисунок 5). Есть идеи, как сделать читабельно? Может, разместить "Старую цену" над "Новой"? А если не хватает места - то чуть-чуть вытянуть ячейку с товаром? Конечно-же, "Старая цена" должна писаться вместе с "Руб." а не "Рублей".

Жду, спасибо!

Прикрепленные изображения

  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg
  • 5.jpg


#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 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 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 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 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 21 Апрель 2017 - 12:35

Просмотр сообщенияMikDark (20 Апрель 2017 - 19:39) писал:

В шаблоне 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 для сужения кнопки. Десятичные отделить нельзя, к сожалению, т.к. мы убрали отображение валюты, а это все взаимосвязано

Ясно, спасибо!
Где можно поменять шрифт и цвет надписи кнопки "В корзину" при отображении товаров списком? На рисунке 4 скриншот
И шрифт/цвет кнопки в отображении товара (Рисунок 5)

Прикрепленные изображения

  • 4.jpg
  • 5.jpg


#18 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 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 Barmalei

Barmalei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 258 сообщений

Отправлено 21 Апрель 2017 - 13:47

Просмотр сообщенияDanil (21 Апрель 2017 - 13:26) писал:

Здравствуйте.
В конец main.css добавьте код
.listing .contm a.readmore {font: bold 12px/30px Tahoma, Geneva, sans-serif;color: #666;}
стили изменяйте на свои.

Спасибо, поменял. А на странице "Товар" как поменять? Рисунок 5

Прикрепленные изображения

  • 5.jpg


#20 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Апрель 2017 - 14:05

Просмотр сообщенияBarmalei (21 Апрель 2017 - 13:47) писал:

Спасибо, поменял. А на странице "Товар" как поменять? Рисунок 5
Измените стили в коде
.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 анонимных