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


Отображение Товаров В Каталогах


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

#1 Decor Help

Decor Help

    Пользователь

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

Отправлено 19 Май 2016 - 12:28

Подскажите пожалуйста как реализовать изменения отображения товаров в каталогах и на главной:

1) Как опустить кнопку "В корзину" под цену;
2) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы товар не затемнялся как сейчас, а "подсвечивался" по периметру;
3) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы вместо основной картинки товара показывалась вторая по списку из карточки товара;

картинку как сейчас и пример как нужно прикрепляю:

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

  • 000.jpg
  • 111.jpg


#2 Decor Help

Decor Help

    Пользователь

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

Отправлено 19 Май 2016 - 21:27

Помогите пожалуйста !!!

#3 Decor Help

Decor Help

    Пользователь

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

Отправлено 20 Май 2016 - 12:05

Кто нибудь ответит ?

#4 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 13:09

Просмотр сообщенияDecor Help (19 Май 2016 - 12:28) писал:

Подскажите пожалуйста как реализовать изменения отображения товаров в каталогах и на главной:

1) Как опустить кнопку "В корзину" под цену;
2) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы товар не затемнялся как сейчас, а "подсвечивался" по периметру;
3) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы вместо основной картинки товара показывалась вторая по списку из карточки товара;

картинку как сейчас и пример как нужно прикрепляю:

