Shopping Cart Total cost auto update when Qty. increase or decrease

New Member
1 0 0

Hello,

I am using the Startup Theme for my store and I would like to have in my shopping cart a auto update of total cost.

For example,

John selects a product to buy and its automatically put in his cart. He goes to check out and realizes that he wants more that one product. He clicks the + button to update his quantity to 3 items. THIS IS WHERE I NEED HELP. I would like to insert a code if possible that each time he clicks the + or - sign the TOTAL COST automatically updates with out him having to push the update button.

Can someone help me, pretty please. I've posted my Cart.liquid code below. Thank you soooooo much

 

<h1 class="page-title">{{ 'cart.general.header' | t }}</h1>
<!--Danielle added line 2-3-->
<p><center> If you make cart changes, remember to click the Update button.</center></p>

{% if cart.item_count > 0 %}

  <form action="/cart" method="post">

    <table class="cart-items clean">
      <thead>
        <tr>
          <th class="first" colspan="2">{{ '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 first">
              <a class="cart-image" href="{{ item.url }}"><img src="{{ item | img_url: 'small' }}" alt="{{ item.product.title }}"></a>
              <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 %}

                {% if item.properties %}
                  <div class="cart-item-properties">
                    {% for property in item.properties %}
                      {% unless property.last == blank %}
                        <div class="cart-item-property">
                          <span class="cart-item-property-label">{{ property.first }}:</span>
                          {% if property.last contains '/uploads/' %}
                            <a class="cart-item-property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                          {% else %}
                            <span class="cart-item-property-value">{{ property.last }}</span>
                          {% endif %}
                        </div>
                      {% endunless %}
                    {% endfor %}
                  </div>
                {% endif %}

                <a class="cart-item-remove" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">{{ 'general.general.remove' | t }}</a>
              </div>
            </td>
            <td class="cart-item-price"><span class="money">{{ item.price | money }}</span></td>
            <td class="cart-item-quantity" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}data-max="{{ item.variant.inventory_quantity }}"{% endunless %}>
              <input type="text" name="updates[]" class="cart-item-quantity-display" value="{{ item.quantity }}" size="1">
              <span class="cart-item-decrease icon">&#57364;</span>
              <span class="cart-item-increase icon">&#57365;</span>
            </td>
            <td class="cart-item-total last"><span class="money">{{ item.quantity | times: item.price | money }}</span></td>
          </tr>
        {% endfor %}
      </tbody>

    </table>

    <div class="cart-tools">

      {% if settings.cart-show-special-instructions %}
      <div class="cart-instructions">
        <p>{{ 'cart.general.instructions_title' | t }}</p>
        <textarea rows="6" name="note" placeholder="{{ 'cart.general.instructions_placeholder' | t }}">{{ cart.note }}</textarea>
      </div>
      {% endif %}

      <div class="cart-totals">
        <p class="cart-price"><span class="money">{{ cart.total_price | money }}</span></p>
        <p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
        
        <input type="submit" name="update" value="{{ 'cart.general.update_button' | t }}" class="secondary"> 
        <input type="submit" name="checkout" value="{{ 'cart.general.submit' | t }}">

        {% if additional_checkout_buttons %}
          <div class="cart-additional-checkout-buttons">
            {{ content_for_additional_checkout_buttons }}
          </div>
        {% endif %}

        {% if settings.show-currency-switcher %}
          <p class="cart-currency-note meta">{{ 'cart.general.currency_note_html' | t: currency: shop.currency }}</p>
        {% endif %}
      </div>

    </div>

  </form>

  <div class="cart-modal-wrapper">
    <div class="cart-modal">
      <h3 class="section-title"></h3>

      <div class="cart-modal-message"></div>

      <div class="cart-modal-action"></div>
    </div>
  </div>

  {% if settings.show-shipping-calculator %}
  <div class="cart-shipping-calculator-wrapper">
    <div id="shipping-calculator" class="cart-shipping-calculator">

      <p>{{ 'cart.shipping_calculator.header' | t }}</p>

      <div class="shipping-country-wrapper hide-labels">
        <div class="country-select select-wrapper">
          <div class="selected-text" data-default="Select country">{{ 'cart.shipping_calculator.country' | t }}</div>
          <select class="styled-select address-country" id="address_country" name="address[country]" data-default="{% if shop.customer_accounts_enabled and customer %}{{ customer.default_address.country }}{% elsif settings.shipping_calculator_default_country != '' %}{{ settings.shipping_calculator_default_country }}{% endif %}">{{ country_option_tags }}</select>
        </div>
      </div>

      <div id="address_province_container" class="shipping-province-wrapper">
        <div class="province-select select-wrapper">
          <div class="selected-text" data-default="Select province">{{ 'cart.shipping_calculator.province' | t }}</div>
          <select class="styled-select address-province" id="address_province" class="address_form" name="address[province]" data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}"></select>
        </div>
      </div>

      <div class="cart-shipping-zip-code input-wrapper">
        <input type="text" size="12" class="address-zip" id="address_zip" placeholder="{{ 'customer.addresses.zip' | t }}" name="address[zip]" {% if shop.customer_accounts_enabled and customer %}value="{{ customer.default_address.zip }}"{% endif %} />

        <input type="button" class="cart-shipping-calculate get-rates" value="{{ 'cart.shipping_calculator.submit' | t }}" />
      </div>
    </div>

    <div class="cart-shipping-calculator-response">
    </div>
  </div>
  {% endif %}

{% else %}

  <p class="empty">{{ 'cart.general.empty' | t }} <a href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>

{% endif %}

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
84 0 11

Hello Richard,

I'll move this to Shopify Design, I think you'll get more help there

0 Likes