Cart page update automatically when item quantity change

Nandan_Barman
Shopify Partner
10 0 1

Can anyone help me ...?
I want to create my cart page such that the page automatically update when we change the quantity of item. I do not want to use update cart button..
my shopify store https://bangoshoping.myshopify.com/cart

 

0 Likes
David_Tomkinson
New Member
3 0 0

I also want the same automation. Can anyone help?

 

0 Likes
Siobhan2
Shopify Partner
1 0 0

Hey guys I cant find an answer to this either but I did come across this information if its any help to you? :)

https://help.shopify.com/themes/development/getting-started/using-ajax-api

0 Likes
scoffaro
Shopify Partner
1 0 7

For anyone still looking for the answer to this:

1. go to your cart-template.liquid code

2. find the quantity input box. should look something like below:

<input class="cart__qty-input" type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*">

3. add onblur="this.form.submit();"

<input onblur="this.form.submit();" class="cart__qty-input" type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*">

4. save

This should simulate an enter click when the user leaves the quantity box.

Akt
Shopify Partner
6 0 0

Not Working...

0 Likes
Jason
Shopify Expert
10037 119 1872

Not Working...

If you're looking for help, this is not a helpful comment.

  • What's not working?
  • What have you tried?
  • What errors do you see in the debug console?
  • Do you have an example url with the code in place?
  • What theme are you using?
  • etc?
★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Cameron6
Tourist
8 0 2

I was able to get the text field to work adding onblur, but the quantity buttons don't work. Here is what my code looks like...

 

<div class="td cart-item-quantity">
                      <span>
                        <div class="quantity-select" data-inventory-policy="{{ item.variant.inventory_policy }}" data-inventory-quanity="{{ item.variant.inventory_quantity }}">
                          <div class="button-wrapper">
                           <button class="adjust adjust-minus">-</button>
                          </div>
                          <div class="input-wrapper">
                            <input  onblur="this.form.submit();" type="text" class="quantity" min="1" pattern="[0-9]*" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" >
                          </div>
                          <div class="button-wrapper">
                            <button class="adjust adjust-plus">+</button>
                          </div>
                        </div>
                      </span>
                      <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="remove">{{ 'cart.general.remove' | t }}</a>
                    </div>

 

0 Likes
Mandelbrotian
Shopify Partner
132 1 19

Hi Cameron,

The 'onblur' will only trigger when a user clicks in and then out of the quantity text box, hence why it's not working for your quantity buttons. You can trigger the form submit from the same script that's updating your quantity when you click the buttons, but you'll need to find that script first.

If you post a link to your site I'll be able to tell you exactly what file needs to be updated and where.

Cheers,

Elliott

Feeling a bit lost? Contact elliot@mandelbrotian.com for help with theme setup, alterations, custom functionality, and app development.
Cameron6
Tourist
8 0 2

That'd be awesome. Thanks. 

0 Likes
Mandelbrotian
Shopify Partner
132 1 19

Hi Cameron,

First up, just make sure you make a backup of your theme file before making any changes. Also note that the lines I've given might not be exact because of liqud being processed on the Shopify side of things.

In your theme there should be a file in the assets folder called 'district.js' if you change the code between lines 3092 and 3121 from

  // Still used by cart page
  StyleHatch.quantitySelect = function(){
    // Quantity Selector
    var $quantitySelect = $('.quantity-select');
    $quantitySelect.each(function(){
      var $el = $(this);
      var $quantityDown = $el.find('.adjust-minus');
      var $quantityUp = $el.find('.adjust-plus');
      var $quantity = $el.find('input.quantity');

      var quantity = $quantity.val();

      $quantityDown.on('click', function(e){
        quantity = $quantity.val();
        if(quantity > 1){
          quantity--;
          $quantity.val(quantity);
        }
        e.preventDefault();
      });

      $quantityUp.on('click', function(e){
        quantity = $quantity.val();
        quantity++;
        $quantity.val(quantity);

        e.preventDefault();
      });
    });
  }

to

  // Still used by cart page
  StyleHatch.quantitySelect = function(){
    // Quantity Selector
    var $quantitySelect = $('.quantity-select');
    $quantitySelect.each(function(){
      var $el = $(this);
      var $quantityDown = $el.find('.adjust-minus');
      var $quantityUp = $el.find('.adjust-plus');
      var $quantity = $el.find('input.quantity');

      var quantity = $quantity.val();

      $quantityDown.on('click', function(e){
        quantity = $quantity.val();
        if(quantity > 1){
          quantity--;
          $quantity.val(quantity);
        }
        e.preventDefault();
        $(this).closest('form').submit();
      });

      $quantityUp.on('click', function(e){
        quantity = $quantity.val();
        quantity++;
        $quantity.val(quantity);

        e.preventDefault();
        $(this).closest('form').submit();
      });
    });
  }

that should do the trick.

Let me know how that goes. If you have any other issues you can get me directly at elliot@mandelbrotian.com

Cheers,

Elliott

Feeling a bit lost? Contact elliot@mandelbrotian.com for help with theme setup, alterations, custom functionality, and app development.
0 Likes