Здравствуйте, извините за ожидание, в шаблоне Товары найдите код:

					<div class="actions">
					  <!--a class="add-cart quick" title="Быстро оформить заказ"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>Быстрый заказ{% ENDIF %}</span></a-->
					  <a class="add-cart" title="В корзину" data-tooltip="В корзину"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>В корзину{% ENDIF %}</span></a>
					  <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
					  {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
						{% IF goods.IS_HAS_IN_COMPARE_LIST %}
						  <a class="add-compare added"
							data-action-is-add="0"
							data-action-add-url="{COMPARE_ADD_URL}"
							data-action-delete-url="{COMPARE_DELETE_URL}"
							data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
							data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
							data-prodname="{goods.NAME}"
							data-produrl="{goods.URL}"
							data-id="{goods.ID}"
							data-mod-id="{goods.MIN_PRICE_NOW_ID}"
							data-add-tooltip="В Сравнение"
							data-del-tooltip="Убрать из сравнения"
							data-tooltip="Убрать из сравнения"
							title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
							href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
						  ><i class="fa fa-retweet"></i></a>
						{% ELSE %}
						  <a class="add-compare"
							data-action-is-add="1"
							data-action-add-url="{COMPARE_ADD_URL}"
							data-action-delete-url="{COMPARE_DELETE_URL}"
							data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
							data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
							data-prodname="{goods.NAME}"
							data-produrl="{goods.URL}"
							data-id="{goods.ID}"
							data-mod-id="{goods.MIN_PRICE_NOW_ID}"
							data-add-tooltip="В Сравнение"
							data-del-tooltip="Убрать из сравнения"
							data-tooltip="В Сравнение"
							title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
							href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
						  ><i class="fa fa-retweet"></i></a>
						{% ENDIF %}
					  {% ENDIF %}
					  <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
					</div>

удалите его и вставьте перед кодом:

				  </div>
				</form>
			  </div>
			</div>
		  {% ENDFOR %}
		</div>
	  {% ELSE %}
		<!-- Вывод товаров Списком -->

В main.css найдите код:
.products-grid .item .item-inner .item-img .actions a {display: inline-block;position: absolute;background: rgba(0,0,0,0.5);color: #ffffff;font-weight: normal;height: 48px;line-height: 48px;bottom: 0;text-align: center;text-shadow: none;text-transform: uppercase;white-space: nowrap;border: 0;cursor: pointer;}
.products-grid .item .item-inner .item-img .actions a:hover, .products-grid .item .item-inner .item-img .actions a.added {background: #ff0551;color: #fff;}
.products-grid .item .item-inner .item-img .actions .add-cart {padding: 0;width: 300px;left: 0;}
.products-grid .item .item-inner .item-img .actions .add-cart span {display: inline-block;overflow: hidden;transition: all 300ms ease-in-out 0s;-webkit-transition: all 300ms ease-in-out 0s;-ms-transition: all 300ms ease-in-out 0s;}
.products-grid .item .item-inner .item-img .actions .add-cart i {margin-right: 10px;vertical-align: inherit;height: 48px;line-height: 48px;display: inline-block;font-size: 20px;}
.products-grid .item .item-inner .item-img .actions .add-cart .wrap_text {display: inline-block;font-size: 0.9em;text-align: left;vertical-align: top;white-space: nowrap;}
.products-grid .item .item-inner .item-img .actions a i {display: inline-block;height: 48px;line-height: 48px;font-size: 16px;}
.products-grid .item .item-inner .item-img .actions a.add-wishlist, .products-grid .item .item-inner .item-img .actions a.add-compare {padding: 0;width: 55px;margin-left: 1px;}
.products-grid .item .item-inner .item-img .actions a.add-wishlist {right: -54px;}
.products-grid .item .item-inner .item-img .actions a.add-compare {right: -110px;}

и замените на код:
.actions {margin-top: 10px;}
.actions a {display: inline-block;background: rgba(0,0,0,0.5);color: #ffffff;font-weight: normal;height: 48px;line-height: 48px;bottom: 0;text-align: center;text-shadow: none;text-transform: uppercase;white-space: nowrap;border: 0;cursor: pointer;}
.actions a:hover, .products-grid .item .item-inner .item-img .actions a.added {background: #ff0551;color: #fff;}
.actions .add-cart {padding: 0;width: 100%;left: 0;}
.actions .add-cart span {display: inline-block;overflow: hidden;transition: all 300ms ease-in-out 0s;-webkit-transition: all 300ms ease-in-out 0s;-ms-transition: all 300ms ease-in-out 0s;}
.actions .add-cart i {margin-right: 10px;vertical-align: inherit;height: 48px;line-height: 48px;display: inline-block;font-size: 20px;}
.add-cart .wrap_text {display: inline-block;font-size: 0.9em;text-align: left;vertical-align: top;white-space: nowrap;}
.actions a i {display: inline-block;height: 48px;line-height: 48px;font-size: 16px;}
.actions a.add-wishlist, .products-grid .item .item-inner .item-img .actions a.add-compare {padding: 0;width: 55px;margin-left: 1px;}
.actions a.add-wishlist {right: -54px;}
.actions a.add-compare {right: -110px;}


Далее в шаблоне HTML найдите код:

<div class="actions">
							  <!--a class="add-cart quick" title="Быстро оформить заказ"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>Быстрый заказ{% ENDIF %}</span></a-->
							  <a class="add-cart" title="В корзину" data-tooltip="В корзину"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>В корзину{% ENDIF %}</span></a>
							
							  <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							  {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
								{% IF index_page_goods.IS_HAS_IN_COMPARE_LIST %}
								  <a class="add-compare added"
									data-action-is-add="0"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_goods.NAME}"
									data-produrl="{index_page_goods.URL}"
									data-id="{index_page_goods.ID}"
									data-mod-id="{index_page_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="Убрать из сравнения"
									title="Убрать &laquo;{index_page_goods.NAME}&raquo; из списка сравнения с другими товарами"
									href="{COMPARE_DELETE_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ELSE %}
								  <a class="add-compare"
									data-action-is-add="1"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_goods.NAME}"
									data-produrl="{index_page_goods.URL}"
									data-id="{index_page_goods.ID}"
									data-mod-id="{index_page_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="В Сравнение"
									title="Добавить &laquo;{index_page_goods.NAME}&raquo; в список сравнения с другими товарами"
									href="{COMPARE_ADD_URL}?id={index_page_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ENDIF %}
							  {% ENDIF %}
							  <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							</div>

и переместите его перед кодом:

					   </div>
						</form>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% FOR index_page_new_goods %}

далее код:

							<div class="actions">
							  <!--a class="add-cart quick" title="Быстро оформить заказ"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_new_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>Быстрый заказ{% ENDIF %}</span></a-->
							  <a class="add-cart" title="В корзину" data-tooltip="В корзину"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_new_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>В корзину{% ENDIF %}</span></a>
							 
							  <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							  {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
								{% IF index_page_new_goods.IS_HAS_IN_COMPARE_LIST %}
								  <a class="add-compare added"
									data-action-is-add="0"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_new_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_new_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_new_goods.NAME}"
									data-produrl="{index_page_new_goods.URL}"
									data-id="{index_page_new_goods.ID}"
									data-mod-id="{index_page_new_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="Убрать из сравнения"
									title="Убрать &laquo;{index_page_new_goods.NAME}&raquo; из списка сравнения с другими товарами"
									href="{COMPARE_DELETE_URL}?id={index_page_new_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_new_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ELSE %}
								  <a class="add-compare"
									data-action-is-add="1"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_new_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_new_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_new_goods.NAME}"
									data-produrl="{index_page_new_goods.URL}"
									data-id="{index_page_new_goods.ID}"
									data-mod-id="{index_page_new_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="В Сравнение"
									title="Добавить &laquo;{index_page_new_goods.NAME}&raquo; в список сравнения с другими товарами"
									href="{COMPARE_ADD_URL}?id={index_page_new_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_new_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ENDIF %}
							  {% ENDIF %}
							  <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							</div>

переместите перед кодом:

						</div>
						</form>
					  </div>
					</li>
				  {% ENDFOR %}
				  {% FOR index_page_favorites_goods %}

и код:

							<div class="actions">
							  <!--a class="add-cart quick" title="Быстро оформить заказ"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_favorites_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>Быстрый заказ{% ENDIF %}</span></a-->
							  <a class="add-cart" title="В корзину" data-tooltip="В корзину"><span class="label">{% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_favorites_goods.MAX_REST_VALUE=0 %}Нет в наличии{% ELSE %}<i class="fa fa-shopping-cart"></i>В корзину{% ENDIF %}</span></a>
							 
							  <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							  {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
								{% IF index_page_favorites_goods.IS_HAS_IN_COMPARE_LIST %}
								  <a class="add-compare added"
									data-action-is-add="0"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_favorites_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_favorites_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_favorites_goods.NAME}"
									data-produrl="{index_page_favorites_goods.URL}"
									data-id="{index_page_favorites_goods.ID}"
									data-mod-id="{index_page_favorites_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="Убрать из сравнения"
									title="Убрать &laquo;{index_page_favorites_goods.NAME}&raquo; из списка сравнения с другими товарами"
									href="{COMPARE_DELETE_URL}?id={index_page_favorites_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_favorites_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ELSE %}
								  <a class="add-compare"
									data-action-is-add="1"
									data-action-add-url="{COMPARE_ADD_URL}"
									data-action-delete-url="{COMPARE_DELETE_URL}"
									data-action-add-title="Добавить &laquo;{index_page_favorites_goods.NAME}&raquo; в список сравнения с другими товарами"
									data-action-delete-title="Убрать &laquo;{index_page_favorites_goods.NAME}&raquo; из списка сравнения с другими товарами"
									data-prodname="{index_page_favorites_goods.NAME}"
									data-produrl="{index_page_favorites_goods.URL}"
									data-id="{index_page_favorites_goods.ID}"
									data-mod-id="{index_page_favorites_goods.MIN_PRICE_NOW_ID}"
									data-add-tooltip="В Сравнение"
									data-del-tooltip="Убрать из сравнения"
									data-tooltip="В Сравнение"
									title="Добавить &laquo;{index_page_favorites_goods.NAME}&raquo; в список сравнения с другими товарами"
									href="{COMPARE_ADD_URL}?id={index_page_favorites_goods.MIN_PRICE_NOW_ID}&amp;from={index_page_favorites_goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
								  ><i class="fa fa-retweet"></i></a>
								{% ENDIF %}
							  {% ENDIF %}
							  <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
							</div>

переместите перед кодом:

						  </div>
						</form>
					  </div>
					</li>
				  {% ENDFOR %}
				  <li class="item grid-sizer"></li>

2) Если так сделать, то не будет виден рейтинг, Вы уверены, что нужно именно  так сделать? "Подсвечиваться" должен весь товар или только картинка?

#5 Decor Help

Decor Help

    Пользователь

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

Отправлено 20 Май 2016 - 16:42

Спасибо! С кнопкой все получилось!

Да, отображение рейтинга тут не принципиально. Желательно подсветить весь товар как на прикрепленном скрине выше

#6 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 16:52

Просмотр сообщенияDecor Help (20 Май 2016 - 16:42) писал:

Спасибо! С кнопкой все получилось!

Да, отображение рейтинга тут не принципиально. Желательно подсветить весь товар как на прикрепленном скрине выше

В main.css код:
.products-grid .item .item-inner .item-img:hover > a:before {position: absolute;background-color: rgba(0,0,0,0.3);content: "";height: 100%;left: 0;margin: auto;top: 0;width: 100%;}

замените на код:
.products-grid .item .item-inner:hover {
	box-shadow: 0 0 30px rgba(201, 156, 195, 0.7);
}


#7 Decor Help

Decor Help

    Пользователь

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

Отправлено 20 Май 2016 - 17:28

В каталоге подсветка хорошо отображается, а на главной у крайних товаров обрезаются левая/правая сторона подсветки (скрин прикрепляю)

и как убрать серый отступ сверху и снизу картинки (уменьшить высоту блока)

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

  • aaa.jpg
  • bbb.jpg
  • ccc.jpg


#8 Decor Help

Decor Help

    Пользователь

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

Отправлено 23 Май 2016 - 12:21

Просмотр сообщенияDecor Help (20 Май 2016 - 17:28) писал:

В каталоге подсветка хорошо отображается, а на главной у крайних товаров обрезаются левая/правая сторона подсветки (скрин прикрепляю)

и как убрать серый отступ сверху и снизу картинки (уменьшить высоту блока)

Как исправить обрезанную подсветку на главной?

и как реализовать:
3) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы вместо основной картинки товара показывалась вторая по списку из карточки товара;

