Ajax пересчёт корзины при изменении количества товара


Из коробки в CS-Cart, при изменении количества товара в корзине, корзина сама не обновляется, приходится нажимать на кнопку «Пересчитать». Для некоторых клиентов это не очевидно и они теряются, когда переходят к оформлению заказа и видят там старое количество товара. В данной статье будет описан метод, как быстро сделать Ajax обновление корзины при изменении количества товара в ней.

Хочу сказать сразу, что данный метод представляет собой костыль, а не полное решение проблемы, далее вы поймёте о чём я говорю.

В CS-Cart есть внутренние методы обновления контента при помощи Ajax. Один из них — это вставка класса cm-ajax в форму корзины. Более подробно об Ajax в CS-Cart можно прочитать в документации движка. Так как изначально в стандартной теме проставлены уже все нужные id и теги, нужно только прописать класс cm-ajax в форму.

Форма расположена в шаблоне в директории:
design/themes/ваша_тема/templates/views/checkout/components/cart_content.tpl.
Вставить нужно в эту форму:
<form class=»cm-check-changes» action=»{» enctype=»multipart/form-data» method=»post» name=»checkout_form»>.
В итоге получится такой код формы:
<form class=»cm-check-changes cm-ajax» action=»{» enctype=»multipart/form-data» method=»post» name=»checkout_form»>.

Проверить работоспособность Ajax обновления корзины уже можно, изменив количество товара и нажав на кнопку «Пересчитать». Переходим к заключительному этапу. С начало надо скрыть кнопку «Пересчитать». Удалять её из кода совсем не надо, она нужна будет для обновления корзины.

.ty-cart-content__right-buttons a[data-ca-external-click-id="button_cart"] {
    display: none!important;
}

Осталось только прописать скрипты.
В файле скриптов вашей темы
design/themes/ваша_тема/templates/common/scripts.tpl 
или в скриптах подключённые через модуль
design/themes/ваша_тема/templates/addons/ваш_модуль/hooks/index/footer.post.tpl 
или где вам удобнее.

{literal}
<script>
    (function(_, $){
		$('body').on('click','#cart_items .ty-table .ty-value-changer__increase, #cart_items .ty-table .ty-value-changer__decrease',function () { // Срабатывание клика по кнопке "Пересчитать", при клике на увеличение или уменьшение количества товара.
            setTimeout(function () { // Делаем задержку, чтобы вначале изменилось количество товара, а потом происходило обновление корзины, иначе корзина просто будет обновляется без изменения.
                $('.ty-cart-content__right-buttons a[data-ca-external-click-id="button_cart"]').trigger( "click" );
            }, 100);
        });
        $('body').on('change','#cart_items .ty-table input.ty-value-changer__input',function () { // Срабатывание клика по кнопке "Пересчитать", при прописывании своего количества товара.
            $('.ty-cart-content__right-buttons a[data-ca-external-click-id="button_cart"]').trigger( "click" );
        });
	}(Tygh, Tygh.$));

</script>
{/literal}

Вот и всё. Костыльный метод в том, что мы просто вешаем обновление корзины на клик по кнопке. Это быстрое и лёгкое решение, но скорее всего, есть решение и лучше.


Для связи

Если у вас появились какие-либо вопросы, хотите получить индивидуальный совет или у вас есть интересное предложение, вы можете связаться через форму обратной связи.

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности