Конфигуратор товара

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

1 Сформируем группы возможных опций товара внутри общего DIV-контейнера и присвоим ему любое id, которое будет связано с кнопкой "купить".

У каждого INPUT есть параметры data-name и data-price - они используются для формирования названия нового продукта и его цены (названия склеиваются, цены складываются).

<div id="ID блока (любое)">
  <input type="checkbox" data-name="Пепперони" data-price="0"  checked disabled> <label>Пепперони</label>
  
  <input type="radio" name="myradio1" data-name="большая" data-price="750" checked> <label>Большая</label>
  <input type="radio" name="myradio1" data-name="средняя" data-price="525"> <label>Средняя</label>
  <input type="radio" name="myradio1" data-name="маленькая" data-price="380"> <label>Маленькая</label>
	  
  <input type="radio" name="myradio2" data-name="обычная" data-price="0"  checked> <label>Обычная</label>
  <input type="radio" name="myradio2" data-name="тонкая" data-price="0" > <label>Тонкая</label>
</div>

2 Кроме блока с товарами потребуется еще создать кнопку "Купить", которая создаст товар из выбранных опций и затем добавит его в корзину:

  <button class="btn-ens-selected-self" data-div="ID блока (любое)">Купить</button>
Shop product image!






3 Для связки кнопки "Купить" и блока с опциями требуется добавить на страницу код (один раз, после кода подклчения корзины)

<script>
  document.addEventListener("EasyNetShopLoaded", function(event) {
    ens_jQuery('.btn-ens-selected-self').click(function() {  
      self_name = ''; self_price = 0; 
      ens_jQuery('#'+ens_jQuery(this).data('div')+' input:checked').each(function(){
        self_name += ' ' + ens_jQuery(this).data('name');
        self_price += ens_jQuery(this).data('price');        
      });
	  easynetshop_self(self_name, self_price);
    });
  }, false);
</script>