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


Весна/дизайн... В Товаре Как Перенести Модификации/cвойства И Доставку

Автор miniplaneta, 26 февр. 2014 09:38

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

#1 miniplaneta

miniplaneta

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

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

Отправлено 26 Февраль 2014 - 09:38

Добрый день.

В шаблоне Товар

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

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

  • 26_02.png

#2 miniplaneta

miniplaneta

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

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

Отправлено 26 Февраль 2014 - 11:55

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

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

  • 26_02_1.png

#3 miniplaneta

miniplaneta

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

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

Отправлено 26 Февраль 2014 - 13:29

Как искать ссылку на "Сравнение товара" ?

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

  • 26_02_2.png

#4 Сake

Сake

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

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

Отправлено 27 Февраль 2014 - 05:23

Цитата

Как искать ссылку на "Сравнение товара" ?

Попробуйте обновить ваш шаблон, так как в шаблоне по умолчанию на http://spring-demo.storeland.ru/ информация появляется автоматически без перезагрузки страницы.

Цитата

Нужно перенести блок модификаций выше..., т.е. с него должна начинаться инфа по товару (см.вложение справо)

В шаблоне "Товар" найдите и удалите код

<!-- Блок выбора модификаций для текущей товарной позиции -->
		<div class="goodsDataMainModificationsBlock description" {% IF GOODS_NO_CHOISE_IN_PROPERTIES_FOR_MODIFICATIONS %}style="display:none;"{% ENDIF %}>
		  {% FOR goods_modifications_properties %}
	  <div class="goodsDataMainModificationsBlockProperty">
	   <!-- Выдаем списки со свойствами для модификаций, чтобы определить какую модификацию товара хочет пользователь -->
	   {% FOR values %}
		<!-- Если это первый элемент в списке -->
		{% IF goods_modifications_properties.values.first %}
		  <strong>{goods_modifications_properties.NAME}:</strong><br />
		  <select name="form[properties][]">
		{% ENDIF %}
			<option value="{goods_modifications_properties.values.ID}" {% IF goods_modifications_properties.values.SELECTED %}selected="selected"{% ENDIF %}>{goods_modifications_properties.values.NAME}</option>
		<!-- Если это последний элемент в списке -->
		{% IF goods_modifications_properties.values.last %}
		  </select>
		{% ENDIF %}
		{% ENDFOR %}
		</div>				 
	  {goods_modifications_properties.index | is_divided("2","","")}
		  {% ENDFOR %}
 
		  <!-- Данные по модификациям для текущей товарной позиции -->
		  {% FOR goods_modifications %}
			<div class="goodsDataMainModificationsList" rel="{goods_modifications.PROPERTIES_SLUG}">
	   <input type="hidden" name="id" value="{goods_modifications.ID}" />
	   <input type="hidden" name="art_number" value="{goods_modifications.ART_NUMBER}" />
	   <input type="hidden" name="price_now" value="{goods_modifications.PRICE_NOW}" />
	   <div class="price_now_formated" style="display:none">{goods_modifications.PRICE_NOW | money_format}</div>
	   <input type="hidden" name="price_old" value="{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT}{% ELSE %}{goods_modifications.PRICE_OLD}{% ENDIF %}" />
	   <div class="price_old_formated" style="display:none">{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT | money_format}{% ELSE %}{goods_modifications.PRICE_OLD | money_format}{% ENDIF %}</div>
	   <input type="hidden" name="rest_value" value="{goods_modifications.REST_VALUE}" />
	   <input type="hidden" name="measure_id" value="{goods_modifications.MEASURE_ID}" />
	   <input type="hidden" name="measure_name" value="{goods_modifications.MEASURE_NAME}" />
	   <input type="hidden" name="measure_desc" value="{goods_modifications.MEASURE_DESC}" />
	   <input type="hidden" name="measure_precision" value="{goods_modifications.MEASURE_PRECISION}" />
	   <input type="hidden" name="is_has_in_compare_list" value="{goods_modifications.IS_HAS_IN_COMPARE_LIST}" />
	   <div class="description" style="display:none">{goods_modifications.DESCRIPTION}</div>
			</div>
		  {% ENDFOR %}
		   
	 <!-- Блок описания модификации -->
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	  {GOODS_MOD_DESCRIPTION}
	 </div>
	</div>

