Итак, у нас есть несколько компонентов, которые выводят товарна странице и есть задача сделать так, чтобы при нажатии на кнопку "Купить" в корзину добавлялось необходимое количество товара, который клиент вводит на странице.
Данный функционал в компоненты Битрикса заложен, но не используется в шаблонах, поэтому у многих разработчиков с этим возникают трудности.[spoiler]
Если разобрать код шаблона компонента, например, eshop.catalog.top, то обнаружим следующий код:
<a href="<?=$arItem["ADD_URL"]?>" rel="nofollow" onclick="return addToCart(this, 'list', '<?=GetMessage("CATALOG_IN_CART")?>', 'noCart');" id="catalog_add2cart_link_<?=$arItem['ID']?>">
......
</a> |
Задача сводится к прикручиванию количества товара к отправляемому запросу.
Для этих целей доабвим в шаблон поле ввода количества:
<input name="quantity_<?=$arItem['ID']?>" type="text" value="1" /> |
Далее вносим изменения в функцию "addToCart", которая располагается в файле script.js шаблона сайта.
В результате изменений функция принимает следующий вид:
function addToCart(element, mode, text, type) {
if (!element && !element.href)
return;
var href = element.href;
var button = $(element);
button.unbind('click').removeAttr("href");
titleItem = button.parents(".R2D2").find(".item_title").attr('title');
imgItem = button.parents(".R2D2").find(".item_img").attr('src');
$('#addItemInCart .item_title').text(titleItem);
$('#addItemInCart .item_img img').attr('src', imgItem);
var ModalName = $('#addItemInCart');
CentriredModalWindow(ModalName);
OpenModalWindow(ModalName);
//определяем количество товара, введенное в поле input
el_quantity_id = href.match(/id=([\d]+)/);
quan = $('input[name=quantity_'+el_quantity_id[1]+']').attr('value');
if (href)
$.post( href+"&ajax_buy=1&quantity="+quan, //изменяем метод отправки с get на post
{quantity: quan}, //добавляем параметр quantity со значением количества товара
$.proxy(
function(data) {
$("#cart_line").html(data);
/*if (type == "cart") //picture cart in button
this.html(text).removeClass("addtoCart").addClass("incart");
else if (type == "noButton")
this.html(text);
else
this.html(text).removeClass("addtoCart").addClass("incart"); */
}, button)
);
return false;
}
|
Для отправки запроса используется метод POST, а не GET, как по умолчанию написано в функции AddToCart, поскольку во всех компонентах проверка количества товара жестко берется из глобального массива $_POST.
Таким образом, для добавления количества товара не требуется кастомизировать сам компонент, а достаточно скорректировать функцию AddToCart.
Подводный камень:
Не рассматривал все компоненты, но, например, в компоненте eshop.catalog.top в настройках нет параметра USE_PRODUCT_QUANTITY, который внутри компонента проверяется. Если он не задан Y, то какие бы мы запросы не отправляли, в корзину будет добавляться 1 товар. Поэтому в коде вызова компонента необходимо добавить это свойство. Например:
<?$APPLICATION->IncludeComponent(
"bitrix:eshop.catalog.top",
".default",
Array(
"DISPLAY_IMG_WIDTH" => "130",
"DISPLAY_IMG_HEIGHT" => "130",
"SHARPEN" => "30",
"IBLOCK_TYPE_ID" => "catalog",
"IBLOCK_ID" => "3",
"ELEMENT_SORT_FIELD" => "sort",
"ELEMENT_SORT_ORDER" => "asc",
"ACTION_VARIABLE" => "action",
"PRODUCT_ID_VARIABLE" => "id",
"PRODUCT_QUANTITY_VARIABLE" => "quantity",
"PRODUCT_PROPS_VARIABLE" => "prop",
"SECTION_ID_VARIABLE" => "SECTION_ID",
"DISPLAY_COMPARE" => "N",
"ELEMENT_COUNT" => "4",
"FLAG_PROPERTY_CODE" => "SPECIALOFFER",
"OFFERS_LIMIT" => "5",
"PRICE_CODE" => array("BASE"),
"USE_PRICE_COUNT" => "Y",
//------->>"USE_PRODUCT_QUANTITY" => "Y", //<<----Вот наш параметр
"SHOW_PRICE_COUNT" => "1",
"PRICE_VAT_INCLUDE" => "Y",
"PRODUCT_PROPERTIES" => array(),
"CACHE_TYPE" => "A",
"CACHE_TIME" => "180",
"CACHE_GROUPS" => "N"
)
);?>
|
