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


Предпросмотр Картинок В Шаблоне Каталога

Автор Acum56, 26 мая 2014 11:04

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

#21 Acum56

Acum56

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

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

Отправлено 27 Июнь 2014 - 07:00

Просмотр сообщенияСake (27 Май 2014 - 06:24) писал:

Инструкция подойдет и для шаблона "Весна", вам необходимо только вместо

</figure>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>

искать в шаблоне строку

<div class="image goods-cat-image-medium-square">

и заменять её соответственно на

<div class="image goods-cat-image-medium-square items">
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>

далее добавляете стили в main.css и javascript в файл main.js

Инструкция по второй ссылке открывается, проверьте еще раз http://forum.storela...140#entry133044

Здравствуйте, подскажите пожалуйста как по этой аналогии сделать отображение картинок для:
1. Списка товаров на Главной
2. Списка новинок для Главной
3. Списка избранных товаров на Главной
4. Списка сопутствующих товаров в Шаблоне Товар???

#22 Vaccina

Vaccina

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

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

Отправлено 28 Июнь 2014 - 03:18

Изменения аналогичны, изменяются только переменные, для первых 3х пунктов изменения проводить в шаблоне HTML, а для 4го пункта в шаблоне Товар , так же по инструкции выше имеется инструкция для товаров на главной странице с кодом.

#23 Acum56

Acum56

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

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

Отправлено 28 Июнь 2014 - 07:13

Просмотр сообщенияVaccina (28 Июнь 2014 - 03:18) писал:

Изменения аналогичны, изменяются только переменные, для первых 3х пунктов изменения проводить в шаблоне HTML, а для 4го пункта в шаблоне Товар , так же по инструкции выше имеется инструкция для товаров на главной странице с кодом.
Я пробовал подобные манипуляции проводить, но они не увенчались успехом - ничего не происходит или вообще картинки пропадали

P.S как убрать подчеркивание под значками К Сравнению и В избранное в шаблоне ТОВАР и как сузить справа от фотографии товара расстояние между ценой, кнопкой купить и модификацией?
Еще в IE на разрешении 1920х1080 левое меню криво отображается

#24 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 28 Июнь 2014 - 08:14

Просмотр сообщенияAcum56 (28 Июнь 2014 - 07:13) писал:

Я пробовал подобные манипуляции проводить, но они не увенчались успехом - ничего не происходит или вообще картинки пропадали

P.S как убрать подчеркивание под значками К Сравнению и В избранное в шаблоне ТОВАР и как сузить справа от фотографии товара расстояние между ценой, кнопкой купить и модификацией?
Еще в IE на разрешении 1920х1080 левое меню криво отображается

Здравствуйте, попробуйте такой вариант

Убираем подчеркивание под значками
В конец файла "main.css".
Добавить код:
.product-info .cart .description {
border: none;
}

Расстояние между ценой и модификацией
В файле "main.css".
Найти:
.product-info .cart {
border-bottom: 1px solid #E7E7E7;
padding: 12px 5px 10px 5px;
margin-bottom: 5px;
color: #4D4D4D;
height: 62px;
position: relative;
}

Уменьшить значение на свое усмотрение:
height: 62px;

#25 koloskov

koloskov

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

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

Отправлено 26 Июль 2014 - 11:54

Добрый день.

Перечитал тему по быстрому предпросмотру..., а зацепится с откуда и с чего начать не получается. Мне нужен "усеченный" вариант для Весны в "таблице". Только такой вариант http://zimaleto-perm...аннего-развития Помогите пожайлуста.

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

  • 26_07_14_1.png

#26 Сake

Сake

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

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

Отправлено 29 Июль 2014 - 04:54

Вы можете попробовать это реализовать следующим образом - в шаблоне "Товары" после кода (для табличного отображения)

<!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
</div>

добавить следующий код

