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


Размеры При Наведении


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

#1 zabota-mama

zabota-mama

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

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

Отправлено 01 Февраль 2017 - 11:48

Добрый!

Нужно при наведении на товар показать размеры в наличии (это где остаток >0).

Как на фотке:

1. Текст "Размеры в наличии" слева выровнять по названию товара.
2. На след.строчке с тем же выравниванием перечислить значения размеров.
3. Если в модификации есть еще и цвет, то его здесь не показываем.

Заранее  большущее спасибо!

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

  • Без имени.jpg


#2 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 01 Февраль 2017 - 13:56

Просмотр сообщенияzabota-mama (01 Февраль 2017 - 11:48) писал:

Добрый!

Нужно при наведении на товар показать размеры в наличии (это где остаток >0).

Как на фотке:

1. Текст "Размеры в наличии" слева выровнять по названию товара.
2. На след.строчке с тем же выравниванием перечислить значения размеров.
3. Если в модификации есть еще и цвет, то его здесь не показываем.

Заранее  большущее спасибо!
Здравствуйте, найдите  шаблоне Товары код
  {% IFNOT goods.goods_attr_list_empty %}
					  <div class="attr-list">
						{% FOR goods_attr_list %}
						{% IF goods.goods_attr_list.index > 2 %}{break}{% ENDIF %}
						<div class="attr">
						  <span class="name">{goods.goods_attr_list.NAME}:</span>
						  <span class="value">{goods.goods_attr_list.VALUE}</span>
						</div>				   
						{% ENDFOR %}		  
					  </div>
					{% ENDIF %}

после вставьте
<div class="mods_rest"><span>Размер:</span>
					  {%FOR mods%}
					  {%IF goods.mods.REST_VALUE>0%}
					  {%FOR v%}{% IF goods.mods.v.NAME=Размер%} {goods.mods.v.VALUE}, {%ENDIF%}{% ENDFOR v %}
					  {%ENDIF%}
					  {%ENDFOR%}
					</div>


#3 zabota-mama

zabota-mama

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

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

Отправлено 03 Февраль 2017 - 12:31

Большое спасибо за помощь.

Можно ли ещё доработать (см.картинку):
1. Перенести линию
2. Перенести 2-ю характеристику так, чтобы эти 2 характеристики визуально были рядом и только потом с отступом с линией шел бы Размер.
3. Отцентрировать эти 2 характеристики по левому краю их значений.

То есть все так как на картинке.

И чтобы все это работало и для раздела: "
С ЭТИМ ТОВАРОМ СМОТРЯТ"


Заранее спасибо!

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

  • Без имени.jpg


#4 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 03 Февраль 2017 - 14:38

Просмотр сообщенияzabota-mama (03 Февраль 2017 - 12:31) писал:

Большое спасибо за помощь.

Можно ли ещё доработать (см.картинку):
1. Перенести линию
2. Перенести 2-ю характеристику так, чтобы эти 2 характеристики визуально были рядом и только потом с отступом с линией шел бы Размер.
3. Отцентрировать эти 2 характеристики по левому краю их значений.

То есть все так как на картинке.

И чтобы все это работало и для раздела: "
С ЭТИМ ТОВАРОМ СМОТРЯТ"


Заранее спасибо!
Здравствуйте,
1,2,3. Найдите в файле main.css
.products-grid .item:hover .product-shop .attr-list {margin-top: 10px;height: 50px;}
.products-grid .item .product-shop .attr-list .attr {font-size: 12px;line-height: 16px;margin-bottom: 7px;padding-bottom: 7px;border-bottom: 1px solid #e5e5e5;}

замените на
.products-grid .item:hover .product-shop .attr-list {	margin-top: 10px;	height: 35px;	border-bottom: 1px solid #e5e5e5;	margin-bottom: 4px;}
.products-grid .item .product-shop .attr-list .attr { font-size: 12px;	line-height: 16px;	display: flex;	justify-content: center;}

К сожалению вывести в блоке "С этим товаром смотрят" блок "Размеры" нельзя, так как часть переменных необходимых для вывода такой информации недоступна.

#5 zabota-mama

zabota-mama

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

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

Отправлено 04 Февраль 2017 - 18:25

Большое спасибо.

Вот только не получилось :

Цитата

3. Отцентрировать эти 2 характеристики по левому краю их значений.
Получилось просто их разместить в центре. Можно ли сделать чтобы центрировались именно по левому краю значений (как на картинке в 2-м посте).

#6 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

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

Просмотр сообщенияzabota-mama (04 Февраль 2017 - 18:25) писал:

Большое спасибо.

Вот только не получилось :

Получилось просто их разместить в центре. Можно ли сделать чтобы центрировались именно по левому краю значений (как на картинке в 2-м посте).
Здравствуйте, расположить таким образом блоки можно,но только используя жесткую фиксацию блоков, но у Вас, есть товар, у которого значение характеристики длинное.  Например "Футболка для девочек загадочная кошка" и расположить по середине блок, значит вывести характеристики в две строки. Вам такой вариант подходит?
Можно так же зафиксировать данное разбиение название характеристики и значение характеристики на два блока, но со сдвигом влево.

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

  • QIP Shot - Screen 1115.png


#7 zabota-mama

zabota-mama

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

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

Отправлено 08 Февраль 2017 - 15:50

Спасибо, тогда я об этом подумаю.
Как сделать чтобы это на главной также работало.
И в "С этим товаром смотрят":
-убрать при наведении рейтинг, корзину и избранное
-убрать линию под характеристиками (она там не нужна, раз туда размеры нельзя вывести)
- добавить Быстрый просмотр

Спасибо.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных