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


Добавить Кнопки В Карточке Товара

карточка товаров кнопки

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

#1 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 10:57

Всем привет!
Подскажите пожалуйста можно ли реализовать следующую идею?
На сайте проводятся акции, что-то в подарок при покупке определенного товара, в связи с этим нужно создать кнопки в карточке товаров, с названием того товара который идет в подарок, естественно данные товары будут периодически меняться и поэтому они должны быть взаимозаменяемыми. К тому же при выборе товара в подарок, он как то должен отображаться в картоке оформленного заказа, но естественно бесплатным.
Если это возможно помогите пожалуйста это реализовать вместо кнопок, "в избранное" и кнопки "в сравнение"

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

  • 2017-04-08_10-29-01.png


#2 MikDark

MikDark

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

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

Отправлено 08 Апрель 2017 - 11:11

Просмотр сообщенияimysterious (08 Апрель 2017 - 10:57) писал:

Всем привет!
Подскажите пожалуйста можно ли реализовать следующую идею?
На сайте проводятся акции, что-то в подарок при покупке определенного товара, в связи с этим нужно создать кнопки в карточке товаров, с названием того товара который идет в подарок, естественно данные товары будут периодически меняться и поэтому они должны быть взаимозаменяемыми. К тому же при выборе товара в подарок, он как то должен отображаться в картоке оформленного заказа, но естественно бесплатным.
Если это возможно помогите пожалуйста это реализовать вместо кнопок, "в избранное" и кнопки "в сравнение"

Здравствуйте. Уточните, пожауйста, подарок будет только при покупке определенных товаров?

#3 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 11:25

Просмотр сообщенияMikDark (08 Апрель 2017 - 11:11) писал:

Здравствуйте. Уточните, пожауйста, подарок будет только при покупке определенных товаров?
Да все верно

#4 MikDark

MikDark

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

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

Отправлено 08 Апрель 2017 - 11:36

Просмотр сообщенияimysterious (08 Апрель 2017 - 11:25) писал:

Да все верно

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

#5 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 12:13

Просмотр сообщенияMikDark (08 Апрель 2017 - 11:36) писал:

К сожалению, к определенным товарам привязать нельзя. Мы можем либо для всех товаров отображать подарок в корзине и в заказе, либо в зависимости от суммы заказа
А Если к определенной группе товаров? Допустим к одному из подразделов один подарок, к другому подразделу каталога другой подарок?

#6 MikDark

MikDark

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

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

Отправлено 08 Апрель 2017 - 12:24

Просмотр сообщенияimysterious (08 Апрель 2017 - 12:13) писал:

А Если к определенной группе товаров? Допустим к одному из подразделов один подарок, к другому подразделу каталога другой подарок?

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

#7 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 12:30

Просмотр сообщенияMikDark (08 Апрель 2017 - 12:24) писал:

В карточке товара мы сможем отобразить, но в корзине мы привязаться к категория не сможем,к сожалению, поэтому отобразить подарок не получится
Хорошо пусть она не отображается в корзине, но что бы я понимала, что человек хочет подарок, мне об этом оповещение придет?
Я имею виду при отображении в заказе, у меня будет видно что человек нажимал данную кнопку?

#8 MikDark

MikDark

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

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

Отправлено 08 Апрель 2017 - 12:44

Просмотр сообщенияimysterious (08 Апрель 2017 - 12:30) писал:

Хорошо пусть она не отображается в корзине, но что бы я понимала, что человек хочет подарок, мне об этом оповещение придет?
Я имею виду при отображении в заказе, у меня будет видно что человек нажимал данную кнопку?

В этом случае Вам лучше у каждого товара создать 2 модификации: С подарком, и без подарка, чтобы пользователь мог выбрать

#9 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 13:18

Просмотр сообщенияMikDark (08 Апрель 2017 - 12:44) писал:

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

#10 MikDark

MikDark

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

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

Отправлено 08 Апрель 2017 - 13:22

Просмотр сообщенияimysterious (08 Апрель 2017 - 13:18) писал:

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

Вы создаете товар и у него задаете 2 модификации с одинаковой ценой, значение первой: с подарком, значение второй-  без подарка. Цена у них будет одинаковая

#11 imysterious

imysterious

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

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

Отправлено 08 Апрель 2017 - 17:46

Просмотр сообщенияMikDark (08 Апрель 2017 - 13:22) писал:

Вы создаете товар и у него задаете 2 модификации с одинаковой ценой, значение первой: с подарком, значение второй-  без подарка. Цена у них будет одинаковая
Помогите тогда вместо списка модификаций сделать кнопки, как на скрине?

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

  • 2017-04-08_17-35-04.png


#12 Stasya

Stasya

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

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

Отправлено 17 Апрель 2017 - 16:43

Просмотр сообщенияimysterious (08 Апрель 2017 - 17:46) писал:

