Solved

Auto-Update Subtotal When Quantity Changes

TechSolver
Pathfinder
134 3 17

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:

 

<div class="module-wrapper">
  <div class="module cart">
    <div class="module-header cart-header">
      <h1 class="module-title">{{ 'cart.general.header' | t }}</h1>
    </div>
    <div class="module-body">
      <div class="module-content">
        {% if cart.item_count > 0 %}
<div id="bold-cart-msg"></div>
          <form action="/cart" method="post">
            <div class="cart-items-container">
              <table class="cart-items clean">
                <thead class="cart-items-thead">
                  <tr>
                    <th class="first">{{ 'general.general.product' | t}}</th>
                    <th>{{ 'general.general.price' | t }}</th>
                    <th>{{ 'general.general.quantity' | t }}</th>
                    <th class="last">{{ 'general.general.total' | t }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in cart.items %}
                    <tr
                      class="cart-item variant-{{ item.variant.id }} {% include 'for-looper' %}"
                      data-variant="{{ item.variant.id }}"
                      data-title="{{ item.product.title }}"
                      data-url="{{ item.url }}">
                      <td class="cart-item-product cart-item-td">
                        <div class="cart-item-image-container">
                          <a class="cart-image" href="{{ item.url }}">
                            <img src="{{ item | img_url: 'small' }}" alt="{{ item.product.title }}">
                          </a>
                          <a class="cart-item-remove mobile-only" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                        <div class="cart-item-product-wrap">
                          <span class="cart-title"><a href="{{ item.url }}">{{ item.product.title }}</a></span>
                          <span class="cart-vendor vendor">{{ item.vendor }}</span>
                          {% unless item.variant.title == 'Default Title' %}
                            <span class="cart-variant">{{ item.variant.title }}</span>
                          {% endunless %}

                        </div>
                      </td><br>                      
                      <td class="cart-item-price cart-item-td">
                        <div class="cart-item-unit-price">
                          <span class="mobile-only">{{ 'general.general.price' | t }}:</span>
                          <span class="money"><div class="un-line-item-unit-price" data-id="{{ item.key }}"><div class="qb-price-item" data-id="{{ item.key }}"><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>{{ item.price | money }}</div></div></span>
                        </div>
                      </td>
                      {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}
                        {% assign inventory = true %}
                      {% endunless %}
                      <td class="cart-item-quantity cart-item-td" {% if inventory == true %}data-max="{{ item.variant.inventory_quantity }}"{% endif %}>
                        <div class="number-input-wrapper cart-item-quantity-wrapper clearfix">
                          <div class="number-input-field">
                            <input type="number" id="cart-item-{{ item.id }}" name="updates[]" class="cart-item-quantity-display" value="{{ item.quantity }}" size="1"  aria-label="{{ "general.general.quantity" | t }}" />
                            <label class="number-input-label" for="cart-item-{{ item.id }}">{{ 'general.general.quantity' | t }}</label>
                          </div>
                          <div class="number-input-nav">
                            <div class="number-input-nav-item icon icon-plus cart-item-increase"></div>
                            <div class="number-input-nav-item icon icon-minus cart-item-decrease"></div>
                          </div>
                        </div>
                      </td>
                      <td class="cart-item-total cart-item-td">
                        <div class="cart-item-total-container">
                          <span class="mobile-only">{{ 'general.general.total' | t }}:</span>
                          <span class="money">{{ item.quantity | times: item.price | money }}</span>
                          <a class="cart-item-remove" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="cart-tools">
              <div class="cart-totals">
                <div class="cart-price-info">
                  <p class="sub-total">{{ 'general.general.subtotal' | t}}</p>
                  <p class="cart-price"><span class="money"><span id="bk-cart-subtotal-price"><span id='revy-cart-subtotal-price'><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>{{ cart.total_price | money }}</span></span></span></p>
                  <p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
                  {% if settings.show-currency-switcher %}
                    <p class="cart-currency-note meta">{{ 'cart.general.currency_note_html' | t: currency: shop.currency }}</p>
                  {% endif %}
                </div>
                <div class="cart-cta">
                  <input type="submit" name="update" value="{{ 'cart.general.update_button' | t }}" class="button outline cart-button cart-update-button">
                  <input type="submit" name="checkout" value="{{ 'cart.general.submit' | t }}" class="button secondary inverse cart-button">
                  
                  <br><br>