#9 Ирина345

Ирина345

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

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

Отправлено 23 Май 2016 - 17:35

Просмотр сообщенияDecor Help (23 Май 2016 - 12:21) писал:

Как исправить обрезанную подсветку на главной?

и как реализовать:
3) При наведении курсора мыши на товар (на картинку/ на текст) нужно что бы вместо основной картинки товара показывалась вторая по списку из карточки товара;
Здравствуйте, у Вас при наведение происходит затемнение изображение, выделения границ не вижу.
Найдите в шаблоне Товары код
<div class="products-grid row">
		  {% FOR goods %}
			<div class="item col-md-4 col-sm-6 col-xs-12">
			  <div class="item-inner" itemscope itemtype="http://schema.org/Product">
				<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				  <div class="item-img">
	  
замените на
 <div class="products-grid row">
		  {% FOR goods %}
			<div class="item col-md-4 col-sm-6 col-xs-12">
			  <div class="item-inner" itemscope itemtype="http://schema.org/Product">
				 <div class="catphoto">
					  {% FOR images %}
  <div> <img class="image" data-rel="{goods.images.SMALL}" src="{goods.images.SMALL}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}</div>
				<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				  <div class="item-img big_image">
в конец main.js добавьте
function previewInit(){
$('.catphoto img').hover(function() {
		var image = $(this).attr("data-rel");
	  $(this).closest('.item-inner').find('.big_image a img').attr('src',image);
	  return false;
  });
}
$(document).ready(function(){
  previewInit();
});
в конец файла main.css добавьте
.catphoto {
	position: absolute;
	left: -98px;
	z-index: 99;
	background: #fff;
	opacity: 0;
	transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
}
.catphoto img {
	width: 100px;
}

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

  • QIP Shot - Screen 330.png


