Shopify themes, liquid, logos, and UX
When viewing cart, if the product amounts get modified manually, the user gets stuck.
It is asked, "Cart needs to be updated" but it's not a button for it.
Can you please advice how to sort this?
If your cart is an ajax cart it should do this dynamically, otherwise you would have an update button. It would be good to share the URL of store so someone can check.
Hi,
I'm not sure about the ajax cart, how can I know about this?
There is not an update cart button.
Here link to site; https://plaato.io/cart
Did someone make any change in the code recently? the option to update is removed and cart is not supporting ajax. If this was working earlier, then you may revert to the last working version or take a fresh copy of the theme.
Another option is to hire an expert to troubleshoot this issue.
I have reset the theme, and in there this function works. It gets update automatically.
So on the file cart-template.liquid
this is the code now:
<div class="container main content main-wrapper">
<div class="sixteen columns clearfix collection_nav">
<h1 class="center">{{ 'cart.general.title' | t }}</h1>
<div class="feature_divider"></div>
</div>
{% if cart.item_count == 0 %}
<div class="sixteen columns">
<div class="section clearfix">
<p class="quote">{{ 'cart.general.continue_browsing_html' | t }}</p>
</div>
</div>
{% else %}
<form action="/cart" method="post" id="cart_form">
<div class="section clearfix">
<div class="ten columns cart_items">
<h4 class="title">{{ 'cart.general.products' | t }}</h4>
{% for item in cart.items %}
<div class="five columns alpha">
<a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">
<img src="{{ item | img_url: '300x' }}"
alt="{{ item.title | escape }}"
class="lazyload lazyload--fade-in"
style="max-width: {{- item.image.width -}}px"
data-sizes="auto"
data-src="{{ item | img_url: '900x' }}"
data-srcset=" {{ item | img_url: '2048x' }} 2048w,
{{ item | img_url: '1600x' }} 1600w,
{{ item | img_url: '1200x' }} 1200w,
{{ item | img_url: '1000x' }} 1000w,
{{ item | img_url: '800x' }} 800w,
{{ item | img_url: '600x' }} 600w,
{{ item | img_url: '400x' }} 400w"
/>
</a>
</div>
<div class="five columns omega">
<p>
<a href="{{ item.url }}">
{{ item.product.title }}
<span class='booster-cart-item-success-notes' data-key='{{item.key}}'></span><span class='booster-cart-item-upsell-notes' data-key='{{item.key}}'></span>
</a>
</p>
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
<p class="meta">
{% for option in item.product.options %}
{% unless option contains "Title" %}
<span class="label">{{ option }}:</span> <span>{{ item.variant.options[forloop.index0] }}</span><br />
{% endunless %}
{% endfor %}
</p>
{% endunless %}
{% if item.properties %}
<p>
{% for p in item.properties %}
{% unless p.last == blank %}
{% if p.last contains '/uploads/' %}
{{ p.first }}: <a class="lightbox" href="{{ p.last }}">{{ 'cart.general.uploaded_file' | t }}</a><br />
{% else %}
{{ p.first }}: {{ p.last }}<br />
{% endif %}
{% endunless %}
{% endfor %}
</p>
{% endif %}
<p class="price_total">
<strong>{{ 'cart.general.price_per_item' | t }}:</strong>
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money">
{{ item.final_price | money }}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %}was_price{% endif %}">
{{ item.original_price | money }}
</span>
</p>
<p id="quantity_{{ forloop.index }}">
<label for="updates_{{ item.id }}" class="quantity_label">{{ 'cart.general.quantity' | t }}:</label>
<input type="number" min="0" size="3" maxlength="3" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == "deny" %}max="{{ item.variant.inventory_quantity }}"{% endif %} />
</p>
{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}
<p class ="applied_discount">
<strong>{{ 'cart.general.discount' | t }}:</strong> {{ discount_allocation.discount_application.title }} (- <span class="money">{{ discount_allocation.amount | money }}</span>)
</p>
{% endfor %}
{% endif %}
<p class="price_total">
<strong>{{ 'cart.general.total' | t }}:</strong>
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money">
{{ item.final_line_price | money }}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %} hidden {% endif %}">
<span class='booster-cart-item-line-price' data-key='{{item.key}}'>{{ item.original_line_price | money }}</span>
</span>
</p>
<p class="remove_item">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" title="{{ 'cart.general.remove' | t }}">{{ 'cart.general.remove' | t }}</a>
</p>
</div>
<br class="clear" />
<br class="clear" />
{% endfor %}
</div>
<div class="five columns offset-by-one">
{% if cart.cart_level_discount_applications != blank %}
<h4 class="discount">
{{ 'cart.general.discount' | t }}
</h4>
{% for discount_application in cart.cart_level_discount_applications %}
<p>
{{ discount_application.title }} (- <span class="money">{{ discount_application.total_allocated_amount | money }}</span>)
</p>
{% endfor %}
{% endif %}
<h4 class="subtotal">
{{ 'cart.general.subtotal' | t }}
</h4>
{% comment %} <script>
$.get("http://freegeoip.app/json/", function (response) {
if (response.country_code != 'CA' || response.country_code != 'US' || response.country_code != 'AU') {
document.getElementById("tax-and-vat").style.display = "inline";
}
}, "jsonp");
</script> {% endcomment %}
<p class="subtotal_amount">
<strong>
<span class="money"><span class="wh-original-cart-total"><span class='wh-original-price'>{{ cart.total_price | money_with_currency }}</span></span><span class="wh-cart-total"></span><div class="additional-notes"><span class="wh-minimums-note"></span><span class="wh-extra-note"></span></div></span>
</strong>
{% comment %}
<small id="estimated-shipping" style="display:none">+ <em><span class="money">{{ 0 | money }}</span> {{ 'cart.shipping_calculator.estimated_shipping' | t }}</em></small>
{% endcomment %}
{% comment %} <small id="tax-and-vat" style="display:none;" class="excluding_tax"><em>Tax and VAT not included</em></small> {% endcomment %}
</p>
{% if settings.show_multiple_currencies %}
<p>
<small>
{{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
</small>
</p>
{% endif %}
{% if section.settings.display_special_instructions %}
<label for="cart-note">{{ 'cart.general.note' | t: shop_name: shop.name }}:</label>
<textarea id="cart-note" name="note" rows="2">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<div class="tos_checkbox">
<input type="checkbox" class="tos_agree" id="cart_agree" required />
<label class="tos_label" for="cart_agree">
{{ settings.tos_richtext }}
</label>
</div>
{% endif %}
<p class="add-to-cart-wrap">
<input type="submit" class="action_button add_to_cart" id="checkout" name="checkout" value="{{ 'cart.general.checkout' | t }}" />
</p>
<img style="padding-top: 35px;" src="https://cdn.shopify.com/s/files/1/0045/5917/5752/files/secure_guarantee.png?11254"></img>
{% if content_for_additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
{% if cart.item_count > 0 and section.settings.display_continue_shopping %}
<p class="continue_shopping">
<a href="{% if cart.items.first.product.collections != blank %}{{ cart.items.first.product.collections.last.url }}{% else %}/collections/all{% endif %}">{{ 'cart.general.continue_shopping_link_html' | t }}</a>
</p>
{% endif %}
</div>
</div>
</form>
{% endif %}
</div>
{% schema %}
{
"name": "Cart page",
"class": "cart-section",
"settings": [
{
"type": "checkbox",
"id": "display_continue_shopping",
"label": "Show \"continue shopping\" link",
"default": true
},
{
"type": "checkbox",
"id": "display_special_instructions",
"label": "Show \"note\" text box"
}
]
}
{% endschema %}
this is the code on the template reset:
<div class="container main content main-wrapper">
<div class="sixteen columns clearfix collection_nav">
<h1 class="center">{{ 'cart.general.title' | t }}</h1>
<div class="feature_divider"></div>
</div>
{% if cart.item_count == 0 %}
<div class="sixteen columns">
<div class="section clearfix">
<p class="quote">{{ 'cart.general.continue_browsing_html' | t }}</p>
</div>
</div>
{% else %}
<form action="{{ routes.cart_url }}" method="post" id="cart_form">
<div class="section clearfix">
<div class="ten columns cart_items">
<h4 class="title">{{ 'cart.general.products' | t }}</h4>
{% for item in cart.items %}
<div class="five columns alpha">
<a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">
{% if item.image %}
{% render 'image-element',
image: item.image,
alt: item.title
%}
<noscript>
{% render 'image-element',
image: item.image,
alt: item.title
%}
</noscript>
{% endif %}
</a>
</div>
<div class="five columns omega">
<p>
<a href="{{ item.url }}">
{{ item.product.title }}
</a>
</p>
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
<p class="meta">
{% for option in item.product.options %}
{% unless option contains "Title" %}
<span class="label">{{ option }}:</span> <span>{{ item.variant.options[forloop.index0] }}</span><br />
{% endunless %}
{% endfor %}
</p>
{% endunless %}
{% if item.properties %}
<p>
{% for p in item.properties %}
{% unless p.last == blank %}
{% if p.last contains '/uploads/' %}
{{ p.first }}: <a class="lightbox" href="{{ p.last }}">{{ 'cart.general.uploaded_file' | t }}</a><br />
{% else %}
{{ p.first }}: {{ p.last }}<br />
{% endif %}
{% endunless %}
{% endfor %}
</p>
{% endif %}
<p class="price_total">
<strong>{{ 'cart.general.price_per_item' | t }}:</strong>
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money">
{% render 'price-element', price: item.final_price %}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %}was_price{% endif %}">
{% render 'price-element', price: item.original_price %}
</span>
</p>
<p id="quantity_{{ forloop.index }}">
<label for="updates_{{ item.id }}" class="quantity_label">{{ 'cart.general.quantity' | t }}:</label>
<input type="number" min="0" size="3" maxlength="3" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == "deny" %}max="{{ item.variant.inventory_quantity }}"{% endif %} />
</p>
{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}
<p class ="applied_discount">
<strong>{{ 'cart.general.discount' | t }}:</strong> {{ discount_allocation.discount_application.title }} (- <span class="money">
{% render 'price-element', price: discount_allocation.amount %}
</span>)
</p>
{% endfor %}
{% endif %}
<p class="price_total">
<strong>{{ 'cart.general.total' | t }}:</strong>
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money">
{% render 'price-element', price: item.final_line_price %}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %} hidden {% endif %}">
{% render 'price-element', price: item.original_line_price %}
</span>
</p>
<p class="remove_item">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0" title="{{ 'cart.general.remove' | t }}">{{ 'cart.general.remove' | t }}</a>
</p>
</div>
<br class="clear" />
<br class="clear" />
{% endfor %}
</div>
<div class="five columns offset-by-one">
{% if cart.cart_level_discount_applications != blank %}
<h4 class="discount">
{{ 'cart.general.discount' | t }}
</h4>
{% for discount_application in cart.cart_level_discount_applications %}
<p>
{{ discount_application.title }} (- <span class="money">
{% render 'price-element', price: discount_application.total_allocated_amount %}
</span>)
</p>
{% endfor %}
{% endif %}
<h4 class="subtotal">
{{ 'cart.general.subtotal' | t }}
</h4>
<p class="subtotal_amount">
<strong>
<span class="money">
{% render 'price-element', price: cart.total_price %}
</span>
</strong>
<small class="excluding_tax"><em>{{ 'cart.general.excluding_tax_shipping' | t }}</em></small>
</p>
{% if section.settings.display_special_instructions %}
<label for="cart-note">{{ 'cart.general.note' | t: shop_name: shop.name }}:</label>
<textarea id="cart-note" name="note" rows="2">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<div class="tos_checkbox">
<input type="checkbox" class="tos_agree" id="cart_agree" required />
<label class="tos_label" for="cart_agree">
{{ settings.tos_richtext }}
</label>
</div>
{% endif %}
<p class="add-to-cart-wrap">
<input type="submit" class="action_button add_to_cart" id="checkout" name="checkout" value="{{ 'cart.general.checkout' | t }}" />
</p>
{% if content_for_additional_checkout_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
{% if cart.item_count > 0 and section.settings.display_continue_shopping %}
<p class="continue_shopping">
<a href="{% if cart.items.first.product.collections != blank %}{{ cart.items.first.product.collections.last.url }}{% else %}{{ routes.all_products_collection_url }}{% endif %}">{{ 'cart.general.continue_shopping_link_html' | t }}</a>
</p>
{% endif %}
</div>
</div>
</form>
{% endif %}
</div>
{% schema %}
{
"name": "Cart page",
"class": "cart-section",
"settings": [
{
"type": "checkbox",
"id": "display_continue_shopping",
"label": "Show \"continue shopping\" link",
"default": true
},
{
"type": "checkbox",
"id": "display_special_instructions",
"label": "Show \"note\" text box"
}
]
}
{% endschema %}
I have tried copy and paste on the current theme this code, although gives errors
Can someone advice?
Thanks!
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