How to update the number of items in the cart without reloading?

Question

PHP

Hello! There is a standard online store on wordpress + woocommerce in which on the basket page
you can increase or decrease the quantity of goods with pluses / minuses, but the cost is updated only after clicking the update button. How to make the update work using ajax technology without reloading the page and without the refresh button?
There is a woocommerce ajax cart plugin , but it doesn't work with the latest versions of wordpress and woocommerce.
I'm trying to bind the value of the input field to change the value and bind it to one of the triggers, but the info is not saved when you go to the design page

$('.cart_item .input-text.qty.text').change(function () {
    this.setAttribute('value',$(this).val());
    //$( document.body ).trigger( 'update_checkout' );
    //$( document.body ).trigger( 'updated_cart_totals' );
    $( document.body ).trigger( 'updated_wc_div' );
  });

Answer 1

Do you have any triggers hanging, do they lead somewhere? As is often the case in this kind of crafts - everything is implemented through the back seat. It would be nice if the Indians wrote, but it seems that normal people write.
Specifically, according to your example - something like

$('.elem.plus').click (function () {
  $.post ('ajax.php', { 'action':'cart', 'area':'plus' }, function (result) {
     $('.total').html (result);
  });
});

And now in words: you have some element - this is a plus button. We hang a click handler on it, which, when clicked, sends data to some ajax.php script by post (it is best to specify an absolute url to it (which is ), this script already executes the necessary queries to the database and returns the result via echo, which is then displayed in an object with class .total somewhere on the page, like something like this: That's it) <div class="elem plus"></div>http://

Answer 2

Hang a listener on the pros / cons, after clicking, call the click event on the "Update" button