Кейс №6. Наборы товаров

Создание информера товаров набора

В первую очередь необходимо создать информер товаров в интернет магазине uCoz. Обязательно в дополнительных настройках укажите ID товаров или категорий, которые будут добавлены в набор.

Теперь перейдите в редактирование шаблона информера и добавьте следующий код:

<!-- Шаблон товаров в наборе -->
<div class="col-md-4 text-center">
<a href="$ENTRY_URL$">$NAME$</a>
<div class="lead">$PRICE$</div>
<a href="$ENTRY_URL$"><img alt="" src="$THUMB$" class="gphoto img-thumbnail" id="$BLOCK_PREF$-gphoto-$ID$"></a>
</div>
<!-- Скрипт для набора, не изменять -->
<script type="text/javascript">
<?if $NO$ = 1?>
 umSets.$BLOCK_PREF$ = [[$ID$],+parseInt($(".$BLOCK_PREF$-good-$ID$-price").text())];
<?else?>
 umSets.$BLOCK_PREF$[0].push($ID$);
 umSets.$BLOCK_PREF$[1] += +parseInt($(".$BLOCK_PREF$-good-$ID$-price").text());
<?endif?>
</script>

Размещение информера наборов

Необходимо определиться, на какую страницу будет помещен набор. Это может быть страница каталога или товара, в таком случае разместите следующий код в шаблоне:

<!-- Разместить перед </head>-->
<script type="text/javascript">
var umSets = { };
</script>

<!-- Разместить в месте вывода набора-->
<div class="row" id="inf15">$MYINF_15$
<p class="um-set-sum">руб.</p>
<button class="um-set-btn"> Купить набор </button>
</div>

<!-- Разместить перед </body>-->
<script type="text/javascript">
function addSet(pref) {
 for(i=0;i<umSets[pref][0].length;i++) {
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':umSets[pref][0][i], 'pref':pref, 'cnt':1}});
 }
 $.fancybox('#added-to-cart-message-alert');
 return false; 
}
for (set in umSets) {
 $("#"+set+" .um-set-sum").prepend(umSets[set][1]);
 $("#"+set+" button").click(function(){
 addSet(set);
 });
}
</script>

Обратите внимание на следующие вещи:

• id информера $MYINF_15$ и id="inf15" родительского контейнера имеют одинаковый числовой литерал (15). В вашем случае они также должны совпадать;
• валюта указывается в <p class="um-set-sum">...</p> и может быть любой (пример <p class="um-set-sum">руб.</p>);
• строка $.fancybox('#added-to-cart-message-alert'); вызывает окно с корзиной после нажатия кнопки "Купить набор". Как это реализовать описывалось в уроке про корзину.

Демонстрация работы

Пример работы скрипта набора товаров.

Недостатки данной реализации

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

• Не работают опции товаров
• Некорректно отображается валюта при переключении. Валюта задается один раз в шаблоне странице и не может быть изменена
• Не протестирована корректная работа скрипта при размещении нескольких информеров наборов на одной странице

Если вы нашли недостаток или ошибку, пожалуйста, укажите это в комментариях. Я учту это при доработке скрипта.