Make cart automatically update on Quantity input change

Highlighted
New Member
3 0 0

Hello I would love to have my cart page update when someone changes the qty of their product.

Here is my code below

<div class="grid__item three-third text-center">

                      <label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
                      <input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
						<p class="cart__product-meta remove">
                        <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                          {{ 'cart.general.remove' | t }}
                        </a>
                        {% unless item.title contains "Product Replacement" or item.title contains "Product Repair" %}                    
                    {% unless contains_warranty == true %}
                        <div class='winone cps_cart_{{ item.id }}'></div>
                    {% endunless %}
                      {% endunless %}
                      </p>
</div>
0 Likes
Highlighted

Hi there. I have some recommends for you to make cart update when you change the quantity here.
A simple way is that you can add this code into your cart.liquid file to make it auto: 

<script> $(document).ready(function(){

$("input[name='updates[]']").on('input', function() {

$( "input[name='update']" ).trigger( "click" );

}); });

</script>

Or you can add onblur="this.form.submit()"  to you input box like this: 
<input type="number" name="updates[]" onblur="this.form.submit()" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}"> <p class="cart__product-meta remove">

 

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes
Highlighted
New Member
3 0 0

Thanks Richard, 

I tried both different solutions but literally nothing happens with you update the quantity.

0 Likes
Highlighted
New Member
1 0 0

I have been able to get my cart page to update a 'free delivery message' (ie free.shipping.value - cart.total = left.to.spend) after the customer updates any item quantity using onblur="this.form.submit()" on the quantity controls, however it works on the desktop but not on the mobile

 

Anybody? anybody? anybody? Ferris?

 

 

0 Likes