Cart item quantity updates requires clicking Update Cart (PHP Cart)
The GraphQL cart automatically applied quantity updates using API requests.
The PHP Cart on the other hand chooses a more conservative UI experience out of the box, and requires visitors to click the
"Update Shopping Cart" button after making changes.
Changing this behavior requires customizing the template
Magento_Checkout/templates/php-cart/item/default.phtml
.
By adding the following event listener to the input field, the form will be submitted automatically two seconds after a visitor changes the quantity:
x-on:change.debounce.2000ms="$event.target.form && $event.target.form.dispatchEvent(new Event('submit', { cancelable: true }));"
Here is the full input field code for reference:
<input id="cart-<?= $escaper->escapeHtmlAttr($item->getId()) ?>-qty"
name="cart[<?= $escaper->escapeHtmlAttr($item->getId()) ?>][qty]"
value="<?= $escaper->escapeHtmlAttr($block->getQty()) ?>"
type="number"
size="4"
step="any"
title="<?= $escaper->escapeHtmlAttr(__('Qty')) ?>"
class="qty form-input px-2 py-2 w-20 text-center"
required="required"
min="0"
@change.debounce.2000ms="$event.target.form && $event.target.form.dispatchEvent(new Event('submit', { cancelable: true }));"
data-role="cart-item-qty"/>
Using a dispatchEvent
on the form makes sure that any JavaScript form submission events are being triggered.
In this case, it will trigger the hyva.postCart
event that reloads the cart data without a full page request.
The alternative will not dispatch the submit event, and thus will cause a full page reload and not an Ajax request to be used.