Liquid, JavaScript, themes, sales channels
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 }}&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 }}&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!
Solved! Go to the solution
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!
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
try this Ajaxify Cart. Which theme are you using?
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?
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!
@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 }}&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 }}&quantity={{ item.quantity | plus: 1 }}"></a>
<a class="number-input-nav-item icon icon-minus cart-item-decrease" href="/cart/change?line={{ forloop.index }}&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 }}&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 %}
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
@liuyanyan please paste your code...I think you have added commented code
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?
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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024