после чуть выше найдите код

<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="goodsDataForm cont700 hiden" >
	   <input type="hidden" name="hash" value="{HASH}" />
	  <input type="hidden" name="form[goods_from]" value="{GOODS_FROM}" />

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

<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="goodsDataForm cont700 hiden" >
	   <input type="hidden" name="hash" value="{HASH}" />
	  <input type="hidden" name="form[goods_from]" value="{GOODS_FROM}" />
	   
		<!-- Блок выбора модификаций для текущей товарной позиции -->
		<div class="goodsDataMainModificationsBlock description" {% IF GOODS_NO_CHOISE_IN_PROPERTIES_FOR_MODIFICATIONS %}style="display:none;"{% ENDIF %}>
		  {% FOR goods_modifications_properties %}
	   <div class="goodsDataMainModificationsBlockProperty">
	   <!-- Выдаем списки со свойствами для модификаций, чтобы определить какую модификацию товара хочет пользователь -->
	   {% FOR values %}
		<!-- Если это первый элемент в списке -->
		{% IF goods_modifications_properties.values.first %}
		  <strong>{goods_modifications_properties.NAME}:</strong><br />
		  <select name="form[properties][]">
		{% ENDIF %}
			<option value="{goods_modifications_properties.values.ID}" {% IF goods_modifications_properties.values.SELECTED %}selected="selected"{% ENDIF %}>{goods_modifications_properties.values.NAME}</option>
		<!-- Если это последний элемент в списке -->
		{% IF goods_modifications_properties.values.last %}
		  </select>
		{% ENDIF %}
		{% ENDFOR %}
		</div>				 
	  {goods_modifications_properties.index | is_divided("2","","")}
		  {% ENDFOR %}
 
		  <!-- Данные по модификациям для текущей товарной позиции -->
		  {% FOR goods_modifications %}
			<div class="goodsDataMainModificationsList" rel="{goods_modifications.PROPERTIES_SLUG}">
	   <input type="hidden" name="id" value="{goods_modifications.ID}" />
	   <input type="hidden" name="art_number" value="{goods_modifications.ART_NUMBER}" />
	   <input type="hidden" name="price_now" value="{goods_modifications.PRICE_NOW}" />
	   <div class="price_now_formated" style="display:none">{goods_modifications.PRICE_NOW | money_format}</div>
	   <input type="hidden" name="price_old" value="{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT}{% ELSE %}{goods_modifications.PRICE_OLD}{% ENDIF %}" />
	   <div class="price_old_formated" style="display:none">{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT | money_format}{% ELSE %}{goods_modifications.PRICE_OLD | money_format}{% ENDIF %}</div>
	   <input type="hidden" name="rest_value" value="{goods_modifications.REST_VALUE}" />
	   <input type="hidden" name="measure_id" value="{goods_modifications.MEASURE_ID}" />
	   <input type="hidden" name="measure_name" value="{goods_modifications.MEASURE_NAME}" />
	   <input type="hidden" name="measure_desc" value="{goods_modifications.MEASURE_DESC}" />
	   <input type="hidden" name="measure_precision" value="{goods_modifications.MEASURE_PRECISION}" />
	   <input type="hidden" name="is_has_in_compare_list" value="{goods_modifications.IS_HAS_IN_COMPARE_LIST}" />
	   <div class="description" style="display:none">{goods_modifications.DESCRIPTION}</div>
			</div>
		  {% ENDFOR %}
		   
	 <!-- Блок описания модификации -->
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	  {GOODS_MOD_DESCRIPTION}
	 </div>
	</div>