#10 Decor Help

Decor Help

    Пользователь

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

Отправлено 23 Май 2016 - 20:45

Просмотр сообщенияИрина345 (23 Май 2016 - 17:35) писал:

Здравствуйте, у Вас при наведение происходит затемнение изображение, выделения границ не вижу.
Найдите в шаблоне Товары код
<div class="products-grid row">
		 {% FOR goods %}
		 <div class="item col-md-4 col-sm-6 col-xs-12">
			 <div class="item-inner" itemscope itemtype="http://schema.org/Product">
			 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
				 <input type="hidden" name="hash" value="{HASH}" />
				 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				 <div class="item-img">
	
замените на
<div class="products-grid row">
{% FOR goods %}
<div class="item col-md-4 col-sm-6 col-xs-12">
<div class="item-inner" itemscope itemtype="http://schema.org/Product">
<div class="catphoto">
{% FOR images %}
<div> <img class="image" data-rel="{goods.images.SMALL}" src="{goods.images.SMALL}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}</div>
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<div class="item-img big_image">
в конец main.js добавьте
function previewInit(){
$('.catphoto img').hover(function() {
	 var image = $(this).attr("data-rel");
	 $(this).closest('.item-inner').find('.big_image a img').attr('src',image);
	 return false;
});
}
$(document).ready(function(){
previewInit();
});
в конец файла main.css добавьте
.catphoto {
position: absolute;
left: -98px;
z-index: 99;
background: #fff;
opacity: 0;
transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-webkit-transition: all 0.3s ease-out 0s;
}
.catphoto img {
width: 100px;
}

