Добавление примечаний к товару

В данном пользовательском решении к товару необходимо было добавить 3 характеристики для контактных линз, которые будут указаны пользователем. Пример приводится в том виде, как был реализован на сайте:

Для начала на странице сайта необходимо разместить блок c ID = Идентификатор товара внутри которого 3 списка с опциями товара:

<div id="4a9f99dc1684">
	<label>Базовая кривизна: </label>
	<select class="ens-selected-prop" data-name="Базовая кривизна" >
		<option>0.25</option>
		<option>0.50</option>
		<option>0.75</option>
	</select>
	<label>Сила: </label>
	<select  class="ens-selected-prop" data-name="Сила" >
		<option>0.25</option>
		<option>0.50</option>
	</select>
	<label>Цвет:</label>
	<select  class="ens-selected-prop" data-name="Цвет"  >
		<option>Белый</option>
		<option>Серый</option>
	</select>
</div>  

Далее в стандартной кнопке Купить потребуется удалить класс btn-ens-action, который вызывает добавление товара в корзину и добавить новый класс, например, btn-ens-selected-1. Код кнопки будет выглядеть так:

<a class="btn-ens-selected-1 btn-ens-style" data-rel="4a9f99dc1684">Купить</a>

Для нового класса btn-ens-selected-1 определяем событие по клику:

<script>
	document.addEventListener("EasyNetShopLoaded", function(event) {
		ens_jQuery('.btn-ens-selected-1').click(function() {
			// По-умолчанию текст примечания пустой
			var notice = '';
			// Обходим все элементы с классом ens-selected-prop внутри DIVа с ID == id товара
			ens_jQuery('#'+ens_jQuery(this).data('rel')+' .ens-selected-prop').each(function() {
				// Из каждого берем текущее (выбранное пользователем) значение и добавляем в текст примечания
				notice += ens_jQuery(this).data('name')+': '+ens_jQuery(this).val()+'; ';
			});
			// Добавляем товар в корзину с примечанием в параметре "notice" 
			easynetshop_buy(ens_jQuery(this).data('rel'), notice);
		});
	}, false);
</script>

Пример работы: