21 авг в 20:16

AJAX обновление суммы на странице Корзины JoomShopping

Средний

Ожидает приглашения

В стандартном исполнении на странице Корзины при изменении количества товаров автоматического перерасчета не происходит, а есть специальная кнопка - "Обновить корзину"

При небольших изменениях можно сделать все асинхронно и без дополнительных действий со стороны посетителя сайта

Для начала нужно переопределить шаблон Корзины
Копируем файл components/com_jshopping/templates/default/cart/cart.php в свой шаблон по пути - templates/<-ваш шаблон->/html/com_jshopping/cart/cart.php
В файле cart.php меняем input выбора количества товаров на свой
Было (примерно 120 строка):
```<input type="number" name="quantity[<?php print $key_id ?>]" value="<?php print $prod['quantity'] ?>" class="inputbox" min="0">```
Стало:
<div class="number-input number-input-cart""> <button class="minus" type="button">-</button> <input type="number" name="quantity[<?php print $key_id ?>]" value="<?php print $prod['quantity'] ?>" data-product_id="<?=$prod['product_id']?>" data-category_id="<?=$prod['category_id']?>" class="inputbox" min="1"> <button class="plus" type="button">+</button> </div>
Тут мы добавляем кнопки Плюс-Минус и оборачиваем в блок div с классом number-input-cart. Это будет нашим селектором для обработки скриптом на js. Ну и стилей немного добавим для удобства
Добавляем стили
/* Общий стиль контейнера / .number-input { display: flex; align-items: center; width: 110px; height: 40px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } / Стиль кнопок */ .number-input button { background-color: #97a0a8; color: white; border: none; width: 40px; height: 40px; cursor: pointer; font-size: 18px; font-weight: 500; transition: background-color 0.3s ease; }
.number-input button:hover { background-color: #D9DDE1FF; color: #000; } .number-input button:active { background-color: #D9DDE1FF; color: #000; } .number-input input { width: 100%; text-align: center; font-size: 16px; border: none; outline: none; background-color: transparent; appearance: none; -moz-appearance: textfield; } .number-input input::-webkit-inner-spin-button, .number-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}

Должно получится примерно так:
Теперь пишем наш обработчик на js для асинхронного (ajax) обновления страницы без перезагрузки страницы.
Лично я создал файл cart.js и подключаю его на странице корзины. Для этого в индексном файле шаблона index.php я проверяю условие нахождения на нужной странице и подключаю файл:
Подробнее про использование Web Asset Manager можно узнать здесь

А вот, собственно, и сам файл cart.js:

document.addEventListener('DOMContentLoaded', function () {
let cartBlock = document.querySelector('main');
// Создаем наблюдатель
 const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'childList') {
updateCart(cartBlock)
}
});
 });
 observer.observe(cartBlock, {
childList: true // Отслеживать изменения дочерних элементов
 });
 updateCart(cartBlock)
});
function updateCart(cartBlock){
const cartProducts = document.querySelectorAll('.number-input-cart');

 cartProducts.forEach(product => {
let btnMinus = product.querySelector('.minus');
 let btnPlus = product.querySelector('.plus');
 let inputCartProducts = product.querySelector('input');

 btnPlus.addEventListener('click', function () {
let value = parseInt(inputCartProducts.value);
 inputCartProducts.value = value + 1;
 quantityRefresh(cartBlock);
 });
 btnMinus.addEventListener('click', function () {
let value = parseInt(inputCartProducts.value);
 if (value > 1) {
inputCartProducts.value = value - 1;
 quantityRefresh(cartBlock)
}
});
 });
 function quantityRefresh(cartBlock) {
let data = new FormData();
 let productQuantities = [];
 cartProducts.forEach(product => {
productQuantities.push(product.querySelector('input').value)
})
for (let key in productQuantities) {
if (!productQuantities.hasOwnProperty(key)) continue;
 let value = productQuantities[key];
 data.append('quantity[' + key + ']', value);
 }
Joomla.request({
url: '/?option=com_jshopping&controller=cart&task=refresh&ajax=1',
 method: 'POST',
 data: data,
 onSuccess: (response, xhr) => {
if (response !== '') {
updateCartDisplay(cartBlock); // Обновляем отображение корзины
 }
}
});
 }
// Функция для обновления отображения корзины
 function updateCartDisplay(cartBlock) {
fetch('/?option=com_jshopping&controller=cart&task=view&ajax=1')
.then(response => response.text())
.then(data => {
//let cartBlock = document.querySelector('main');
 if (cartBlock) {
cartBlock.innerHTML = data;
 }
})
.catch(error => {
console.error('Ошибка:', error);
 });
 }
}

Краткое описание скрипта:

используется чистый JavaScript, без использования Jquery
обратите внимание на селектор main - let cartBlock = document.querySelector('main'); у вас он может быть другим. Важно указать верный селектор. Это селектор, который оборачивает системный тег вывода основного содержимого страницы ```<jdoc:include type="component" />``` Он находится в файле index.php вашего шаблона:

Хабы:

Joomla