Auto-Update Subtotal When Quantity Changes

Technical Q&A
1

Hey there. I’d like the cart to auto-update the subtotal price each time a customer increases or decreases the quantity and remove the Update Cart button. I know there is an app for this, but I do not want to use a paid app.

I am using Launch theme by Pixel Union, and you can view the cart page of my website by clicking here.

Here is the code of my template-cart.liquid:


  

    

      # {{ 'cart.general.header' | t }}
    

    
      

        {% if cart.item_count > 0 %}

          

          {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
            {% include 'shipping-calculator' %}
          {% endif %}
        {% else %}
          

{{ 'cart.general.empty' | t }} {{ 'cart.general.continue' | t }}

        {% endif %}
      

    

  

{% schema %}
{
  "name": "Cart page",
  "settings": [
    {
      "type": "checkbox",
      "id": "order_notes",
      "label": "Enable order notes",
      "default": false
    },
    {
      "type": "header",
      "content": "Shipping calculator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_calculator",
      "label": "Enable",
      "default": false
    },
    {
      "type": "text",
      "id": "shipping_calculator_default_country",
      "label": "Default country",
      "default": "United States"
    }
  ]
}
{% endschema %}

Thank you!

2

@TechSolver ,

You can implement Ajax support using Shopify ajax API, here is detail for you https://shopify.dev/docs/themes/ajax-api/reference/cart

Alternatively you can look for free apps on app store and if both doesn’t solve the purpose, please feel free to DM for a custom solution

3

@Propero I am not sure how to. I could not find any free apps.

Can you please help me?

4

try this Ajaxify Cart. Which theme are you using?

5

I am using Launch theme by Pixel Union.

@Propero I already stated what theme I’m using in my first post. I don’t know what code to use, can you please tell me?

6

Here is the code if you wanna try your hands on https://github.com/carolineschnapp/ajaxify-cart

All the best!

1 Like
7

@Propero fixed it. Here’s the modified code for anyone interested:


  

    

      # {{ 'cart.general.header' | t }}
    

    
      

        {% if cart.item_count > 0 %}

          

          {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
            {% include 'shipping-calculator' %}
          {% endif %}
        {% else %}
          

{{ 'cart.general.empty' | t }} {{ 'cart.general.continue' | t }}

        {% endif %}
      

    

  

{% schema %}
{
  "name": "Cart page",
  "settings": [
    {
      "type": "checkbox",
      "id": "order_notes",
      "label": "Enable order notes",
      "default": false
    },
    {
      "type": "header",
      "content": "Shipping calculator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_calculator",
      "label": "Enable",
      "default": false
    },
    {
      "type": "text",
      "id": "shipping_calculator_default_country",
      "label": "Default country",
      "default": "United States"
    }
  ]
}
{% endschema %}

{% comment %}

{% endcomment %}
8

Thanks @Propero

Insert the following code at the bottom of template-cart.liquid:

{% comment %}

{% endcomment %}
9

hello i have tried your code but not work my cart still can not automatically update price when you changed the quantity

could you help me?

many thanks

10

@liuyanyan please paste your code…I think you have added commented code

11

Hi,

I am on the flow theme and I have no idea what to change the code to so my cart auto updates could you help me?