Я сделал костыльно. Но работает:
в шаблоне детальной карточки товара Вам нужно:
1. Разместить в шаблоне попап для информирования покупателя о добавлении товара.
Код |
---|
<div class="pop_up_bay hidden"> <span style="background: transparent">
<a href="jav * ascript:void(0);" class="close" rel="nofollow"></a>
</span>
<p class="h2-buy">Товар успешно добавлен в корзину!</p>
<a class="btn btn-primary buy-add" id="data-add" href="/catalog/" rel="nofollow">Продолжить покупки</a>
<a class="btn btn-primary buy-add" id="data-buy" href="/personal/cart/" rel="nofollow">Перейти в корзину</a>
</div> |
2. В том же шаблоне нужно завести скрытые поля для хранения ID предложения и товара.
Код |
---|
<div class="hidden" style="display:none;" id="offer_id" value=""></div>
<div class="hidden" style="display:none;" id="product_id" value="<?=$arResult["ID"]?>"></div>
|
Как это у Вас реализовано - я не могу сказать. Вот мой способ: В script.js компонента catalog.element в стандартном шаблоне нужно найти секцию
changeInfo: function() {}, где-то между 2300 - 2500 строчках.
Код |
---|
changeInfo: function() {
//...//
eventData.newId = this.offers[this.offerNum].ID;
// only for compatible catalog.store.amount custom templates
BX.onCustomEvent('onCatalogStoreProductChange', [this.offers[this.offerNum].ID]);
// new event
BX.onCustomEvent('onCatalogElementChangeOffer', [eventData]);
eventData = null;
}
//...//
var offerid = document.querySelector('#offer_id');
offerid.setAttribute("value", this.offers[this.offerNum].ID);
console.log(this.offers[this.offerNum].ID);
}, |
3. Добавьте логику закрытия попап окошка в js-скрипт
Код |
---|
console.log('uploaded pop-up');
document.addEventListener('click', function(event) {
var e=document.querySelector('.pop_up_bay');
if (!e.contains(event.target) && !e.classList.contains('hidden'))
e.classList.add('hidden');
});
var closeBtn = document.querySelector('.pop_up_bay');
//console.log(closeBtn);
closeBtn.addEventListener("click", function(event) {
var e=document.querySelector('.pop_up_bay');
if (!e.classList.contains('hidden')) {
e.classList.add('hidden');
}
}, false);
|
4. Создайте js-скрипт добавления товара в корзину, используется ajax запрос:
Код |
---|
function Buy() {
const kol = document.querySelector('.product-item-amount-field').value;//Получаем количество из поле ввода
const id = document.querySelector('#offer_id').getAttribute("value");//Получаем ID товара
//console.log(id + " " + kol)
var formData = new FormData();//Создадим объект для передачи данных
formData.append('id', id);//Добавим переменную с ID товара
formData.append('kol', kol);//Добавим переменную с количеством товаров
//ajax
var HttpRequest = new XMLHttpRequest();//Создадим объект для отправки AJAX запроса
HttpRequest.onl oad = function(e) {
if (this.status == 200) {//Проверка что результат отчета успешный (может быть 404 или другие)
//alert('Товар добавлен в корзину');//Сообщение
//document.getElementById('chart-value').innerText = this.response;//Записываем цифру в элемент корзины в верстке
var popup_bay = document.querySelector('.pop_up_bay');
if(popup_bay.classList.contains('hidden')){
popup_bay.classList.remove('hidden');
}
}
};//Функция в которую возвращается ответ от сервера
HttpRequest.open("POST", '/path/to/index-ajax.php');//Настройка запроса для отправки (второй параметр путь к PHP скрипту)
HttpRequest.send(formData);//Отправка запроса на сервер
}
|
Затем найдите кнопку "Купить" и добавьте в onclick-атрибут функцию Buy():
Код |
---|
<button type="button" class="btn btn-primary product-item-detail-buy-button" oncl ick="Buy();">
<?=$arParams['MESS_BTN_BUY']?>
</button>
|
5. Сам Файл index-ajax.php, который Вам добавит товар:
Код |
---|
<? require_once ($_SERVER['DOCUMENT_ROOT']."/bitrix/modules/main/include.php");?>
<?
if (CModule::IncludeModule("sale") && CModule::IncludeModule("catalog"))
{
if (isset($_POST['id'])&& isset($_POST['kol'])) {
$PRODUCT_ID = intval($_POST['id']);
$QUANTITY = intval($_POST['kol']);
Add2BasketByProductID(
$PRODUCT_ID,
$QUANTITY,
false
);
}
else {
echo "Нет параметров ";
}
}
else {
echo "Не подключены модули";
}
die();
?>
|
Вроде ничего не забыл.
Стилизовать окошко сможете сами. Это часть моих стилей.
Код |
---|
.hidden {
display:none;
}
.pop_up_bay {
display: flex;
border-radius: 3px;
flex-direction: column;
justify-content: center;
position: fixed;
text-align: center;
padding: 20px 10px;
top: 25%;
left: 50%;
transform: translate(-50%);
background-color: #fff;
z-index: 2;
max-width: 350px;
width: 100%;
}
|