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


Интерактивное Изменение Свойств Товара

Автор kingoff, 17 мая 2012 00:55

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

#1 kingoff

kingoff

    Новичок

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

Отправлено 17 Май 2012 - 00:55

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

И попутный вопрос - каждый товар будет иметь по несколько цветов (более 20) и скорей всего типов. Можно ли как-то скопом добавлять все цвета и типы к группе товаров, чтобы не писать к каждому одно и то же?

#2 a.pashuta

a.pashuta

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

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

Отправлено 17 Май 2012 - 11:58

Просмотр сообщенияkingoff (17 Май 2012 - 00:55) писал:

Здравствуйте. Скажите реально ли сделать так, чтобы при изменении свойств товара, например цвета, в реальном времени менялось бы и изображение товара?
Основное изображение при смене свойства остается неизменным. Как вариант, можно вставить изображения в сами свойства. Пример.

Просмотр сообщенияkingoff (17 Май 2012 - 00:55) писал:

И попутный вопрос - каждый товар будет иметь по несколько цветов (более 20) и скорей всего типов. Можно ли как-то скопом добавлять все цвета и типы к группе товаров, чтобы не писать к каждому одно и то же?
К сожалению, такой возможности нет.

#3 kingoff

kingoff

    Новичок

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

Отправлено 30 Май 2012 - 21:48

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

Для начала в файле "товар" пробую изменить среднее изображение. Вместо этого:
<img class="cornerAll withBorder" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />
вставляю это:
{GOODS_MOD_DESCRIPTION}
изменить основной рисунок получается, на тот что верхний в списке свойств, но при смене свойства рисунок не меняется.
Что отвечает за смену изображения? Я пробовал вставлять класс "goodsDataMainModificationsDescriptionBlock" в описание свойства, может в нем зарыто - не выходит.
Подскажите куда копнуть.

Если нужно вот ссылка

#4 Vaccina

Vaccina

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

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

Отправлено 31 Май 2012 - 23:39

За смену модификаций отвечает логика в файле main.js 

