Auto-Update Subtotal When Quantity Changes

Solved
TechSolver
Pathfinder
90 3 14

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! 

0 Likes
Propero
Shopify Partner
801 92 136

@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
0 Likes
TechSolver
Pathfinder
90 3 14

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

 

Can you please help me?

0 Likes
Propero
Shopify Partner
801 92 136

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
0 Likes
TechSolver
Pathfinder
90 3 14

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?

0 Likes
Propero
Shopify Partner
801 92 136

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
90 3 14

@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 %}

 

 

 

0 Likes
TechSolver
Pathfinder
90 3 14

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 %}

 

 

0 Likes
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

0 Likes
Propero
Shopify Partner
801 92 136

@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
0 Likes