<style>
  .methods-of-payment img { padding: 0.2em; }
  .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
  <img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="Visa" title="Visa" />
  <img src="{{ 'master' | payment_type_img_url }}" height="35" alt="Mastercard" title="Mastercard" />
  <img src="{{ 'american_express' | payment_type_img_url }}" height="35" alt="American Express" title="American Express" />
  <img src="{{ 'discover' | payment_type_img_url }}" height="35" alt="Discover" title="Discover" />
  <img src="{{ 'jcb' | payment_type_img_url }}" height="35" alt="JCB" title="JCB" />
  <img src="{{ 'diners_club' | payment_type_img_url }}" height="35" alt="Diners Club" title="Diners Club" />
  <img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="Apple Pay" title="Apple Pay" />
  <img src="{{ 'google_pay' | payment_type_img_url }}" height="35" alt="Google Pay" title="Google Pay" />
  <img src="{{ 'shopify_pay' | payment_type_img_url }}" height="35" alt="Shop Pay" title="Shop Pay" />
</span>

                    </div>
              </div>
              {% if section.settings.order_notes %}
                <div class="cart-instructions">
                  <p><label for="cart-notes">{{ 'cart.general.instructions_title' | t }}</label></p>
                  <textarea rows="6" name="note" id="cart-notes" placeholder="{{ 'cart.general.instructions_placeholder' | t }}">{{ cart.note }}</textarea>
                </div>
              {% endif %}
            </div>
          </form>

          {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
            {% include 'shipping-calculator' %}
          {% endif %}
        {% else %}
          <p class="empty">{{ 'cart.general.empty' | t }} <a href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script type="application/json" data-cart-strings>
  {
    "notAvailableText": {{ 'cart.general.not_available'| t | json }},
    "stockLevelText": {{ 'cart.general.stock_level' | t: stock_count: '** stock_count **' | json }},
    "okayText": {{ 'cart.general.okay' | t | json }}
  }
</script>
{% 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 %}


<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]*">

 

 

Thank you! 

Accepted Solution (1)
Propero
Shopify Partner
895 101 160

This is an accepted solution.

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

All the best!

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze

View solution in original post

Replies 10 (10)

Propero
Shopify Partner
895 101 160

@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

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
TechSolver
Pathfinder
134 3 17

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

 

Can you please help me?

Propero
Shopify Partner
895 101 160

try this Ajaxify Cart. Which theme are you using?

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
TechSolver
Pathfinder
134 3 17

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?

Propero
Shopify Partner
895 101 160

This is an accepted solution.

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

All the best!

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
TechSolver
Pathfinder
134 3 17

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

<div class="module-wrapper">
  <div class="module cart">
    <div class="module-header cart-header">
      <h1 class="module-title">{{ 'cart.general.header' | t }}</h1>
    </div>
    <div class="module-body">
      <div class="module-content">
        {% if cart.item_count > 0 %}