// Функция собирает свойства в строку, для определения модификации товара
  function getSlugFromGoodsDataFormModificationsProperties(obj) {
	var properties = new Array();
	$(obj).each(function(i){
	  properties[i] = parseInt($(this).val());
	});
	return properties.sort(function(a,B){return a - b}).join('_');
  }
  
  
  var 
	// Запоминаем поля выбора свойств, для ускорения работы со значениями свойств
	goodsDataProperties = $('form.goodsDataForm select[name="form[properties][]"]'),
	
	// Запоминаем блоки с информацией по модификациям, для ускорения работы
	goodsDataModifications = $('div.goodsDataMainModificationsList');
  
  
  // Обновляет возможность выбора свойств модификации, для отключения возможности выбора по характеристикам модификации которой не существует.
  function updateVisibility (y) {
	// Проверяем в каждом соседнем поле выбора модификаций, возможно ли подобрать модификацию для указанных свойств
	goodsDataProperties.each(function(j){
	  // Если мы сравниваем значения свойства не с самим собой, а с другим списком значений свойств
	  if( j != y ) {
		// Проходим по всем значениям текущего свойства модификации товара
		$(this).find('option').each(function(){
		  // Записываем временный массив свойств, которые будем использовать для проверки существования модификации
		  var checkProperties = new Array();
		  $(goodsDataProperties).each(function(i){
			checkProperties[i] = parseInt($(this).val());
		  });
		  // Пытаемся найти модификацию соответствующую выбранным значениям свойств
		  checkProperties[j] = parseInt($(this).attr('value'));
		  // Собираем хэш определяющий модификацию по свойствам
		  slug = checkProperties.sort(function(a,B){return a - b}).join('_');
		  // Ищем модификацию по всем выбранным значениям свойств товара. Если модификации нет в возможном выборе, отмечаем потенциальное значение выбора как не доступное для выбора, т.к. такой модификации нет.
		  if(!goodsDataModifications.filter('[rel="'+slug+'"]').length) {
		   $(this).attr('disabled', true);
		  // Если выбрав данное значение свойства товара можно подобрать модификацию, то выделяем вариант выбора как доступный.
		  } else {
			$(this).attr('disabled', false);
		  }
		});
	  }
	});
  }
  // Обновляем возможность выбора модификации товара по свойствам. Для тех свойств, выбор по которым не возможен, отключаем такую возможность.
  updateVisibility (0);
  
  // Изменение цены товара при изменении у товара свойства для модификации
  goodsDataProperties.each(function(y){
	$(this).change(function(){
	  var slug = getSlugFromGoodsDataFormModificationsProperties(goodsDataProperties),
		  modificationBlock			 = goodsDataModifications.filter('[rel="'+slug+'"]'),
		  modificationId				= parseInt(modificationBlock.find('[name="id"]').val()),
		  modificationArtNumber		 = modificationBlock.find('[name="art_number"]').val(),
		  modificationPriceNow		  = parseFloat(modificationBlock.find('[name="price_now"]').val()),
		  modificationPriceNowFormated  = modificationBlock.find('.price_now_formated').html(),
		  modificationPriceOld		  = parseFloat(modificationBlock.find('[name="price_old"]').val()),
		  modificationPriceOldFormated  = modificationBlock.find('.price_old_formated').html(),
		  modificationRestValue		 = parseFloat(modificationBlock.find('[name="rest_value"]').val()),
		  modificationDescription	   = modificationBlock.find('.description').html(),
		  modificationMeasureId		 = parseInt(modificationBlock.find('[name="measure_id"]').val()),
		  modificationMeasureName	   = modificationBlock.find('[name="measure_name"]').val(),
		  modificationMeasureDesc	   = modificationBlock.find('[name="measure_desc"]').val(),
		  modificationMeasurePrecision  = modificationBlock.find('[name="measure_precision"]').val(),
		  modificationIsHasInCompareList= modificationBlock.find('[name="is_has_in_compare_list"]').val(),
		  goodsModificationId		   = $('.goodsDataMainModificationId'),
		  goodsPriceNow				 = $('.goodsDataMainModificationPriceNow'),
		  goodsPriceOld				 = $('.goodsDataMainModificationPriceOld'),
		  goodsAvailable				= $('.goodsDataMainModificationAvailable'),
		  goodsAvailableTrue			= goodsAvailable.find('.available-true'),
		  goodsAvailableFalse		   = goodsAvailable.find('.available-false'),
		  goodsArtNumberBlock		   = $('.goodsDataMainModificationArtNumber'),
		  goodsArtNumber				= goodsArtNumberBlock.find('span');
		  goodsCompareAddButton		 = $('.goodsDataCompareButton.add');
		  goodsCompareDeleteButton	  = $('.goodsDataCompareButton.delete');
		  goodsModDescriptionBlock	  = $('.goodsDataMainModificationsDescriptionBlock');
	   
	   
	   // Изменяем данные товара для выбранных параметров. Если нашлась выбранная модификация
	   if(modificationBlock.length) {
		 // Цена товара
		 goodsPriceNow.html(modificationPriceNowFormated);
  
		 // Старая цена товара
		 if(modificationPriceOld>modificationPriceNow) {
		  goodsPriceOld.html(modificationPriceOldFormated);
		 } else {
		   goodsPriceOld.html('');
		 }
		 
		 // Есть ли товар есть в наличии
		 if(modificationRestValue>0) {
		   goodsAvailableTrue.show();
		   goodsAvailableFalse.hide();
		 // Если товара нет в наличии
		 } else {
		   goodsAvailableTrue.hide();
		   goodsAvailableFalse.show();
		 }
		 // Если товар есть в списке сравнения
		 if(modificationIsHasInCompareList>0) {
		   goodsCompareAddButton.hide();
		   goodsCompareDeleteButton.show();
		 // Если товара нет в списке сравнения
		 } else {
		   goodsCompareAddButton.show();
		   goodsCompareDeleteButton.hide();
		 }
		 
		 // Покажем артикул модификации товара, если он указан
		 if(modificationArtNumber.length>0) {
		   goodsArtNumberBlock.show();
		   goodsArtNumber.html(modificationArtNumber);
		 // Скроем артикул модификации товара, если он не указан
		 } else {
		   goodsArtNumberBlock.hide();
		   goodsArtNumber.html('');
		 }

		 // Описание модификации товара. Покажем если оно есть, спрячем если его у модификации нет
		 if(modificationDescription.length > 0) {
		   goodsModDescriptionBlock.show().html('<div>' + modificationDescription + '</div>');
		 } else {
		   goodsModDescriptionBlock.hide().html();
		 }
		 
		 
		 // Идентификатор товарной модификации
		 goodsModificationId.val(modificationId);
		 window.location.hash = '?modification='+modificationId;
	   } else {
		 // Отправим запись об ошибке на сервер
		 sendError('no modification by slug '+slug);
		 alert('К сожалению сейчас не получается подобрать модификацию соответствующую выбранным параметрам.');
	   }
	   
	   // Обновляем возможность выбора другой модификации для текущих значений свойств модификации товара. 
	   updateVisibility(y);
	});
  });

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

