Skip to content

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.

x-on:change.debounce.2000ms="$event.target.form.submit()"