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


При Выборе Модификации Менялась Картинка

лазурь модификация цвет картинка

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

#1 cygrob

cygrob

    Новичок

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

Отправлено 05 Январь 2016 - 17:29

Возможно сделать так чтобы при выборе другого цвета картинка менялась на соответсвующую.
Допустим нужны ботинки коричневые, картинка автоматически обновляется на коричневую.

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

  • Безымянный.png


#2 Shishas

Shishas

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

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

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

Просмотр сообщенияcygrob (05 Январь 2016 - 17:29) писал:

Возможно сделать так чтобы при выборе другого цвета картинка менялась на соответсвующую.
Допустим нужны ботинки коричневые, картинка автоматически обновляется на коричневую.

В модификации товара добавляешь в описании под нужным цветом код <img src="скопированная ссылка картинки" />. Конечно это почти не то чего вы ожидали, но другого варианта по моему пока еще нет в возможностях сайта.

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

  • Скриншот 18-02-2016 125942.png
  • Скриншот 18-02-2016 130250.png


#3 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 19 Февраль 2016 - 03:01

В дополнение к последнему сообщению, можно в последующем заменять основное фото на фото из описания модификации при ее смене.

#4 Александр67

Александр67

    Новичок

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

Отправлено 30 Июль 2016 - 19:10

Скажите как сделать чтоб при открытии другого цвета менялась фотка в главном окне?

а она появляется уже в другом

а она появляется уже в другом

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

  • 2016-07-30_19-04-59.png


#5 MikDark

MikDark

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

  • Модераторы
  • 6 394 сообщений

Отправлено 30 Июль 2016 - 19:49

Просмотр сообщенияАлександр67 (30 Июль 2016 - 19:10) писал:

Скажите как сделать чтоб при открытии другого цвета менялась фотка в главном окне?

а она появляется уже в другом

а она появляется уже в другом

В шаблоне Товар попробуйте найти код:
<div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=sport" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
		  <a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}">
			<div class="ico-product">
			  {% IF GOODS_IS_NEW %}
				<span class="ico-new">Новинка</span>
			  {% ELSEIF GOODS_IS_TOP %}
				<span class="ico-best">Хит</span>
			  {% ENDIF %}
			  {% IF GOODS_MOD_MAX_DISCOUNT %}
				<span class="ico-sale">Скидка</span>
			  {% ENDIF %}
			</div>
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>
		  </a>
		  <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
		{% ENDIF %}

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

<div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=sport" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}">		 
			<div class="ico-product">
			  {% IF GOODS_IS_NEW %}
				<span class="ico-new">Новинка</span>
			  {% ELSEIF GOODS_IS_TOP %}
				<span class="ico-best">Хит</span>
			  {% ENDIF %}
			  {% IF GOODS_MOD_MAX_DISCOUNT %}
				<span class="ico-sale">Скидка</span>
			  {% ENDIF %}
			</div>
{% IF GOODS_MOD_DESCRIPTION %}
		 {GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>{%ENDIF%}
		  </a>
		  <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
		{% ENDIF %}


#6 Александр67

Александр67

    Новичок

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

Отправлено 30 Июль 2016 - 20:01

Просмотр сообщенияMikDark (30 Июль 2016 - 19:49) писал:

В шаблоне Товар попробуйте найти код:
<div class="general-img popup-gallery">
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=sport" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
		 <a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}">
		 <div class="ico-product">
			 {% IF GOODS_IS_NEW %}
			 <span class="ico-new">Новинка</span>
			 {% ELSEIF GOODS_IS_TOP %}
			 <span class="ico-best">Хит</span>
			 {% ENDIF %}
			 {% IF GOODS_MOD_MAX_DISCOUNT %}
			 <span class="ico-sale">Скидка</span>
			 {% ENDIF %}
		 </div>
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>
		 </a>
		 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
	 {% ENDIF %}

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