Цитата

Перенести доставку под вкладку как в Осени: т.е. чтобы стали вкладки Общее - Доставка - Отзывы...

Найдите в шаблоне "Товар" строку

<a href="javascript:tabSwitch(1);" id="tab_1" class="active">Общее</a>

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

<a href="javascript:tabSwitch(1);" id="tab_1" class="active">Общее</a>
<a href="javascript:tabSwitch(5);" id="tab_5">Доставка</a>

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

<!-- Блок описания вариантов доставки -->
	  <div class="span12">
		<h4>Условия доставки</h4>
		{% FOR goods_delivery %}
		  <h5>Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
		  <div class="span12" >
			<p style="color: #333;">{goods_delivery.DESC}</p>
			{% IF goods_delivery.rules_empty %}
			  {% IF goods_delivery.PRICE=0 %}
				<strong class="black">Стоимость доставки: {goods_delivery.PRICE | money_format}</strong>
			  {% ELSE %}
				Стоимость доставки: {goods_delivery.PRICE | money_format}</span>
			  {% ENDIF %}
			{% ELSE %}
			  <table class="table">
				<thead>
				  <tr>
					<td><h5>Стоимость доставки зависит от суммы заказа</h5></td>
				  </tr>
				</thead>
				<tbody style="color: #333;">
				  {% FOR rules %}
					<tr>
					  <td>Для заказов больше {goods_delivery.rules.SUM_MORE_PRICE | money_format} - доставка {goods_delivery.rules.PRICE | money_format}</td>
					</tr>
				  {% ENDFOR %}
				  <tr>
					<td>Для заказов меньше {goods_delivery.SUM_LESS_PRICE | money_format} - доставка {goods_delivery.PRICE | money_format}</td>
				  </tr>
				</tbody>
			  </table>
			{% ENDIF %}
		  </div>
		{% ENDFOR %}
	  </div>
	  <!-- /Блок описания вариантов доставки -->

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

<div id="content_1" class="product-info tab-content">

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

<div id="content_5" class="tab-content">
	<!-- Блок описания вариантов доставки -->
	  <div class="span12">
		<h4>Условия доставки</h4>
		{% FOR goods_delivery %}
		  <h5>Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
		  <div class="span12" >
			<p style="color: #333;">{goods_delivery.DESC}</p>
			{% IF goods_delivery.rules_empty %}
			  {% IF goods_delivery.PRICE=0 %}
				<strong class="black">Стоимость доставки: {goods_delivery.PRICE | money_format}</strong>
			  {% ELSE %}
				Стоимость доставки: {goods_delivery.PRICE | money_format}</span>
			  {% ENDIF %}
			{% ELSE %}
			  <table class="table">
				<thead>
				  <tr>
					<td><h5>Стоимость доставки зависит от суммы заказа</h5></td>
				  </tr>
				</thead>
				<tbody style="color: #333;">
				  {% FOR rules %}
					<tr>
					  <td>Для заказов больше {goods_delivery.rules.SUM_MORE_PRICE | money_format} - доставка {goods_delivery.rules.PRICE | money_format}</td>
					</tr>
				  {% ENDFOR %}
				  <tr>
					<td>Для заказов меньше {goods_delivery.SUM_LESS_PRICE | money_format} - доставка {goods_delivery.PRICE | money_format}</td>
				  </tr>
				</tbody>
			  </table>
			{% ENDIF %}
		  </div>
		{% ENDFOR %}
	  </div>
	  <!-- /Блок описания вариантов доставки -->
  </div>
  <div id="content_1" class="product-info tab-content">

далее в файле стилей main.css найдите

#content_2, #content_3, #content_4 {
  display: none;
}

и замените на

#content_2, #content_3, #content_4, #content_5 {
  display: none;
}

Цитата