// Изменение главного изображения товара при нажатии на миниатюру
  $('.goodsDataMainImagesIcon a').click(function(){
		// Путь к среднему изображению
	var MediumImageUrl = $(this).find('img').attr('rel'),
		
		// Главное изображение, в которое будем вставлять новое изображение
		MainImage = $('.goodsDataMainImage img'),
		
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		MainImageIdObject = $('.goodsDataMainImage input'),
		
		// Получаем идентификатор этого изображения из соседнего input поля
		GoodsImageIconId = $(this).parent().find('input').attr("rel");
	
	// Изменяем главное изображение
	MainImage.attr('src',MediumImageUrl);
	
	// Изменяем идентификатор главного изображения
	MainImageIdObject.attr("rel",GoodsImageIconId);
	
	return false;
  });

#5 bg999

bg999

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

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

Отправлено 05 Июнь 2013 - 19:20

Добрый вечер! Как сделать так чтобы когда меняешь свойство товара, например объем с 250 мл. на 500 мл. менялась и цена на странице товара и номер артикула??? Ссылка на страницу товара моего сайта, здесь не меняется цена когда меняю свойство объем с 250 мл. на 500 мл. http://cosmetikova.r...mod_id=27798492

И второй вопрос: как сделать так чтобы надпись "базовая модификация:" не писалась, при случае когда действительно базовая комплектация? Например вот здесь http://cosmetikova.ru/goods/Malina-199

#6 Koderhan

Koderhan

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

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

Отправлено 06 Июнь 2013 - 10:44

Чтобы не выводить единственные модификации к товару. В основных настройках.

Панель администратора, "Сайт"->"Редактор тем".
В файле "Товар".
Найти код:
<!-- Артикул, если указан -->
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none;"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>
</tr>
<!-- END Блок описания товара. Показываем его есть описание товара -->





<tr>
<td class="goodsDataMainModificationDataBlock">
<!-- По этому значению производится заказ товара -->
<input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />







<!-- Цена сейчас -->
<div style="padding-bottom: 0px;">
<span class="price" style="padding-bottom: 5px;" title="Текущая цена за &laquo;{GOODS_NAME}&raquo;">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW | money_format}</snap>
</span>


<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</snap>
</span>
Заменить:
<!-- Артикул, если указан -->
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none;"{% ENDIF %} class="goodsDataMainModificationArtNumber">
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>
</tr>
<!-- END Блок описания товара. Показываем его есть описание товара -->





<tr>
<td class="goodsDataMainModificationDataBlock">
<!-- По этому значению производится заказ товара -->
<input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />







<!-- Цена сейчас -->



<div style="padding-bottom: 0px;">
<span class="price goodsDataMainModificationPriceNow" style="padding-bottom: 5px;" title="Текущая цена за &laquo;{GOODS_NAME}&raquo;">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW | money_format}</snap>
</span>


<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price goodsDataMainModificationPriceOld" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</snap>
</span>

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

  • ScreenShot 649.png

#7 bg999

bg999

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

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

Отправлено 06 Июнь 2013 - 12:58

Просмотр сообщенияKoderhan (06 Июнь 2013 - 10:44) писал:

