How to correctly send an Ajax request to update the quantity of goods on the opencart 3 cart page?

Question

opencart

I'm trying to update the number of items on the shopping cart page via Ajax. There is a lot of information on the Internet on the topic, but each of them turned out to be ineffective.

Each item in the cart has a quantity field . For me, it looks like this

<input type="text" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" size="1" min="1" class="tac ch_quantity" oninput="updateCart('{{ product.quantity }}', '{{ product.cart_id }}', $(this).val());" />

Everything out of the box except

size="1" и oninput="updateCart('{{ product.quantity }}', '{{ product.cart_id }}', $(this).val());"

That is, when changing the quantity field, I pass the quantity, cart_id and the value entered by the user to the updateCart function

Next script

function updateCart(quantity, cart_id, val) {
setTimeout(function(){ // ждем 100 миллисекунд
//alert('quantity = '+ quantity +', cart_id = ' + cart_id + ', val = ' + val);
if (quantity != 0 && quantity != 'undefined') { // если кол-во не равно 0, то делаем ajax запрос
$.ajax({
url: 'index.php?route=checkout/cart/edit', // на этот урл
type: 'post', //пост
//data: 'cart_id['+cart_id+']='+val, //пробовал сначала этот вариант data
data: 'key=' + cart_id + '&quantity=' + (typeof(val) != 'undefined' ? val : 1), // потом этот как из коробки в common.js
dataType: 'json', //json
success: function(json) {
 //да, тут кастомизированная корзина, тоесть все тоже самое что из коробки только заместо ul, li, table сделал div-"ы" (суть не меняется от этого)
$('#cart .ch_allProductsWrapper').load('index.php?route=common/cart/info .ch_allProductsWrapper .ch_products'); // обновляем корзину в шапке
if($('#checkout-cart').length>0){
$('#checkout-cart .ch_allProductsWrapper').load('index.php?route=common/cart/info .ch_allProductsWrapper .ch_products'); // обновляем на странице корзина
}
},
error: function(xhr, ajaxOptions, thrownError) {
$.jGrowl(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
}, 100);
}

What is the result?

Suppose initially (before changing the quantity) all products have a quantity with the value "1", then I change, for example, to "12" and the following happens.

The baskets in the header and in the body of the page are updated, but the value of the number of goods changes to "1" again, I don’t understand what’s wrong, that is, what’s wrong in the Ajax request, I probably wrote something wrong in the “data” parameter, already killed a lot of time on this matter. So I decided to ask for help here.

Out of the box in common.js a piece of cart update code

'update': function(key, quantity) {
$.ajax({
url: 'index.php?route=checkout/cart/edit',
type: 'post',
data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
dataType: 'json',
success: function(json) {
// Need to set timeout otherwise it wont update the total
setTimeout(function () {
$('header .headerTotal').html('<span id="cart-total">' + json['total'] + '</span>');
}, 100);

if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
location = 'index.php?route=checkout/cart';
} else {
$('#cart .ch_allProductsWrapper').load('index.php?route=common/cart/info .ch_allProductsWrapper .ch_products');
if($('#checkout-cart').length>0){
$('#checkout-cart .ch_allProductsWrapper').load('index.php?route=common/cart/info .ch_allProductsWrapper .ch_products');
}
}
},
error: function(xhr, ajaxOptions, thrownError) {
$.jGrowl(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
},

As I understand it, key means the cart_id value from the database, but it is not clear how it gets from there

Answer 1

As I understand it, the page there is still updated by the controller, and since the value="{{ product.quantity
}}" values
​​are not updated to new ones after update works. If anything, contact me in the cart, I will help, how I will finish this question.

Answer 2

The thing is...
open
the cpmmon/cart controller
AND you will see SOMETHING

$data['text_items'] = sprintf($this->language->get('text_items'), $this->cart->countProducts() +

This is the number of Goods (i.e., commodity entities) and not the sum of goods
. you bought 12 French muffins
But in the cart - 1 French muffin in the amount of 12 pieces