<div id="bold-cart-msg"></div>
          <form action="/cart" method="post">
            <div class="cart-items-container">
              <table class="cart-items clean">
                <thead class="cart-items-thead">
                  <tr>
                    <th class="first">{{ 'general.general.product' | t}}</th>
                    <th>{{ 'general.general.price' | t }}</th>
                    <th>{{ 'general.general.quantity' | t }}</th>
                    <th class="last">{{ 'general.general.total' | t }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in cart.items %}
                    <tr
                      class="cart-item variant-{{ item.variant.id }} {% include 'for-looper' %}"
                      data-variant="{{ item.variant.id }}"
                      data-title="{{ item.product.title }}"
                      data-url="{{ item.url }}">
                      <td class="cart-item-product cart-item-td">
                        <div class="cart-item-image-container">
                          <a class="cart-image" href="{{ item.url }}">
                            <img src="{{ item | img_url: 'small' }}" alt="{{ item.product.title }}">
                          </a>
                          <a class="cart-item-remove mobile-only" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                        <div class="cart-item-product-wrap">
                          <span class="cart-title"><a href="{{ item.url }}">{{ item.product.title }}</a></span>
                          <span class="cart-vendor vendor">{{ item.vendor }}</span>
                          {% unless item.variant.title == 'Default Title' %}
                            <span class="cart-variant">{{ item.variant.title }}</span>
                          {% endunless %}

                        </div>
                      </td><br>                      
                      <td class="cart-item-price cart-item-td">
                        <div class="cart-item-unit-price">
                          <span class="mobile-only">{{ 'general.general.price' | t }}:</span>
                          <span class="money"><div class="un-line-item-unit-price" data-id="{{ item.key }}"><div class="qb-price-item" data-id="{{ item.key }}">{{ item.price | money }}</div></div></span>
                        </div>
                      </td>
                      {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}
                        {% assign inventory = true %}
                      {% endunless %}
                      <td class="cart-item-quantity cart-item-td" {% if inventory == true %}data-max="{{ item.variant.inventory_quantity }}"{% endif %}>
                        <div class="number-input-wrapper cart-item-quantity-wrapper clearfix">
                          <div class="number-input-field">
                            <input type="number" onchange="this.form.submit();" id="cart-item-{{ item.id }}" name="updates[]" class="cart-item-quantity-display" value="{{ item.quantity }}" size="1"  aria-label="{{ "general.general.quantity" | t }}" />
                            <label class="number-input-label" for="cart-item-{{ item.id }}">{{ 'general.general.quantity' | t }}</label>
                          </div>
                          <div class="number-input-nav">
                            <a class="number-input-nav-item icon icon-plus cart-item-increase" href="/cart/change?line={{ forloop.index }}&amp;quantity={{ item.quantity | plus: 1 }}"></a>
                            <a class="number-input-nav-item icon icon-minus cart-item-decrease" href="/cart/change?line={{ forloop.index }}&amp;quantity={{ item.quantity | minus: 1 }}"></a>
                      
                        </div>
                      </td>
                      <td class="cart-item-total cart-item-td">
                        <div class="cart-item-total-container">
                          <span class="mobile-only">{{ 'general.general.total' | t }}:</span>
                          <span class="money">{{ item.quantity | times: item.price | money }}</span>
                          <a class="cart-item-remove" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="cart-tools">
              <div class="cart-totals">
                <div class="cart-price-info">
                  <p class="sub-total">{{ 'general.general.subtotal' | t}}</p>
                  <p class="cart-price"><span class="money"><span id="bk-cart-subtotal-price"></span>{{ cart.total_price | money }}</span></span></span></p>
                  <p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
                  {% if settings.show-currency-switcher %}
                    <p class="cart-currency-note meta">{{ 'cart.general.currency_note_html' | t: currency: shop.currency }}</p>
                  {% endif %}
                </div>
                <div class="cart-cta">
                  <input type="submit" name="checkout" value="{{ 'cart.general.submit' | t }}" class="button secondary inverse cart-button">
                  
                  <br><br>
<style>
  .methods-of-payment img { padding: 0.2em; }
  .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
  <img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="Visa" title="Visa" />
  <img src="{{ 'master' | payment_type_img_url }}" height="35" alt="Mastercard" title="Mastercard" />
  <img src="{{ 'american_express' | payment_type_img_url }}" height="35" alt="American Express" title="American Express" />
  <img src="{{ 'discover' | payment_type_img_url }}" height="35" alt="Discover" title="Discover" />
  <img src="{{ 'jcb' | payment_type_img_url }}" height="35" alt="JCB" title="JCB" />
  <img src="{{ 'diners_club' | payment_type_img_url }}" height="35" alt="Diners Club" title="Diners Club" />
  <img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="Apple Pay" title="Apple Pay" />
  <img src="{{ 'google_pay' | payment_type_img_url }}" height="35" alt="Google Pay" title="Google Pay" />
  <img src="{{ 'shopify_pay' | payment_type_img_url }}" height="35" alt="Shop Pay" title="Shop Pay" />
</span>

                    </div>
              </div>
              {% if section.settings.order_notes %}
                <div class="cart-instructions">
                  <p><label for="cart-notes">{{ 'cart.general.instructions_title' | t }}</label></p>
                  <textarea rows="6" name="note" id="cart-notes" placeholder="{{ 'cart.general.instructions_placeholder' | t }}">{{ cart.note }}</textarea>
                </div>
              {% endif %}
            </div>
          </form>

          {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
            {% include 'shipping-calculator' %}
          {% endif %}
        {% else %}
          <p class="empty">{{ 'cart.general.empty' | t }} <a href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script type="application/json" data-cart-strings>
  {
    "notAvailableText": {{ 'cart.general.not_available'| t | json }},
    "stockLevelText": {{ 'cart.general.stock_level' | t: stock_count: '** stock_count **' | json }},
    "okayText": {{ 'cart.general.okay' | t | json }}
  }
</script>
{% 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 %}
<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]*">
{% endcomment %}

 

 

 

liuyanyan
Tourist
16 0 1

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

Propero
Shopify Partner
895 101 160

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

 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
salonpro
Visitor
3 0 0

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?

TechSolver
Pathfinder
134 3 17

Thanks @Propero

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

{% comment %}
<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]*">
{% endcomment %}