<div class="general-img popup-gallery">
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=sport" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1" rel="position:'inside',adjustX:0,adjustY:0" title="Увеличить {GOODS_NAME}">
		 <div class="ico-product">
			 {% IF GOODS_IS_NEW %}
			 <span class="ico-new">Новинка</span>
			 {% ELSEIF GOODS_IS_TOP %}
			 <span class="ico-best">Хит</span>
			 {% ENDIF %}
			 {% IF GOODS_MOD_MAX_DISCOUNT %}
			 <span class="ico-sale">Скидка</span>
			 {% ENDIF %}
		 </div>
{% IF GOODS_MOD_DESCRIPTION %}
{GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" class="goods-image-medium" itemprop="image"/>{%ENDIF%}
		 </a>
		 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
	 {% ENDIF %}

К сожалению не помогло(((

#7 MikDark

MikDark

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

  • Модераторы
  • 6 394 сообщений

Отправлено 30 Июль 2016 - 20:59

Просмотр сообщенияАлександр67 (30 Июль 2016 - 20:01) писал:

К сожалению не помогло(((

Я не виду у Вас заполненного описания модификаций. Вам нужно внести правки, согласно предыдущим инструкциям, добавив <img src="**"> в описания модификаций

#8 Александр67

Александр67

    Новичок

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

Отправлено 30 Июль 2016 - 21:18

Просмотр сообщенияMikDark (30 Июль 2016 - 20:59) писал:

Я не виду у Вас заполненного описания модификаций. Вам нужно внести правки, согласно предыдущим инструкциям, добавив <img src="**"> в описания модификаций
Я новичек  пока еще, всё сделал как описано, но при открытии нового цвета, выскакивает картинка дополнительная
http://g200788.store...od_id=105219164


MikDark жду помощи


#9 MikDark

MikDark

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

  • Модераторы
  • 6 394 сообщений

Отправлено 31 Июль 2016 - 13:47

Просмотр сообщенияАлександр67 (30 Июль 2016 - 21:18) писал:

Я новичек  пока еще, всё сделал как описано, но при открытии нового цвета, выскакивает картинка дополнительная
http://g200788.store...od_id=105219164


MikDark жду помощи

Здравствуйте. Изменения Вам произвел.

#10 57P

57P

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

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

Отправлено 16 Август 2016 - 22:40

Просмотр сообщенияVaccina (19 Февраль 2016 - 03:01) писал:

В дополнение к последнему сообщению, можно в последующем заменять основное фото на фото из описания модификации при ее смене.
получается можно сделать так, чтоб при выборе размера(модификатора) менялась фото? как это сделать?

#11 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

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

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

#12 57P

57P

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

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

Отправлено 17 Август 2016 - 08:47

Просмотр сообщенияVaccina (17 Август 2016 - 00:45) писал:

Для начала добавьте пожалуйста в описание модификации необходимо фото и пришлите ссылку на товар(можно без указания доменного имени)
<img alt="" src="http://st.****.ru/6/...1935/569/6.jpg" style="width: 300px; height: 300px;" />​


#13 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 18 Август 2016 - 03:31

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

#14 57P

57P

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

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

Отправлено 18 Август 2016 - 09:39

Просмотр сообщенияVaccina (18 Август 2016 - 03:31) писал:

Укажите пожалуйста ссылку на товар с модификацией, к которой вы добавили фото
http://***.ru/goods/...tali#show_tab_3

#15 Stasya

Stasya

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

  • Модераторы
  • 4 007 сообщений

Отправлено 18 Август 2016 - 11:59

Просмотр сообщения57P (18 Август 2016 - 09:39) писал:


Для реализации смены главное картинки при смене модификации Вы можете воспользоваться этой инструкцией.

#16 DevidINA

DevidINA

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

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

Отправлено 18 Январь 2018 - 14:26

Повторяю вопрос тут https://forum.storel...995#entry271995

Здравствуйте Как можно убрать повторяющуюся картинку снизу, пробовал по вашим советам, не получилось.
И как сделать чтобы работал зум для этих фотографий,  
Нужно ли их загружать в каталог помимо добавления в описание с тегом ?

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

  • 32.png


#17 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 337 сообщений

Отправлено 19 Январь 2018 - 15:17

Просмотр сообщенияDevidINA (18 Январь 2018 - 14:26) писал:

Повторяю вопрос тут https://forum.storel...995#entry271995

Здравствуйте Как можно убрать повторяющуюся картинку снизу, пробовал по вашим советам, не получилось.
И как сделать чтобы работал зум для этих фотографий,  
Нужно ли их загружать в каталог помимо добавления в описание с тегом ?

Чтобы убрать дополнительное изображение в модификации в main.css в конце добавьте

.goodsDataMainModificationsDescriptionBlock img {
	display: none;
}


#18 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 15:42

Просмотр сообщенияMr.Nito (19 Январь 2018 - 15:17) писал:

Чтобы убрать дополнительное изображение в модификации в main.css в конце добавьте

.goodsDataMainModificationsDescriptionBlock img {
display: none;
}
Спасибо Вам огромное. Еще подскажите как сделать Срочно надо решить эту проблему
1. Сделать чтобы при выбирании другой картинки, не показывало зум первой
2. В левом верхнем углу вставить иконку лупы и чтобы при нажатии на нее открывался слайдер с фотографиями.
3. При выборе любой модификации меняется цена, как на фото

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

  • 123.png


#19 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 18:50

ап

#20 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 337 сообщений

Отправлено 19 Январь 2018 - 20:15

Просмотр сообщенияDevidINA (19 Январь 2018 - 15:42) писал:

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

1. В main.js

заменил

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
				var url = $(this).attr('href');
				$('.general-img').find('img').attr('src', url).attr('data-large', url);
				$('.general-img').find('a').attr('href', url);
				return false;
});

на


// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
				var url = $(this).attr('href');
				$('.general-img').find('img').attr('src', url).attr('data-large', url);
				$('.general-img').find('a').attr('href', url);
				$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
				return false;
});

Рамку убрал  в cloud-zoom.css
/* This is the zoom window. */
.cloud-zoom-big {
border: 0px solid #ccc;
overflow:hidden;
}

2.Иконку с увеличением:

Код

в main.js
// Открытие изображения товара при клике
$(document).ready(function() {
  $('.zoom-icon').on('click',function(){
	$('.popup-gallery').magnificPopup({
	  delegate: 'a',
	  type: 'image',
	  tLoading: 'Загружаем изображение #%curr%...',
	mainClass: 'mfp-img-mobile',
	gallery: {
	 enabled: true,
	 navigateByImgClick: true,
	 preload: [0,1] // Will preload 0 - before current, and 1 after the current image
	},
	image: {
	 tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
	 titleSrc: function(item) {
	  return item.el.attr('title') + '<small>StoreLand.ru</small>';
	 }
	}
   }).magnificPopup('open');
  })
}); 

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

{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
	  <div class="zoom-icon">
		<style>
		  .zoom-icon {
			  width: 60px;
			  height: 60px;
			  position: absolute;
			  z-index: 10000;
			  left: 0;
			  top: 0;
			  cursor: pointer;
			  background: url('{ASSETS_IMAGES_PATH}zoom-in.png');
		  }
		</style>
	  </div>  
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX: 19, adjustY:0" 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 %}






Темы с аналогичным тегами лазурь, модификация, цвет, картинка

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

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