Sell The Trend
shopify-Update-the-cart-automatically

Solved: Shopify Update the cart automatically when quantity change

Shopify Update the cart automatically when quantity change
Shopify Update the cart automatically when quantity change

Shopify Update the cart automatically when quantity change – one of the famous problems that we get on our E-mail that when trying to make the Shopify ajax API works so when a customer adds products in cart or customer change quantity on the cart page, then when changed his mind and try to increase/decrease the number of product, he/she don’t need to click “UPDATE” button.

If you don’t do that, each time when someone wants to change the quantity, it’ll not update the cart automatically when quantity change they will have to click on the “Update cart” button,

which is actually unnecessary if you have automatic updates. “Edit cart” and “Update cart” buttons are just examples of bad UX of shopping carts where users have to make unnecessary actions. Instead of that, set automatic updates when users change the quantity of items (write certain number in quantity field or engage with increase/decrease buttons) and remove all these unnecessary and distracting “Edit cart” and “Update cart” buttons.

Solution: Shopify Update the cart automatically when quantity change

so we have these proven solution that you can try one of them to update the cart automatically and it’s success depend on you theme :

READ  Shopify Dropshipping Themes, 9 Examples | Boost Sales in 2020!

1- UPDATE CART.LIQUID METHOD

  1. From your Shopify admin to Online Store > Theme.
  2. Find the theme you want to edit and then click Action > Edit code.
  3. In the Templates section, click cart.liquid to open the file in the online code editor.
  4. Add the below code at the end of the file.
  5. Save
 <script>  $(document).ready(function(){    $("input[name='updates[]']").on('input', function() {      $( "input[name='update']" ).trigger( "click" );    });  });</script>

Attention: Load the jQuery library before this code.

2- CHANGING A USERS SHOPIFY SHOPPING CART WITH AJAX METHOD

Changing a user’s Shopify shopping cart with Ajax, the cart is being changed successfully but in order to display the updated cart, the user has to refresh the page. we want to display the cart changes WITHOUT a refresh.

we using the ajax api just fine, and we can add and remove items with:

Shopify.addItem();
Shopify.removeItem();

Those work great, but they require the user to reload the page to see the new/changed items in their cart. Do you know of a way to display the updated cart WITHOUT a page reload?

So everyone has the complete picture, here is our code:

function poll(products) {
$.ajax({
    url: "/apps/proxy",
    data: {products: products},
    type: "GET",
    dataType: "json",
    complete: setTimeout(function() 
      {cartAdd(); poll(products)}, 15000),
    success: function(data) {
      $.each(data, function(incoming_key, incoming_value){
        Shopify.getCart(function(cart){
          $.each(cart.items, function(cart_key, cart_value){
            if(cart_value.variant_id == incoming_value.id_to_remove){                 
              Shopify.addItem(incoming_value.variant_id, incoming_value.quantity);
              Shopify.removeItem(incoming_value.id_to_remove);
              console.log("some reason the incoming id is null or maybe not " + incoming_value.variant_id );
            }
            else if(cart_value.variant_id == incoming_value.variant_id && cart_value.quantity != incoming_value.quantity){
              Shopify.changeItem(cart_value.variant_id, incoming_value.quantity);
            }
          });
        });
      });
    },
});
}

3 – CODE TO UPDATE THE CART AUTOMATICALLY WHEN QUANTITY CHANGE METHOD

Code that we’ve placed in theme.js at the bottom;

theme.UpdateRefresh = (function() {

  var refresh = document.getElementsByClassName('.product-form .product-form-product-template');
  var test = ('[data-product-form]');

  $('btn product-form__cart-submit').click(function() {
    location.reload();
});

  function update()
  {
    url: '/cart/add'
    dataType: 'json'
  }
  return { update:update}
})   ();

product-template.liquid

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>   
            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                    {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                    {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}">
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                </button>
              </div> 

then placed the theme.UpdateRefresh.update() in the AddToCart section so it gets executed but it doesn’t work because we don’t know what’s wrong anymore, keep in mind that we’re learning and trying to figure out things a lot in order to process it and gain some knowledge in the subject,

READ  How to Dropship Cliu Mask, Make Money From Selling Cliu Mask

4- TRY TRIGGERING THE BUTTON CLICK WITH JQUERY METHOD

You can try triggering the button click with jquery when the input field is updated. The code below is assuming that the input has the class of “qty-input” and your button has the id of “cart_update”. You may need to change those depending on what your classes/ids are for those elements.

$('.qty-input').on('input', function() {
	$( "#cart_update" ).trigger( "click" );
});

5- CHANGE FUNCTION OF QUANTITY FIELDS SEEMS TO BE A SIMPLE METHOD

Step 1: You access Shopify admin, click Online Store and go to Themes.

Step 2: Find the themes that you want to edit, then press Actions then Edit Code.

Step 3: Look at Sections, you click on cart-template.liquid. In case that you are not using the theme that does not have the address, you can access Template directory and click cart.liquid.

Step 4: Find the phrase written as update[item.id] in input tag.

Step 5: Change the name into the value of name= “updates[]”.

Step 6: Reiterate these aforementioned steps whenever you see an name value of updates[] in input tag.

Step 7: Click Save and you update item quantity fields successfully..

Conclusion

In conclusion, the customer journey is significant because it will create higher buyers’ awareness of your brand and increase sales so Shopify updates the cart automatically when quantity change is very important and you must do it to make more simple buyers journey. We hope that the article would be helpful to you to assist in attracting more purchasers and generating more profits.

READ  How to Set Up a Shopify Dropshipping Store| Step by Step
Sell The Trend

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top