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


Изменить Фото И Характеристик

Автор drugoyMAX, 13 янв. 2015 10:14

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

#1 drugoyMAX

drugoyMAX

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

  • Пользователи
  • PipPip
  • 35 сообщений
  • ГородМосква

Отправлено 13 Январь 2015 - 10:14

1)Сейчас это выглядит так:1.PNG
Возможно ли организовать скроллинг на фото вот таким образом:2.PNG

2) Как перенести характеристики:3.PNG
сайт:http://kafftan.ru

#2 Vaccina

Vaccina

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

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

Отправлено 14 Январь 2015 - 02:50

1. Основные изменения выполните по сл.инструкции:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>

Далее зайдите в шаблон Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  {% FOR goods_images %}
			<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			{% IF goods_images.first %}
			  <div class="allphoto clear">
				<div  class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
			{% ENDIF %}
			<!-- Уменьшенное изображение товара -->
			<ul class="txtalgncnt zoomicon">
			  <li>
				  <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
					<img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				  </a>
			  </li>
			  <!-- Идентификатор изображения товара, используется для галереи изображений -->
			  <input type="hidden" rel="{goods_images.ID}" />
			</ul>
			<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			{% IF goods_images.last %}
				<div class="clear"></div>
			  </div>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		 <script type="text/javascript">
		  jQuery(document).ready(function() {
		  jQuery('.d-carousel .carousel').jcarousel({
			scroll: 1
		  });
		  });
		  </script>
  
			<div class="d-carousel">
		 <ul class="carousel txtalgncnt zoomicon">
		 {% FOR goods_images %}<li>
		  <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
			  <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
			</a>
			<!-- Идентификатор изображения товара, используется для галереи изображений -->
			<input type="hidden" rel="{goods_images.ID}" />
		  </li>{% ENDFOR %}
		 </ul>
		</div>
			<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			{% IF goods_images.last %}
				<div class="clear"></div>
			  </div>
			{% ENDIF %}
		 
		{% ENDIF %}

далее в carousel.css найдите:
.d-carousel .jcarousel-container-horizontal {
	height: 325px;
	padding: 0 45px;
	width: 650px;
}
.d-carousel .jcarousel-item {
	height: 290px;
	width: 190px;
}
.d-carousel .jcarousel-next-horizontal {
position: absolute;
top: 149px;
right: 0;
margin-right: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right;
}
.d-carousel .jcarousel-prev-horizontal {
position: absolute;
top: 149px;
left: 0;
margin-left: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left;
}
замените на:
.d-carousel .jcarousel-container-horizontal {
	padding: 0 45px;
}
.d-carousel .jcarousel-item {
	width: 60px;
}
.d-carousel .jcarousel-next-horizontal {
position: absolute;
top: 5px;
right: 0;
margin-right: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right;
}
.d-carousel .jcarousel-prev-horizontal {
position: absolute;
top: 5px;
left: 0;
margin-left: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left;
}
2.В шаблоне Товар найдите:
<!-- Характеристики -->
  {% IFNOT goods_features_empty %}
 
	  <div class="productFeaturesMainBlock marg50">
		<div class="productFeaturesHeaderBlock characteristic titlegood fnt18 i fntarl txtalgnlft clr">
		  <div>Характеристики {GOODS_NAME}:<span class="paragraph-end"></span></div>
		</div>
		<div class="productFeaturesDescBlock">
		  <table class="characteristic marg50 fnt12">
		  {% FOR goods_features%}
			<tr>
			  <td class="fnt12 b namechar">
				{goods_features.NAME}
			  </td>
			  <td>
				{goods_features.VALUE}
			  </td>
			</tr>
		  {% ENDFOR %}
		</table>
		</div>
	  </div>
	 
  {% ENDIF %}
  <!-- Характеристики-Конец -->