Добавить увеличение картинки как в Сиянии..., типа под картинкой сделать ссылку "увеличить" (лучше кнопкой..., хотя я ее и сам потом прикручу)

В шаблоне "Товар" найдите код

{% ENDIF %}
				 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>						
		  {% IF goods_images.last %}

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

{% ENDIF %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>						
		  {% IF goods_images.last %}

далее найдите код

<!-- Большое изображение -->
	  <div class="image">
		<div id="wrap" style="top:0px;z-index:9999;position:relative;">
		  {% IF GOODS_IMAGE_EMPTY %}
			<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
		  {% ELSE %}
			<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
			  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
			</a>
		  {% ENDIF %}		 
		</div>
	  </div>

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

<!-- Большое изображение -->
	  <div class="image">
		<div id="wrap" style="top:0px;z-index:9999;position:relative;">
		  {% IF GOODS_IMAGE_EMPTY %}
			<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
		  {% ELSE %}
			<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
			  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
			</a>
		  {% ENDIF %}		 
		</div>
		<center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
	  </div>
	 
	  {% IFNOT goods_images_empty %}
		<div class="goodsImageList" style="display: none;">
		{% FOR goods_images %}
		   <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
		{% ENDFOR %}
		</div>
	  {% ENDIF %}

далее в файл main.js добавьте код

$(function() {
$('a[rel="gallery"]').fancybox();
  
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a').click(function(){
	  if($(this).closest('.image-additional').length) {
		$('.goodsImageZoom').attr('data', $(this).attr('data'));
		return(true);
	  }
	  $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
	  return(false);
  });
});

Цитата

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

Найдите в файле стилей main.css

#footer .column {
  margin-bottom: 15px;
  min-height: 348px;
}

и замените на

#footer .column {
  margin-bottom: 15px;
}

#5 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 27 Февраль 2014 - 09:31

✔

#6 miniplaneta

miniplaneta

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

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

Отправлено 27 Февраль 2014 - 14:18

miniplaneta сказал:

Нужно перенести блок модификаций выше...

Спасибо Сake..., я сильно продвинулся! остались кое-какие шероховатости. Главное что перестало работать кол-во! Т.е. набираешь например 2шт (любое больше 1шт), купить..., а в заказ попадает всегда 1шт.

Кроме того

рис.1

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

рис.2

адаптивность границы надо подправить

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

  • 27_02_1.png
  • 27_02_2.png

#7 miniplaneta

miniplaneta

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

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

Отправлено 27 Февраль 2014 - 14:24

Этот блок цены выдает:

<!-- Старая цена -->
  <!-- Если на товар действует скидка -->
  {% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<span class="price-old goodsDataMainModificationPriceOld" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
  {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}
</span>
  <!-- Если старая цена была больше новой -->
  {% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<span class="price-old goodsDataMainModificationPriceOld" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_OLD} руб.">
  {GOODS_MOD_PRICE_OLD | money_format}
</span>
  {% ENDIF %}
  <!-- /Старая цена -->
</div>

но выделенное красным цветом, я что-то не наблюдаю

#8 Сake

Сake

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

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

Отправлено 28 Февраль 2014 - 01:47

Цитата

Главное что перестало работать кол-во! Т.е. набираешь например 2шт (любое больше 1шт), купить..., а в заказ попадает всегда 1шт.

При переносе в шаблоне "Товар" вы допустили ошибку добавив закрывающий комментарий после закрывающего тега </form>

<!-- Блок описания модификации
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	  {GOODS_MOD_DESCRIPTION}
	 </div>
	</div>
	  </form> конец вышестоящего штатного блока, который я перенес выше -->

замените на

<!-- Блок описания модификации
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	  {GOODS_MOD_DESCRIPTION}
	 </div>
	</div> конец вышестоящего штатного блока, который я перенес выше -->
	  </form>

#9 miniplaneta

miniplaneta

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

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

Отправлено 28 Февраль 2014 - 09:03

Просмотр сообщенияСake (28 Февраль 2014 - 01:47) писал:

При переносе в шаблоне "Товар" вы допустили ошибку добавив закрывающий комментарий после закрывающего тега </form>
cпасибо! а как с вопросами  http://forum.storela...ци/#entry124082 на рисунках?

#10 Сake

Сake

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

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

Отправлено 01 Март 2014 - 06:18

Инструкция по дальнейшим изменениям была бесмысленна, так как нарушение структуры могло повлиять на дальнейшие добавляемые стили. На данный момент в инструкции не нуждается пункт 2.

По остальным пунктам - найдите в вашем шаблоне "Товар"

<strong>Доп.информация:</strong><br />
{GOODS_MOD_DESCRIPTION}

и замените на

<strong>Доп.информация:</strong><br />
<span>{GOODS_MOD_DESCRIPTION}</span>

далее найдите

<strong>Товар участвует в акции &laquo;{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}&raquo;:</strong><br />
до {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} (вкл.) скидка составляет {GOODS_MOD_MAX_DISCOUNT}% !

и замените на

<strong>Товар участвует в акции &laquo;{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}&raquo;:</strong><br />
<span>до {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} (вкл.) скидка составляет {GOODS_MOD_MAX_DISCOUNT}% !</span>

далее в файл стилей main.css добавьте

.goodsDataMainModificationsDescriptionBlock > span,
.goodsDataMainDiscountBlock > span {
  background: none repeat scroll 0 0 #EEEEEE;
  border-color: #DDDDDD #EEEEEE #EEEEEE #DDDDDD;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 4px;
}

далее найдите

.product-info .price {
  border-bottom: 1px solid #E7E7E7;
  color: #333333;
  font-size: 24px;
  margin-bottom: 20px;
  overflow: auto;
  padding: 0 5px 10px;
}

и замените на

.product-info .price {
  border-bottom: 1px solid #E7E7E7;
  color: #333333;
  font-size: 24px;
  margin-bottom: 5px;
  overflow: auto;
  padding: 0 5px 10px;
}

далее в шаблоне "HTML" найдите

<div class="box-heading">Каталог</div>

и замените на

<div class="box-heading"><a href="{CATALOG_URL}" title="Перейти в каталог товаров">Каталог</a></div>

далее в шаблоне "Товар" найдите

<!-- /Блок описания вариантов доставки -->
	</div>
  </div> 
 
  {% IF GOODS_DESCRIPTION_LARGE || GOODS_SEO_DESCRIPTION_SHORT || GOODS_SEO_DESCRIPTION_LARGE %}

и замените на

<!-- /Блок описания вариантов доставки -->
	</div>
	<div style="clear: both;"></div>
  </div> 
 
  {% IF GOODS_DESCRIPTION_LARGE || GOODS_SEO_DESCRIPTION_SHORT || GOODS_SEO_DESCRIPTION_LARGE %}

#11 miniplaneta

miniplaneta

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

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

Отправлено 03 Март 2014 - 21:05

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


<strong>Доп.информация:</strong><br />
<span>{GOODS_MOD_DESCRIPTION}</span>

далее в файл стилей main.css добавьте

.goodsDataMainModificationsDescriptionBlock > span,
.goodsDataMainDiscountBlock > span {
background: none repeat scroll 0 0 #EEEEEE;
border-color: #DDDDDD #EEEEEE #EEEEEE #DDDDDD;
border-radius: 2px;
border-style: solid;
border-width: 1px;
display: inline-block;
padding: 4px;
}


еще бы цвет шрифта значений в этом классе как-то задать style="color: #333;

попробовал так  <span style="color: #333;>{GOODS_MOD_DESCRIPTION}</span> но не получилось...

и в заключении хотелось так же затонировать окошечко "Кол-во"..., для этого тег  <span> надо где-то добавить здесь:

    <!-- Добавление в корзину -->
    <div class="cart">
  <div>
    <div class="plus_minus_quantity">
  <span class="qty-minus">-</span>
                <input type="text" value="1"  size="2" maxlength="5" class="quantity" name="form[goods_mod_quantity]">
                  <span class="qty-plus">+</span>
                    </div>
    <input type="button" value="Купить" id="button-cart" class="button button_cart_product" onclick="quickorder('.goodsDataForm'); return false;"  title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>
    <!-- input type="button" value="Добавить в корзину" id="button-cart" class="button button_cart_product" onclick="$('.goodsDataForm').submit(); return false;"  title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/ -->
  </div>
    </div>
    <!-- /Добавление в корзину -->

ну а после добавить сюда

.goodsDataMainModificationsDescriptionBlock > span,
.goodsDataMainDiscountBlock > span {

я наверное и сам соображу

#12 Castiel

Castiel

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

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

Отправлено 05 Март 2014 - 08:29

Просмотр сообщенияminiplaneta (03 Март 2014 - 21:05) писал:

еще бы цвет шрифта значений в этом классе как-то задать style="color: #333;

попробовал так  <span style="color: #333;>{GOODS_MOD_DESCRIPTION}</span> но не получилось...

и в заключении хотелось так же затонировать окошечко "Кол-во"..., для этого тег  <span> надо где-то добавить здесь:

<!-- Добавление в корзину -->
<div class="cart">
  <div>
<div class="plus_minus_quantity">
  <span class="qty-minus">-</span>
<input type="text" value="1"  size="2" maxlength="5" class="quantity" name="form[goods_mod_quantity]">
  <span class="qty-plus">+</span>
</div>
<input type="button" value="Купить" id="button-cart" class="button button_cart_product" onclick="quickorder('.goodsDataForm'); return false;"  title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>
<!-- input type="button" value="Добавить в корзину" id="button-cart" class="button button_cart_product" onclick="$('.goodsDataForm').submit(); return false;"  title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/ -->
  </div>
</div>
<!-- /Добавление в корзину -->

ну а после добавить сюда

.goodsDataMainModificationsDescriptionBlock > span,
.goodsDataMainDiscountBlock > span {

я наверное и сам соображу

Здравствуйте, попробуйте так
<span style="color: #333 !important;>{GOODS_MOD_DESCRIPTION}</span>

Уточните пожалуйста, что имеется ввиду под фразой

Цитата

затонировать окошечко "Кол-во".

#13 Ello4ka

Ello4ka

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

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

Отправлено 13 Март 2014 - 17:02

Цитата

Цитата


Добавить увеличение картинки как в Сиянии..., типа под картинкой сделать ссылку "увеличить" (лучше кнопкой..., хотя я ее и сам потом прикручу)
В шаблоне "Товар" найдите код



{% ENDIF %}
<a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
  {% IF goods_images.last %}
и замените его на


{% ENDIF %}
<a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
  {% IF goods_images.last %}
далее найдите код


<!-- Большое изображение -->
  <div class="image">
<div id="wrap" style="top:0px;z-index:9999;position:relative;">
  {% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
  {% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
  {% ENDIF %}
</div>
  </div>
и замените его на


<!-- Большое изображение -->
  <div class="image">
<div id="wrap" style="top:0px;z-index:9999;position:relative;">
  {% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
  {% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
  {% ENDIF %}
</div>
<center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
  </div>

  {% IFNOT goods_images_empty %}
<div class="goodsImageList" style="display: none;">
{% FOR goods_images %}
   <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
{% ENDFOR %}
</div>
  {% ENDIF %}
далее в файл main.js добавьте код


$(function() {
$('a[rel="gallery"]').fancybox();
  
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a').click(function(){
  if($(this).closest('.image-additional').length) {
$('.goodsImageZoom').attr('data', $(this).attr('data'));
return(true);
  }
  $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
  return(false);
  });
});

Что-то не получается с увеличением. Посмотрите, пожалуйста, почему.

#14 gesha81

gesha81

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

  • Пользователи
  • PipPipPip
  • 129 сообщений
  • ГородЧита

Отправлено 20 Март 2014 - 04:58

Просмотр сообщенияEllo4ka (13 Март 2014 - 17:02) писал:

Что-то не получается с увеличением. Посмотрите, пожалуйста, почему.
Да действительно, ссылка появилась, но с картинкой ничего не происходит. помогите найти ошибку

#15 gesha81

gesha81

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

  • Пользователи
  • PipPipPip
  • 129 сообщений
  • ГородЧита

Отправлено 20 Март 2014 - 05:40

Собственно нужно что бы картикна при клике на ссылку "увеличить" появлялась в всплывающем окне  в умеличенном виде.
на данный же момент в том коде который дали в ссылке <centerclass="goodsImageZoom"data="{GOODS_IMAGE_ID}"><ahref="#">Увеличить изображение</a></center>
вообще отсутствует путь на картинку и параметр  target="_blank" отвечающий за открытие в новом окне (всплвающем окне).
Помогите пожалуйста.. очень актуально

#16 Castiel

Castiel

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

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

Отправлено 20 Март 2014 - 06:14

Просмотр сообщенияgesha81 (20 Март 2014 - 05:40) писал:

Собственно нужно что бы картикна при клике на ссылку "увеличить" появлялась в всплывающем окне  в умеличенном виде.
на данный же момент в том коде который дали в ссылке <centerclass="goodsImageZoom"data="{GOODS_IMAGE_ID}"><ahref="#">Увеличить изображение</a></center>
вообще отсутствует путь на картинку и параметр  target="_blank" отвечающий за открытие в новом окне (всплвающем окне).
Помогите пожалуйста.. очень актуально

Здравствуйте, уточните пожалуйста номер аккаунта на котором у вас возникают проблемы.

#17 gesha81

gesha81

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

  • Пользователи
  • PipPipPip
  • 129 сообщений
  • ГородЧита

Отправлено 20 Март 2014 - 07:09

номер аккаунта  SL-279399

#18 Castiel

Castiel

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

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

Отправлено 20 Март 2014 - 07:10

Просмотр сообщенияEllo4ka (13 Март 2014 - 17:02) писал:

Что-то не получается с увеличением. Посмотрите, пожалуйста, почему.

Здравствуйте, вы не добавили в main.js данный код
// Кнопка для увеличения изображения
$(function() {
$('a[rel="gallery"]').fancybox();
 
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a').click(function(){
		  if($(this).closest('.image-additional').length) {
				$('.goodsImageZoom').attr('data', $(this).attr('data'));
				return(true);
		  }
		  $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
		  return(false);
  });
});

#19 Castiel

Castiel

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

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

Отправлено 20 Март 2014 - 07:19

Просмотр сообщенияgesha81 (20 Март 2014 - 07:09) писал:

номер аккаунта  SL-279399

Редактируем шаблон Товар
Находим
	<div class="left">
	  <!-- Большое изображение -->
	 <div class="image">
				<div id="wrap" style="top:0px;z-index:9999;position:relative;">
				  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
				  {% ELSE %}
						<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
						  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
						</a>
				  {% ENDIF %}		   
				</div>
				<center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		  </div>
		
		  {% IFNOT goods_images_empty %}
				<div class="goodsImageList" style="display: none;">
				{% FOR goods_images %}
				   <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
				{% ENDFOR %}
				</div>
		  {% ENDIF %}
			   
	  <!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.first %}
			<div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			  <h5>Другие фото {GOODS_NAME}</h5>
		  {% ENDIF %}
			  <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>					   
		  {% IF goods_images.last %}
			</div>
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}
	</div>

Заменяем на
<div class="left">
	  <!-- Большое изображение -->
		  <div class="image">
				<div id="wrap" style="top:0px;z-index:9999;position:relative;">
				  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
				  {% ELSE %}
						<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="goodsImageZoomOne" >
						  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
						</a>
				  {% ENDIF %}		   
				</div>
				<center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		  </div>
		
		  {% IFNOT goods_images_empty %}
				<div class="goodsImageList" style="display: none;">
				{% FOR goods_images %}
				   <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
				{% ENDFOR %}
				</div>
		  {% ENDIF %}
			   
	  <!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.first %}
			<div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			  <h5>Другие фото {GOODS_NAME}</h5>
		  {% ENDIF %}
			  <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>					   
		  {% IF goods_images.last %}
			</div>
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}
	</div>