изменение на другом сайте Аккаунт SL-329810

#11 Decor Help

Decor Help

    Пользователь

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

Отправлено 23 Май 2016 - 20:53

выше указанное изменение сделали ничего не изменилось

#12 Ирина345

Ирина345

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

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

Отправлено 24 Май 2016 - 13:41

Просмотр сообщенияDecor Help (23 Май 2016 - 20:53) писал:

выше указанное изменение сделали ничего не изменилось
Здравствуйте, найдите в файле main.css
#producttabs .pdt-content {
	width: 100%;
	overflow: hidden;
	text-align: center;
}

замените на

#producttabs .pdt-content {
	width: 100%;
   /* overflow: hidden;*/
	text-align: center;
}


далее в конец файла main.css добавьте
.products-grid .item .item-inner:hover .catphoto {
	opacity: 1;
}


#13 Decor Help

Decor Help

    Пользователь

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

Отправлено 25 Май 2016 - 00:36

Вот такая беда получилась.... (ниже прикрепляю картинку экрана)

При наведении на товар вылезает сбоку превьюшка всех фотографий из карточки товара
Фото товара меняется но как то не адекватно раз через раз и обратно не восстанавливается + после второй встает третья потом четвертая и тд фотографии ...

НУЖНО

навел курсор фото "аватар"  товара поменялся на вторую по счету в карточке товара ( отображает вторую только пока наведен курсор , аналогично выделению / затемнению )
как только мы убираем курсор с товара все показывается как и прежде - отображается исходный фото "аватар" товара

пример как на этом сайте : http://www.lamoda.ru.../bags-ryukzaki/

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

  • Снимок экрана 2016-05-25 в 0.23.08.jpg


#14 Vaccina

Vaccina

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

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

Отправлено 25 Май 2016 - 03:09

В этом случае вам лучше воспользоваться данной инструкцией по реализации задуманного:
http://forum.storela...-при-наведении/

#15 Decor Help

Decor Help

    Пользователь

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

Отправлено 25 Май 2016 - 09:29

Просмотр сообщенияVaccina (25 Май 2016 - 03:09) писал:

В этом случае вам лучше воспользоваться данной инструкцией по реализации задуманного:
http://forum.storela...-при-наведении/

Эта инструкция не подходит тк УВЕЛИЧЕНИЕ фото при наведении НЕ нужно !!!!

#16 Decor Help

Decor Help

    Пользователь

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

Отправлено 25 Май 2016 - 17:43

Просмотр сообщенияDecor Help (25 Май 2016 - 00:36) писал:

Вот такая беда получилась.... (ниже прикрепляю картинку экрана)

При наведении на товар вылезает сбоку превьюшка всех фотографий из карточки товара
Фото товара меняется но как то не адекватно раз через раз и обратно не восстанавливается + после второй встает третья потом четвертая и тд фотографии ...

НУЖНО

навел курсор фото "аватар"  товара поменялся на вторую по счету в карточке товара ( отображает вторую только пока наведен курсор , аналогично выделению / затемнению )
как только мы убираем курсор с товара все показывается как и прежде - отображается исходный фото "аватар" товара

пример как на этом сайте : http://www.lamoda.ru.../bags-ryukzaki/

Подскажите как реализовать

#17 Юля123

Юля123

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

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

Отправлено 26 Май 2016 - 10:07

Просмотр сообщенияDecor Help (25 Май 2016 - 09:29) писал:

Эта инструкция не подходит тк УВЕЛИЧЕНИЕ фото при наведении НЕ нужно !!!!

К сожалению, у нас нет доступа в каталоге к определенной фотографии, помимо главной. Поэтому реализовать вашу задумку не получается.




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

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