Помогите тогда вместо списка модификаций сделать кнопки, как на скрине?
Здравствуйте. Простите  за длительное ожидание ответа. Вам необходимо в шаблоне Товар найти блок
<div class="goodsDataMainModificationsBlockProperty">
			<!-- Выдаем списки со свойствами для модификаций, чтобы определить какую модификацию товара хочет пользователь -->
			{% FOR values %}
			  <!-- Если это первый элемент в списке -->
			  {% IF goods_modifications_properties.values.first %}
				<span>{goods_modifications_properties.NAME}:</span>
				<select name="form[properties][]" class="selectBox">
			  {% 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>
и заменить его на
<div class="goodsDataMainModificationsBlockProperty">
			<!-- Выдаем списки со свойствами для модификаций, чтобы определить какую модификацию товара хочет пользователь -->
			{% FOR values %} 
			 <!-- Если это первый элемент в списке -->
			  {% IF goods_modifications_properties.values.first %}
				<span class="goodsDataMainModificationsRadio">
				<strong>{goods_modifications_properties.NAME}:</strong><br />
			  {% ENDIF %}
			  <input type="radio" name="form[properties][{goods_modifications_properties.ID}]" id="mod_{goods_modifications_properties.values.ID}" value="{goods_modifications_properties.values.ID}" {% IF goods_modifications_properties.values.SELECTED %}checked="checked"{% ENDIF %} /><label class="modButton {% IF goods_modifications_properties.values.SELECTED %}active{% ENDIF %}"  for="mod_{goods_modifications_properties.values.ID}">{goods_modifications_properties.values.NAME}</label>
			  {% IF goods_modifications_properties.values.last %}
				</span>
			  {% ENDIF %}
			{% ENDFOR %}
		  </div>
Далее в файле 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);
  // Проверяем возможность выбора на всех полях кроме второго, чтобы в первом поле так же отключилась возможность выбора не существующих модификаций
  updateVisibility (1);
  // Изменение цены товара при изменении у товара свойства для модификации
  goodsDataProperties.each(function(){
	$(this).change(function(){
и замените его на
// Функция собирает свойства в строку, для определения модификации товара
	function getSlugFromGoodsDataFormModificationsProperties(obj) {
	  var properties = new Array();
	  var reset_arr = new Array();
	  $(obj).find('input[type="radio"]').each(function(i){
		if($(this).is(':checked')){
									  properties[i] = parseInt($(this).val());}
	  });
	  for(var i in properties) {
	   if(properties[i]) {
		reset_arr.push(properties[i]);
	   }
	  }
	  return reset_arr.sort(function(a,B){return a - B}).join('_');
	}
	var
	  // Запоминаем поля выбора свойств, для ускорения работы со значениями свойств
	  goodsDataProperties = $('.goodsDataMainModificationsBlock .goodsDataMainModificationsRadio'),
	  // Запоминаем блоки с информацией по модификациям, для ускорения работы
	  goodsDataModifications = $('div.goodsDataMainModificationsList');

	  // Обновляет возможность выбора свойств модификации, для отключения возможности выбора по характеристикам модификации которой не существует.
	  function updateVisibility (y) {
								// Проверяем в каждом соседнем поле выбора модификаций, возможно ли подобрать модификацию для указанных свойств
								goodsDataProperties.each(function(j){
								  // Если мы сравниваем значения свойства не с самим собой, а с другим списком значений свойств
								  if( j != y ) {
																// Проходим по всем значениям текущего свойства модификации товара
																$(this).find('input[type="radio"]').each(function(){
																  // Записываем временный массив свойств, которые будем использовать для проверки существования модификации
																  //var checkProperties = new Array();
																  /*$(goodsDataProperties).each(function(i){
																								if($(this).is(':checked'))
																								  checkProperties[i] = parseInt($(this).val());
																  });*/
																  // Пытаемся найти модификацию соответствующую выбранным значениям свойств
																  //checkProperties[j] = parseInt($(this).attr('value'));
																  // Собираем хэш определяющий модификацию по свойствам
																  //slug = checkProperties.sort(function(a,B){return a - b}).join('_');
															  slug = getSlugFromGoodsDataFormModificationsProperties(goodsDataProperties);
																  // Ищем модификацию по всем выбранным значениям свойств товара. Если модификации нет в возможном выборе, отмечаем потенциальное значение выбора как не доступное для выбора, т.к. такой модификации нет.
																  if(!goodsDataModifications.filter('[rel="'+slug+'"]').length) {
																   $(this).attr('disabled', 'disabled');
																  // Если выбрав данное значение свойства товара можно подобрать модификацию, то выделяем вариант выбора как доступный.
																  } else {
																								$(this).removeAttr('disabled');
																  }
																});
								  }
								});
  }
  // Обновляем возможность выбора модификации товара по свойствам. Для тех свойств, выбор по которым не возможен, отключаем такую возможность.
  updateVisibility (0);
  // Изменение цены товара при изменении у товара свойства для модификации
  goodsDataProperties.each(function(y){
								$(this).find('input[type="radio"]').click(function(){
В конец данного файла добавьте блок
$(document).ready(function(){
  $('.goodsDataMainModificationsRadio .modButton').click(function(){
	$(this).parent().find('label').removeClass('active');
	$(this).addClass('active');
  })
})
Далее в самый конец файла main.css добавьте блок
label.modButton {
	display: inline-block;
	height: 32px;
	padding: 5px;
	background: #f8af21;
	margin: 5px;
	border-radius: 8px;
}
label.modButton.active{
  background: #fa7408;
}
span.goodsDataMainModificationsRadio input {
	display: none;
}






Темы с аналогичным тегами карточка товаров, кнопки

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

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