переместите его поставив после:
<!-- Блок описания модификации -->
			<div class="block1 goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			  <div class="delivery fnt12 txtalgnlft">
				<div class="variant">
				  <div class="info">{GOODS_MOD_DESCRIPTION}</div>
				</div>
			  </div>
			</div>

#3 drugoyMAX

drugoyMAX

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

  • Пользователи
  • PipPip
  • 35 сообщений
  • ГородМосква

Отправлено 14 Январь 2015 - 08:46

Просмотр сообщенияVaccina (14 Январь 2015 - 02:50) писал:

1. Основные изменения выполните по сл.инструкции:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>

Далее зайдите в шаблон Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
		 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
		 {% IF goods_images.first %}
			 <div class="allphoto clear">
			 <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
		 {% ENDIF %}
		 <!-- Уменьшенное изображение товара -->
		 <ul class="txtalgncnt zoomicon">
			 <li>
				 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
				 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				 </a>
			 </li>
			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
		 </ul>
		 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
		 {% IF goods_images.last %}
			 <div class="clear"></div>
			 </div>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 <script type="text/javascript">
		 jQuery(document).ready(function() {
		 jQuery('.d-carousel .carousel').jcarousel({
		 scroll: 1
		 });
		 });
		 </script>

		 <div class="d-carousel">
		 <ul class="carousel txtalgncnt zoomicon">
		 {% FOR goods_images %}<li>
		 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
			 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
		 </a>
		 <!-- Идентификатор изображения товара, используется для галереи изображений -->
		 <input type="hidden" rel="{goods_images.ID}" />
		 </li>{% ENDFOR %}
		 </ul>
	 </div>
		 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
		 {% IF goods_images.last %}
			 <div class="clear"></div>
			 </div>
		 {% ENDIF %}
		
	 {% ENDIF %}

далее в carousel.css найдите:
.d-carousel .jcarousel-container-horizontal {
height: 325px;
padding: 0 45px;
width: 650px;
}
.d-carousel .jcarousel-item {
height: 290px;
width: 190px;
}
.d-carousel .jcarousel-next-horizontal {
position: absolute;
top: 149px;
right: 0;
margin-right: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right;
}
.d-carousel .jcarousel-prev-horizontal {
position: absolute;
top: 149px;
left: 0;
margin-left: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left;
}
замените на:
.d-carousel .jcarousel-container-horizontal {
padding: 0 45px;
}
.d-carousel .jcarousel-item {
width: 60px;
}
.d-carousel .jcarousel-next-horizontal {
position: absolute;
top: 5px;
right: 0;
margin-right: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right;
}
.d-carousel .jcarousel-prev-horizontal {
position: absolute;
top: 5px;
left: 0;
margin-left: 3px;
width: 15px;
height: 28px;
cursor: pointer;
background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left;
}
2.В шаблоне Товар найдите:
<!-- Характеристики -->
{% IFNOT goods_features_empty %}

	 <div class="productFeaturesMainBlock marg50">
	 <div class="productFeaturesHeaderBlock characteristic titlegood fnt18 i fntarl txtalgnlft clr">
		 <div>Характеристики {GOODS_NAME}:<span class="paragraph-end"></span></div>
	 </div>
	 <div class="productFeaturesDescBlock">
		 <table class="characteristic marg50 fnt12">
		 {% FOR goods_features%}
		 <tr>
			 <td class="fnt12 b namechar">
			 {goods_features.NAME}
			 </td>
			 <td>
			 {goods_features.VALUE}
			 </td>
		 </tr>
		 {% ENDFOR %}
	 </table>
	 </div>
	 </div>
	
{% ENDIF %}
<!-- Характеристики-Конец -->
переместите его поставив после:
<!-- Блок описания модификации -->
		 <div class="block1 goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			 <div class="delivery fnt12 txtalgnlft">
			 <div class="variant">
				 <div class="info">{GOODS_MOD_DESCRIPTION}</div>
			 </div>
			 </div>
		 </div>
Спасибо, все получилось!
Обратно в Страница товара


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

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

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