Добавляем в main.js
//Увеличение изображения в карточке товара при клике
$(function() {
$('a[rel="gallery"]').fancybox();
 
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a, .goodsImageZoomOne').click(function(){
		  if($(this).closest('.image-additional').length) {
				$('.goodsImageZoom').attr('data', $(this).attr('data'));
				return(true);
		  }
		  $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
		  return(false);
  });
});

#20 gesha81

gesha81

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

  • Пользователи
  • PipPipPip
  • 129 сообщений
  • ГородЧита

Отправлено 20 Март 2014 - 07:26

Просмотр сообщенияCastiel (20 Март 2014 - 07:19) писал:

Редактируем шаблон Товар
Находим
<div class="left">
	 <!-- Большое изображение -->
	 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% ELSE %}
					 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
						 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
					 </a>
				 {% ENDIF %}		
			 </div>
			 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		 </div>
		
		 {% IFNOT goods_images_empty %}
			 <div class="goodsImageList" style="display: none;">
			 {% FOR goods_images %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 {% ENDFOR %}
			 </div>
		 {% ENDIF %}
			
	 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
	 {% FOR goods_images %}
		 {% IF goods_images.first %}
		 <div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			 <h5>Другие фото {GOODS_NAME}</h5>
		 {% ENDIF %}
			 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>					
		 {% IF goods_images.last %}
		 </div>
		 {% ENDIF %}
	 {% ENDFOR %}
	 {% ENDIF %}
</div>

Заменяем на
<div class="left">
	 <!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% ELSE %}
					 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="goodsImageZoomOne" >
						 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
					 </a>
				 {% ENDIF %}		
			 </div>
			 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		 </div>
		
		 {% IFNOT goods_images_empty %}
			 <div class="goodsImageList" style="display: none;">
			 {% FOR goods_images %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 {% ENDFOR %}
			 </div>
		 {% ENDIF %}
			
	 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
	 {% FOR goods_images %}
		 {% IF goods_images.first %}
		 <div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			 <h5>Другие фото {GOODS_NAME}</h5>
		 {% ENDIF %}
			 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>					
		 {% IF goods_images.last %}
		 </div>
		 {% ENDIF %}
	 {% ENDFOR %}
	 {% ENDIF %}
</div>

Добавляем в main.js
//Увеличение изображения в карточке товара при клике
$(function() {
$('a[rel="gallery"]').fancybox();

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a, .goodsImageZoomOne').click(function(){
		 if($(this).closest('.image-additional').length) {
			 $('.goodsImageZoom').attr('data', $(this).attr('data'));
			 return(true);
		 }
		 $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
		 return(false);
});
});
все сделал. только в последнем коде немеого подправил коментарии
/*/Увеличение изображения в карточке товара при клике*/
$(function() {
$('a[rel="gallery"]').fancybox();

  /* Увеличение изображение при клике на него и открытие галереи изображений*/
  $('.goodsImageZoom a, .image-additional a, .goodsImageZoomOne').click(function(){
                  if($(this).closest('.image-additional').length) {
                                $('.goodsImageZoom').attr('data', $(this).attr('data'));
                                return(true);
                  }
                  $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
                  return(false);
  });
});
но!!! все равно ничего не заработало
Обратно в Страница товара


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

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

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