AJAX добавление в корзину
Июль 12, 2021
Теги: Магазин, JavaScript
AJAX добавление в корзину на чистом JavaScript и с использованием готовых ajax скриптов магазина.
JavaScript код:
document.querySelectorAll("[data-add-to-cart]").forEach((function(e,r){
e.addEventListener("click",(function(a){
a.preventDefault();
const request = new XMLHttpRequest();
const url = "";
const params = "action=ADD2BASKET&ajax_basket=Y&id=" + this.dataset.addToCart;
request.responseType = "json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.addEventListener("readystatechange", () => {
if(request.readyState !== 4)
return;
if (request.status === 200) {
let data = request.response;
if(data.STATUS=='ERROR') {
alert(data.MESSAGE);
} else if(data.STATUS=='OK') {
const request = new XMLHttpRequest();
const url = "/bitrix/components/bitrix/sale.basket.basket.line/ajax.php";
var params = "sessid="+window.sessid+"&siteId=em&templateName=shop_header";
params += "&arParams[HIDE_ON_BASKET_PAGES]=N";
params += "&arParams[PATH_TO_BASKET]=/personal/cart/";
params += "&arParams[PATH_TO_ORDER]=/personal/order/make/",
params += "&arParams[PATH_TO_PERSONAL]=/personal/";
params += "&arParams[PATH_TO_PROFILE]=/personal/";
params += "&arParams[PATH_TO_REGISTER]=/auth/";
params += "&arParams[POSITION_FIXED]=Y";
params += "&arParams[POSITION_HORIZONTAL]=right";
params += "&arParams[POSITION_VERTICAL]=top";
params += "&arParams[SHOW_AUTHOR]=Y";
params += "&arParams[SHOW_DELAY]=N";
params += "&arParams[SHOW_EMPTY_VALUES]=Y";
params += "&arParams[SHOW_IMAGE]=Y";
params += "&arParams[SHOW_NOTAVAIL]=N";
params += "&arParams[SHOW_NUM_PRODUCTS]=Y";
params += "&arParams[SHOW_PERSONAL_LINK]=N";
params += "&arParams[SHOW_PRICE]=Y";
params += "&arParams[SHOW_PRODUCTS]=N";
params += "&arParams[SHOW_SUBSCRIBE]=N";
params += "&arParams[SHOW_SUMMARY]=N";
params += "&arParams[SHOW_TOTAL_PRICE]=N";
params += "&arParams[COMPONENT_TEMPLATE]=header";
params += "&arParams[PATH_TO_AUTHORIZE]=";
request.responseType = "text";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.addEventListener("readystatechange", () => {
if(request.readyState !== 4)
return;
if (request.status === 200) {
let data = request.response;
document.querySelectorAll("[data-basket-line]").forEach(function(e,r){
e.innerHTML = data;
});
} else {
alert('ajax request error');
}
});
request.send(params);
}
} else {
alert('ajax request error');
}
});
request.send(params);
}))
}))
Вариант для постоянной привязки обработчика в аякс контейнере:
document.querySelector('[data-akax-container]').addEventListener('click', e => {
const btn=e.target.closest('[data-add-to-cart]');
if (!btn)
return;
e.preventDefault();
const request = new XMLHttpRequest();
const url = "";
const params = "action=ADD2BASKET&ajax_basket=Y&id=" + btn.dataset.addToCart;
request.responseType = "json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener("readystatechange", () => {
if(request.readyState !== 4)
return;
if (request.status === 200) {
let data = request.response;
if(data.STATUS=='ERROR') {
alert(data.MESSAGE);
} else if(data.STATUS=='OK') {
const request = new XMLHttpRequest();
const url = "/bitrix/components/bitrix/sale.basket.basket.line/ajax.php";
var params = "sessid="+window.sessid+"&siteId=em&templateName=shop_header";
params += "&arParams[HIDE_ON_BASKET_PAGES]=N";
params += "&arParams[PATH_TO_BASKET]=/personal/cart/";
params += "&arParams[PATH_TO_ORDER]=/personal/order/make/",
params += "&arParams[PATH_TO_PERSONAL]=/personal/";
params += "&arParams[PATH_TO_PROFILE]=/personal/";
params += "&arParams[PATH_TO_REGISTER]=/auth/";
params += "&arParams[POSITION_FIXED]=Y";
params += "&arParams[POSITION_HORIZONTAL]=right";
params += "&arParams[POSITION_VERTICAL]=top";
params += "&arParams[SHOW_AUTHOR]=Y";
params += "&arParams[SHOW_DELAY]=N";
params += "&arParams[SHOW_EMPTY_VALUES]=Y";
params += "&arParams[SHOW_IMAGE]=Y";
params += "&arParams[SHOW_NOTAVAIL]=N";
params += "&arParams[SHOW_NUM_PRODUCTS]=Y";
params += "&arParams[SHOW_PERSONAL_LINK]=N";
params += "&arParams[SHOW_PRICE]=Y";
params += "&arParams[SHOW_PRODUCTS]=N";
params += "&arParams[SHOW_SUBSCRIBE]=N";
params += "&arParams[SHOW_SUMMARY]=N";
params += "&arParams[SHOW_TOTAL_PRICE]=N";
params += "&arParams[COMPONENT_TEMPLATE]=header";
params += "&arParams[PATH_TO_AUTHORIZE]=";
request.responseType = "text";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener("readystatechange", () => {
if(request.readyState !== 4)
return;
if (request.status === 200) {
let data = request.response;
document.querySelectorAll("[data-basket-line]").forEach(function(e,r){
e.innerHTML = data;
});
} else {
alert('ajax request error');
}
});
request.send(params);
}
} else {
alert('ajax request error');
}
});
request.send(params);
})
Для работы данного скрипта в шаблоне компонента "bitrix:sale.basket.basket.line" должен быть файл ajax_template.php следующего содержания:
Непосредственно код размещения компонента "bitrix:sale.basket.basket.line":
<div class="header__cart" data-basket-line>
<?$APPLICATION->IncludeComponent(
"bitrix:sale.basket.basket.line",
"shop_header",
array(
"HIDE_ON_BASKET_PAGES" => "N",
"PATH_TO_BASKET" => '/personal/cart/',
"PATH_TO_ORDER" => "/personal/order/make/",
"PATH_TO_PERSONAL" => "/personal/",
"PATH_TO_PROFILE" => "/personal/",
"PATH_TO_REGISTER" => "/auth/",
"POSITION_FIXED" => "Y",
"POSITION_HORIZONTAL" => "right",
"POSITION_VERTICAL" => "top",
"SHOW_AUTHOR" => "Y",
"SHOW_DELAY" => "N",
"SHOW_EMPTY_VALUES" => "Y",
"SHOW_IMAGE" => "Y",
"SHOW_NOTAVAIL" => "N",
"SHOW_NUM_PRODUCTS" => "Y",
"SHOW_PERSONAL_LINK" => "N",
"SHOW_PRICE" => "Y",
"SHOW_PRODUCTS" => "N",
"SHOW_SUBSCRIBE" => "N",
"SHOW_SUMMARY" => "N",
"SHOW_TOTAL_PRICE" => "N",
"COMPONENT_TEMPLATE" => "shop_header",
"PATH_TO_AUTHORIZE" => ""
),
false
);
?>
</div>