Чтобы не выводить единственные модификации к товару. В основных настройках.

Панель администратора, "Сайт"->"Редактор тем".
В файле "Товар".
Найти код:
<!-- Артикул, если указан -->
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none;"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>
</tr>
<!-- END Блок описания товара. Показываем его есть описание товара -->





<tr>
<td class="goodsDataMainModificationDataBlock">
<!-- По этому значению производится заказ товара -->
<input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />







<!-- Цена сейчас -->
<div style="padding-bottom: 0px;">
<span class="price" style="padding-bottom: 5px;" title="Текущая цена за &laquo;{GOODS_NAME}&raquo;">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW | money_format}</snap>
</span>


<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</snap>
</span>
Заменить:
<!-- Артикул, если указан -->
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none;"{% ENDIF %} class="goodsDataMainModificationArtNumber">
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>
</tr>
<!-- END Блок описания товара. Показываем его есть описание товара -->





<tr>
<td class="goodsDataMainModificationDataBlock">
<!-- По этому значению производится заказ товара -->
<input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />







<!-- Цена сейчас -->



<div style="padding-bottom: 0px;">
<span class="price goodsDataMainModificationPriceNow" style="padding-bottom: 5px;" title="Текущая цена за &laquo;{GOODS_NAME}&raquo;">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW | money_format}</snap>
</span>


<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price goodsDataMainModificationPriceOld" title="Мы снизили цену на &laquo;{GOODS_NAME}&raquo;. Старая цена - {GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
<snap style="font-size: 14px; font-family: Verdana, san-serif; font-weight: bold; color:#000;">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</snap>
</span>


Спасибо сработало со сменой цены и артикуля, а вот как быть с тем что бы убирать со страницы товара надпись "базовая модификация:" (в том случае что это дествительная базовая модификация) и это плое свойств не нужно?

#8 Koderhan

Koderhan

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

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

Отправлено 06 Июнь 2013 - 16:33

Просмотр сообщенияbg999 (06 Июнь 2013 - 12:58) писал:

Спасибо сработало со сменой цены и артикуля, а вот как быть с тем что бы убирать со страницы товара надпись "базовая модификация:" (в том случае что это дествительная базовая модификация) и это плое свойств не нужно?

Попробуйте снять галочку напротив пункта "В свойствах товарной модификации выдавать все свойства, даже если они одинаковы для всего товара" в основных настройках.

#9 bg999

bg999

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

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

Отправлено 06 Июнь 2013 - 21:10

Просмотр сообщенияKoderhan (06 Июнь 2013 - 16:33) писал:

Попробуйте снять галочку напротив пункта "В свойствах товарной модификации выдавать все свойства, даже если они одинаковы для всего товара" в основных настройках.

Галочка оказывается у меня и так была снята

#10 mnbv2005

mnbv2005

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

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

Отправлено 08 Апрель 2014 - 21:26

Добрый вечер!
У меня такая ситуация: У меня есть позиции, которые иимеют большой выбор цветов и размеров.
Например: http://1-cena.ru/goo...mente?from=MmZh
Как видите расцветок водолазок много, но и 4 размера. Приходиться у каждого цвета прописывать размер, что занимает уйму времени и ошибок)
Как бы сделать так, чтобы работали и размеры и цвета?
С уважением,Наталья.

#11 Сake

Сake

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

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

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

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

if(!goodsDataModifications.filter('[rel="'+slug+'"]').length) {
   $(this).attr('disabled', true);

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

var modification = goodsDataModifications.filter('[rel="'+slug+'"]');
if(!modification.length || !parseInt(modification.find('input[name="rest_value"]').val())) {
   $(this).attr('disabled', true);

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

select option:disabled {
  color: #FF0000;
}

#12 mnbv2005

mnbv2005

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

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

Отправлено 09 Апрель 2014 - 11:59

Добрый день!
Так я и делала, но у 20 цветов прописать по 4,5 размеров, это значит нужно прописать около 100 разных свойств в одной товарной единицы((( Это очень долго и нудно(( Жаль,что выхода пока нет.
Обратно в Страница товара


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

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

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