<div class="preview big hidden-tablet hidden-phone">
				<div class="wrapper">
				  <div class="col-1">
					<ul id="thumb_images">
				   
					  {% FOR images %}
					 
						<li>
						  <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
							<img class="thumb" alt="" src="{goods.images.SMALL}">
						  </a>
						</li>
					  
					  {% ENDFOR %}
				   
					</ul>
				  </div>
				  <div class="col-2 with_media">
					<div class="big_image goods-cat-image-medium-square">
					  <a href="{goods.URL_MIN_PRICE_NOW | url_amp}">
						<img class="goods-cat-image-medium" data-rel="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="">
					  </a>
					</div>
				   
					<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="fancybox popup_fancybox167 hidden"></a>
					<div class="product-name"><p title="{goods.NAME}"  onclick="javascript:document.location.href='{goods.URL_MIN_PRICE_NOW | url_amp}'" style="*height:;">{goods.NAME}</p></div>
					<div class="product-price">
					  <span class="new_price">{goods.MIN_PRICE_NOW | money_format}</span>
					  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
					  <s class="old_price">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</s>
					  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					  <s class="old_price">{goods.MIN_PRICE_OLD | money_format}</s>
					  {% ENDIF %}
					</div>
					<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
					  <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}" />
					  <a class="buy_button" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ">Быстрый заказ</a>
					  <!--a class="buy_button" onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">Добавить в корзину</a-->
					</form>
					<!-- Если есть возможность добавить товар в избранное -->
					{% IF goods.IS_HAS_IN_FAVORITES_LIST %}
					  <a class="wishlist add_to_wishlist_small_text added"
							data-action-is-add="0"
							data-action-add-url="{FAVORITES_ADD_URL}"
							data-action-delete-url="{FAVORITES_DELETE_URL}"
							data-action-add-title="Добавить «{goods.NAME}» в избранное"
							data-action-delete-title="Убрать «{goods.NAME}» из избранного"
							data-action-text-add="Добавить в избранное"
							data-action-text-delete="Удалить из избранного"
							title="Убрать «{goods.NAME}» из избранного"
							href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
					  >Удалить из избранного</a>
					{% ELSE %}
					  <a class="wishlist add_to_wishlist_small_text"
							data-action-is-add="1"
							data-action-add-url="{FAVORITES_ADD_URL}"
							data-action-delete-url="{FAVORITES_DELETE_URL}"
							data-action-add-title="Добавить «{goods.NAME}» в избранное"
							data-action-delete-title="Убрать «{goods.NAME}» из избранного"
							data-action-text-add="Добавить в избранное"
							data-action-text-delete="Удалить из избранного"
							title="Добавить «{goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
					  >Добавить в избранное</a>
					{% ENDIF %}
					<!-- END Если есть возможность добавить товар в избранное -->
				   
					<!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
					{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
					  {% IF goods.IS_HAS_IN_COMPARE_LIST %}
							<a class="compare add_to_compare_small_text added"
							  data-action-is-add="0"
							  data-action-add-url="{COMPARE_ADD_URL}"
							  data-action-delete-url="{COMPARE_DELETE_URL}"
							  data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
							  data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
							  data-action-text-add="Добавить к сравнению"
							  data-action-text-delete="Убрать из сравнения"
							  title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
							  href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							>Убрать из сравнения</a>
					  {% ELSE %}
							<a class="compare add_to_compare_small_text"
							  data-action-is-add="1"
							  data-action-add-url="{COMPARE_ADD_URL}"
							  data-action-delete-url="{COMPARE_DELETE_URL}"
							  data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
							  data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
							  data-action-text-add="Добавить к сравнению"
							  data-action-text-delete="Убрать из сравнения"
							  title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
							  href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							>Добавить к сравнению</a>
					  {% ENDIF %}
					{% ENDIF %}
					<!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
				  </div>
				</div>
			  </div>

далее в файл стилей необходимо добавить

.preview {position: absolute !important;z-index: 2000;top: 0;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;border: solid 1px #ccc;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; }  
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.preview form  {display: block;position: relative;text-align: center;margin: 10px 0 18px;}
.preview .wrapper-hover {padding: 5px 0 10px;background-color:#fff;text-align: left;}
.preview .wrapper-hover form{display: block;text-align: center;padding: 15px;}
.preview:hover .wrapper-hover, .preview:hover .wrapper-hover .product-name a:hover {color: #000;text-decoration:none}
.preview .product-price {font-size: 16px;line-height: 18px;margin: 0 0 0 8px;padding-bottom: 5px;cursor: text;text-align: center;}
.preview .product-price .new_price {font: 20px Tahoma,Geneva,sans-serif;color:#000;font-weight: normal;padding-right:5px}

далее в main.js необходимо добавить код

function previewInit(){
  $('.product').find('.product-image-wrapper.onhover').bind('mouseenter',function() {
	var UL_LI = $(this).parent().next(".preview.big").find("#thumb_images li");
	var number_of_LI = UL_LI.length;
	//alert(number_of_LI>1);
	if (number_of_LI>1)
	{
	  var pos = $(this).parent().position();
	  var width = $(this).outerWidth();
	  var width1 = $(this).parent().next(".preview").outerWidth();
	  $(this).parent().addClass('hover');
	  var width2 = width1 - width;
	  $(this).parent().next(".preview").css({
		  top: pos.top + 0 + "px",
		  left: (pos.left - width2) + "px"
	  })
	  $(this).parent().next(".preview.big").css({
		  top: pos.top + 0 + "px",
		  left: (pos.left - width2) + "px"
	  })
	  $(".preview").hide();
	  $(this).parent().next(".preview").show();
	}
  });
  $('.preview').bind('mouseleave',function() {
	  $('.product').removeClass('hover');
	  $(this).stop().hide();
	  $cur_prev=$(this);
	  $('.big_image a img',this).attr('src',$('.big_image a img',this).attr("data-rel"));
	 
  });
 
  $("a.image").bind('mouseenter',function() {
	  var image = $(this).attr("data-rel");
	  $(this).parent().parent().parent().next().find('.big_image a img').attr('src',image);
	  return false;
  });
}
$(previewInit);

#27 koloskov

koloskov

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

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

Отправлено 29 Июль 2014 - 12:05


Сake  сделал, но ничего не отображается :(   В шаблоне Товары предлагаемый блок вставил с 411 строчки. В стилях - в самом конце.

#28 Сake

Сake

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

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

Отправлено 30 Июль 2014 - 03:46

Понадобятся дополнительные правки под ваш шаблон. Найдите ранее добавленный код

<div class="preview big hidden-tablet hidden-phone">
								<div class="wrapper">
								  <div class="col-1">
										<ul id="thumb_images">
								  
										  {% FOR images %}
										
												<li>
												  <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
														<img class="thumb" alt="" src="{goods.images.SMALL}">
												  </a>
												</li>
										 
										  {% ENDFOR %}
								  
										</ul>
								  </div>
								  <div class="col-2 with_media">
										<div class="big_image goods-cat-image-medium-square">
										  <a href="{goods.URL_MIN_PRICE_NOW | url_amp}">
												<img class="goods-cat-image-medium" data-rel="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="">
										  </a>
										</div>
								  
										<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="fancybox popup_fancybox167 hidden"></a>
										<div class="product-name"><p title="{goods.NAME}"  onclick="javascript:document.location.href='{goods.URL_MIN_PRICE_NOW | url_amp}'" style="*height:;">{goods.NAME}</p></div>
										<div class="product-price">
										  <span class="new_price">{goods.MIN_PRICE_NOW | money_format}</span>
										  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
										  <s class="old_price">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</s>
										  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
										  <s class="old_price">{goods.MIN_PRICE_OLD | money_format}</s>
										  {% ENDIF %}
										</div>
										<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
										  <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}" />
										  <a class="buy_button" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ">Быстрый заказ</a>
										  <!--a class="buy_button" onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">Добавить в корзину</a-->
										</form>
										<!-- Если есть возможность добавить товар в избранное -->
										{% IF goods.IS_HAS_IN_FAVORITES_LIST %}
										  <a class="wishlist add_to_wishlist_small_text added"
														data-action-is-add="0"
														data-action-add-url="{FAVORITES_ADD_URL}"
														data-action-delete-url="{FAVORITES_DELETE_URL}"
														data-action-add-title="Добавить «{goods.NAME}» в избранное"
														data-action-delete-title="Убрать «{goods.NAME}» из избранного"
														data-action-text-add="Добавить в избранное"
														data-action-text-delete="Удалить из избранного"
														title="Убрать «{goods.NAME}» из избранного"
														href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
										  >Удалить из избранного</a>
										{% ELSE %}
										  <a class="wishlist add_to_wishlist_small_text"
														data-action-is-add="1"
														data-action-add-url="{FAVORITES_ADD_URL}"
														data-action-delete-url="{FAVORITES_DELETE_URL}"
														data-action-add-title="Добавить «{goods.NAME}» в избранное"
														data-action-delete-title="Убрать «{goods.NAME}» из избранного"
														data-action-text-add="Добавить в избранное"
														data-action-text-delete="Удалить из избранного"
														title="Добавить «{goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
										  >Добавить в избранное</a>
										{% ENDIF %}
										<!-- END Если есть возможность добавить товар в избранное -->
								  
										<!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
										{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
										  {% IF goods.IS_HAS_IN_COMPARE_LIST %}
														<a class="compare add_to_compare_small_text added"
														  data-action-is-add="0"
														  data-action-add-url="{COMPARE_ADD_URL}"
														  data-action-delete-url="{COMPARE_DELETE_URL}"
														  data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
														  data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
														  data-action-text-add="Добавить к сравнению"
														  data-action-text-delete="Убрать из сравнения"
														  title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
														  href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														>Убрать из сравнения</a>
										  {% ELSE %}
														<a class="compare add_to_compare_small_text"
														  data-action-is-add="1"
														  data-action-add-url="{COMPARE_ADD_URL}"
														  data-action-delete-url="{COMPARE_DELETE_URL}"
														  data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
														  data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
														  data-action-text-add="Добавить к сравнению"
														  data-action-text-delete="Убрать из сравнения"
														  title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
														  href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
														>Добавить к сравнению</a>
										  {% ENDIF %}
										{% ENDIF %}
										<!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
								  </div>
								</div>
						  </div>

в шаблоне "Товары" и замените его на

<div class="preview big hidden-tablet hidden-phone">
  <div class="wrapper">
	<div class="col-1">
	  <ul id="thumb_images">
		{% FOR images %}
		  <li>
			 <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
			   <img class="thumb" alt="" src="{goods.images.SMALL}">
			  </a>
		  </li>
		{% ENDFOR %}
	  </ul>
	</div>
  </div>
</div>

В файле стилей же найдите код

.preview {position: absolute !important;z-index: 2000;top: 0;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;border: solid 1px #ccc;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; } 
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.preview form  {display: block;position: relative;text-align: center;margin: 10px 0 18px;}
.preview .wrapper-hover {padding: 5px 0 10px;background-color:#fff;text-align: left;}
.preview .wrapper-hover form{display: block;text-align: center;padding: 15px;}
.preview:hover .wrapper-hover, .preview:hover .wrapper-hover .product-name a:hover {color: #000;text-decoration:none}
.preview .product-price {font-size: 16px;line-height: 18px;margin: 0 0 0 8px;padding-bottom: 5px;cursor: text;text-align: center;}
.preview .product-price .new_price {font: 20px Tahoma,Geneva,sans-serif;color:#000;font-weight: normal;padding-right:5px}

и замените его на

.preview {position: absolute !important;z-index: 2000;top: -80px;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}

От большей части кода пришлось отказаться, так как она сильно завязана на другом шаблоне. Проще будет реализовать это заново, чем переделывать. В дальнейшем понадобится еще изменить код javascript в файле main.js. Пожалуйста, выполните сначала эти изменения.

#29 koloskov

koloskov

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

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

Отправлено 30 Июль 2014 - 09:27

Просмотр сообщенияСake (30 Июль 2014 - 03:46) писал:

Понадобятся дополнительные правки под ваш шаблон.

в шаблоне "Товары" найдите код...
и замените его на

<div class="preview big hidden-tablet hidden-phone">
<div class="wrapper">
<div class="col-1">
	 <ul id="thumb_images">
	 {% FOR images %}
		 <li>
			 <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
			 <img class="thumb" alt="" src="{goods.images.SMALL}">
			 </a>
		 </li>
	 {% ENDFOR %}
	 </ul>
</div>
</div>
</div>

В файле стилей же найдите код ...
и замените его на

.preview {position: absolute !important;z-index: 2000;top: -80px;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}

В дальнейшем понадобится еще изменить код javascript в файле main.js. Пожалуйста, выполните сначала эти изменения.

Сделал!
1. в Товарах с 411строки
2. в mainах в самых концах!

#30 Сake

Сake

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

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

Отправлено 01 Август 2014 - 01:40

Далее добавьте в ваш файл стилей следующий код

body .prod_hold > div .prod-info-fly {
  bottom: 0;
  display: block;
  min-height: inherit;
  opacity: 1;
  position: static;
  width: 190px !important;
}
body .prod_hold > div .prod-info-fly .name,
body .prod_hold > div .prod-info-fly .price {
  display: none;
}
.preview .col-1 #thumb_images {
  height: auto;
  overflow: hidden;
}
body .prod_hold > div .prod-info-fly .preview {
  border: 1px solid #f5f5f5;
  top: 0;
}

а в файле main.js замените ранее добавленный код на следующий

$(function() {
  $('.product-list').on('hover', '.prod_hold div.image', function() {
	$('.prod_hold .preview').hide();
	$(this).closest('.prod_hold').find('.preview').show();
  }).on('hover', '#thumb_images a.image', function() {
	$(this).closest('.prod_hold')
	  .find('div.image img').attr('src', $(this).attr('data-rel'));
  })
});

Постоянное отображение панели кнопок необходимо, так как оно в противном случае закрывает большую часть изображения.

#31 koloskov

koloskov

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

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

Отправлено 01 Август 2014 - 10:15

Просмотр сообщенияСake (01 Август 2014 - 01:40) писал:

Далее добавьте в ваш файл стилей ...
Спасибо, картинки появились! Теперь еще со стилями помогите:
1. доп.картинки появляются, но не исчезают даже если курсор далеко на другой позиции..., а изчезнут только если курсор попадет именно на картинку другой позиции
2. хотелось чтобы доп.картинки :
а) обернуть в центральную рамку товарной позиции
б) перенос картинок на 2, 3... столбик когда их много

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

  • 01_08_14_1.png

#32 Alekseys

Alekseys

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

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

Отправлено 01 Август 2014 - 14:05




Просмотр сообщенияkoloskov (01 Август 2014 - 10:15) писал:


2. хотелось чтобы доп.картинки :
а) обернуть в центральную рамку товарной позиции
б) перенос картинок на 2, 3... столбик когда их много
Здравствуйте, к сожалению подобное не представляется возможным, для ограничения длинны есть вариант добавить полосу прокрутки. Если вас устроит такой вариант, найдите в main.css код:
.preview .col-1 {
width: 75px;}
и поменяйте на:
.preview .col-1 {
width: 75px;
height: 350px;
overflow-y: scroll;}

#33 koloskov

koloskov

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

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

Отправлено 01 Август 2014 - 14:16

Просмотр сообщенияAlekseys (01 Август 2014 - 14:05) писал:

height: 350px;
overflow-y: scroll;}
про это я знаю..., но хочу услышать ответ Cake  (подожду, мне не горит)

#34 Сake

Сake

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

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

Отправлено 02 Август 2014 - 00:11

Просмотр сообщенияkoloskov (01 Август 2014 - 10:15) писал:

Спасибо, картинки появились! Теперь еще со стилями помогите:
1. доп.картинки появляются, но не исчезают даже если курсор далеко на другой позиции..., а изчезнут только если курсор попадет именно на картинку другой позиции
2. хотелось чтобы доп.картинки :
а) обернуть в центральную рамку товарной позиции
б) перенос картинок на 2, 3... столбик когда их много

1. Попробуйте заменить ранее добавленный код в main.js

$(function() {
  $('.product-list').on('hover', '.prod_hold div.image', function() {
		$('.prod_hold .preview').hide();
		$(this).closest('.prod_hold').find('.preview').show();
  }).on('hover', '#thumb_images a.image', function() {
		$(this).closest('.prod_hold')
		  .find('div.image img').attr('src', $(this).attr('data-rel'));
  })
});

на следующий код

$(function() {
  $('.product-list').on({
	mouseenter: function() {
	  $(this).closest('.prod_hold').find('.preview').show();
	},
	mouseleave: function() {
	  $(this).closest('.prod_hold').find('.preview').hide();
	}
  }, '.prod_hold > div')
  .on('hover', '#thumb_images a.image', function() {
		$(this).closest('.prod_hold')
		  .find('div.image img').attr('src', $(this).attr('data-rel'));
  })
});

2. К сожалению, перенос в данном случае реализовать затруднительно, так как используется фиксированное положение. Исправить ситуацию можно используя прокрутку. Попробуйте применить следующий стиль - найдите в файле стилей main.css

body .prod_hold > div .prod-info-fly .preview {
  border: 1px solid #f5f5f5;
  top: 0;
}

и замените на

body .prod_hold > div .prod-info-fly .preview {
  border: 1px solid #f5f5f5;
  border-right: medium none;
  bottom: -6px;
  box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
  left: -86px !important;
  padding: 5px 0 5px 5px;
  top: -6px;
  overflow: hidden;
  overflow-y: auto;
}

#35 koloskov

koloskov

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

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

Отправлено 02 Август 2014 - 23:08

Просмотр сообщенияСake (02 Август 2014 - 00:11) писал:

К сожалению, перенос в данном случае реализовать затруднительно, так как используется фиксированное положение. Исправить ситуацию можно используя прокрутку.
прокрутка так прокрутка. Напоследок хочется весь предпросмотр обернуть условием, если картинка только одна, то он не работает..., ну или если картинок больше 1, то предпросмотр...

#36 Сake

Сake

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

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

Отправлено 05 Август 2014 - 01:51

Добавьте в конец вашего файла main.js

$(function() {
  $('.prod-info-fly .preview').each(function() {
	if ($(this).find('ul li').size() < 2) {
	   $(this).remove();
	}
  });
});

#37 koloskov

koloskov

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

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

Отправлено 05 Август 2014 - 08:55

Добавил. Вроде Ок, но случайно обнаружил, что например начиная с этой картинки и продолжая на следующих это условие перестает работать
Есть предположение, что не важно в какой папке, по после первого товара с 2-мя картинками, следующий товар уже начинается с предпросмотром даже с одно картинкой

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

  • 05_08_14_1.png

#38 Сake

Сake

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

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

Отправлено 06 Август 2014 - 00:45

Предположу что проблема проявляется при подгрузке товаров (постраничная навигация). Проблему можно попробовать решить следующим путем - найдите в вашем файле main.js ранее добавленный код

// Условие чтобы не показывать предпросмотр картинок, если она одна
$(function() {
  $('.prod-info-fly .preview').each(function() {
		if ($(this).find('ul li').size() < 2) {
		   $(this).remove();
		}
  });
});

и замените его на

// Условие чтобы не показывать предпросмотр картинок, если она одна
function removePreviewOnly()
{
  $('.prod-info-fly .preview').each(function() {
		if ($(this).find('ul li').size() < 2) {
		   $(this).remove();
		}
  });
}
$(function() {
  removePreviewOnly();
});

далее найдите строку

$container.masonry( 'appended', $newElems, true );

и замените её на

$container.masonry( 'appended', $newElems, true );
removePreviewOnly();

#39 koloskov

koloskov

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

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

Отправлено 06 Август 2014 - 13:44

Остались еще слои: каталогом накапливается разного рода инфа, хотелось бы при раскрытии быстрый просмотр был верхним слоем, а то сейчас он "предпоследний" слой

2. прокрутка..., она как бы в составе блока предпросмотра и часто отсекает правую часть превьюшки, а нельзя ли сделать какой-нибудь "padding" для нее, чтобы прокрутка возникала за пределами превьюшки

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

  • 06_08_14_1.png

#40 Alekseys

Alekseys

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

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

Отправлено 06 Август 2014 - 14:11

Просмотр сообщенияkoloskov (06 Август 2014 - 13:44) писал:

Остались еще слои: каталогом накапливается разного рода инфа, хотелось бы при раскрытии быстрый просмотр был верхним слоем, а то сейчас он "предпоследний" слой

2. прокрутка..., она как бы в составе блока предпросмотра и часто отсекает правую часть превьюшки, а нельзя ли сделать какой-нибудь "padding" для нее, чтобы прокрутка возникала за пределами превьюшки
Здравствуйте. Можно сделать так, чтобы превью было сверху, для этого в main.css в строках
#column-left .box {background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;}
и
body .prod_hold > div .prod-info-fly .preview {
border: 1px solid #f5f5f5;
border-right: medium none;
bottom: -6px;
box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
left: -86px !important;
padding: 5px 0 5px 5px;
top: -6px;
overflow: hidden;
overflow-y: auto;
}
и добавьте в них Z-Index
таким образом
#column-left .box {background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/; z-index: 1;}

body .prod_hold > div .prod-info-fly .preview {
border: 1px solid #f5f5f5;
border-right: medium none;
bottom: -6px;
box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
left: -86px !important;
padding: 5px 0 5px 5px;
top: -6px;
overflow: hidden;
overflow-y: auto;
z-index: 50;
}
чтоб в боковом меню Z-Index был меньше, чем в превью.
Обратно в Каталог товаров


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Весна
  5. → Каталог товаров
  6. Privacy Policy