Ajax basket recalculation when changing the quantity of goods


In CS-Cart, when changing the quantity of items in the basket, the basket itself is not updated, you have to click on the “Recalculate” button. For some customers, this is not obvious and they are lost when they proceed to checkout and see the old quantity of items there. This article will describe how to quickly Ajax update the cart when the quantity of items in it changes.

I want to say at once that this method is a crutch, and not a complete solution to the problem, then you will understand what I mean.

In CS-Cart there are internal content update methods using Ajax. One of these is the class cm-ajax in cart. About this Ajax in CS-Cart can be read in the documentation for CMS. Since initially all the necessary id and tags are already in the standard theme, you only need to register the class cm-ajax in basket form.

The form is located in the template in the directory:
design/themes/your_template/templates/views/checkout/components/cart_content.tpl.
Paste need in this form:
<form class=”cm-check-changes” action=”{” enctype=”multipart/form-data” method=”post” name=”checkout_form”>.
This will result in the following form code.:
<form class=”cm-check-changes cm-ajax” action=”{” enctype=”multipart/form-data” method=”post” name=”checkout_form”>.

Check the performance Ajax cart updates are already possible by changing the quantity of items and clicking on the “Recalculate” button. Go to the final stage. From the beginning, you need to hide the “Recalculate” button. You do not need to remove it from the code at all, it will be necessary to update the basket.

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

It remains only to register the scripts.
In the script file of your theme
design/themes/your_template/templates/common/scripts.tpl
or in scripts connected via module
design/themes/your_template/templates/addons/your_module/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 () { // Triggering the click on the "Recalculate" button, when you click to increase or decrease the quantity of items.
            setTimeout(function () { // We make a delay so that the quantity of items first changes, and then the basket is updated, otherwise the basket will simply be updated without change.
                $('.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 () { // Triggering the click on the "Recalculate" button, while prescribing your quantity of items.
            $('.ty-cart-content__right-buttons a[data-ca-external-click-id="button_cart"]').trigger( "click" );
        });
	}(Tygh, Tygh.$));

</script>
{/literal}

That’s all. The crutching method is that we simply hang the basket update by clicking on the button. This is a quick and easy solution, but most likely there is a better solution.




Connect

If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email info@bobreod.ru





By submitting the form, you agree to our privacy policy