Zid Docs
Cart
When changing product quantity or deleting a product from the cart, changes are triggered on cartProductsHtmlChanged function which has the updated html version of the cart template (template_for_cart_products_list), as well as the cart object as parameters. Also, you need to add the {{ cart_view_scripts|raw }} at footer scripts block.
Follow these steps to automate cart updates:
1 - Add cart products list template, using the following script:
<div class="cart__items">
<div class="template_for_cart_products_list">
{{ template_for_cart_products_list }}
</div>
</div>
2 - Add cart view script in footer scripts block.
3- Add cartProductsHtmlChanged event function in script tag.
{% block footer_scripts %}
{{ cart_view_scripts|raw }}
<script>
function cartProductsHtmlChanged(html, cart) {
console.log(cart.products_count)
}
// reset cart html
$('.template_for_cart_products_list').html(html);
</script>
{% endblock %}
Cart Twig File
Below is an example of cart.twig file.
{% extends "layout.twig" %}
{% block header %} {{ include('header.twig') }} {% endblock %}
{% block main_content %}
<div class="cart__empty mt-5" style="{% if cart.products_count <= 0 %}display: flex;{% endif %}">
<div class="cart__empty-icon">
<img loading="lazy" src="{{ asset_url ~ 'shopping-bag-empty.gif' }}" alt="empty_cart" width="150" height="150">
</div>
<h1 class="cart__empty-text my-5">{{locals.empty_cart}}</h1>
<a href="/" class="no-btn-style common-btn cart__empty-btn mt-5">{{locals.cart_back_to_store}}</a>
</div>
{% if cart.products_count >= 1 %}
<div class="cart cart_page mt-5">
<div class="cart__items-container">
<h1 class="section-title mb-5">{{ locals.cart_products_title }}</h1>
<div class="header-wrapper">
<div class="section-cart-products-row d-flex mb-3">
<div class="section-cart-products-col-1"></div>
<div class="section-cart-products-col-2 flex-grow-1">{{ locals.cart_header_product }}</div>
<div class="section-cart-products-col-3">{{ locals.cart_header_quantity }}</div>
<div class="section-cart-products-col-4">{{ locals.cart_header_price }}</div>
</div>
</div>
<div class="cart__items">
<div class="template_for_cart_products_list">
{{ template_for_cart_products_list }}
</div>
</div>
</div>
<div class="cart__side-col">
<div class="cart__total-container">
<h3 class="cart__total-title">{{locals.cart_break_down_summary}}</h3>
<ul class="cart__total-list">
{% for cartTotal in cart.totals %}
<li class="{% if cartTotal.code == 'total' %}cart__total-item--total{%else%}cart__total-item{%endif%}">
<p> {{ cartTotal.title }} </p>
<p> {{ cartTotal.value_string }} </p>
</li>
{% endfor %}
</ul>
{% include 'promo-code-section.twig' with {'cart': cart, 'is_cart_page': true} %}
<div>{{ template_for_cart_payments_widget }}</div>
<div class="cart-discount-rule-wrapper free-shipping-rule-section mt-5 {% if cart.fee_shipping_discount_rules %}d-block{% else %}d-none{% endif %}">
<div class="d-flex align-items-center justify-content-between">
<div class="message flex-grow-1 free-shipping-rule-message">
{{ cart.fee_shipping_discount_rules.conditions_subtotal.status.message }}
</div>
<div class="cart-discount-icon free-shipping-rule-done flex-shrink-0 {% if cart.fee_shipping_discount_rules.conditions_subtotal.status.code == 'applied' %}d-inline-block{% else %}d-none{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="25" viewBox="0 0 50 30">
<path d="M33.9390276,19.1537747 C33.8338031,19.2702241 33.7142224,19.3733159 33.6181602,19.4979203 C32.6854459,20.7127304 32.1429561,22.3266545 32.1429561,24.0926672 C32.1429561,24.5340184 32.1784316,24.9653064 32.2442,25.3839963 C32.2669245,25.6105817 32.3888939,25.818626 32.5814143,25.9591798 C32.7739347,26.1000972 33.0202714,26.1609165 33.2622204,26.1279108 C33.5045673,26.0949013 33.7214041,25.9710374 33.8625061,25.784876 C34.0036101,25.5990849 34.0566235,25.3673064 34.0087918,25.143683 L34.0087918,25.143683 L33.9644585,24.8012823 C33.9407197,24.5700454 33.9286735,24.3335285 33.9286735,24.0927247 C33.9286735,22.6471234 34.3858878,21.3543797 35.0690816,20.4647184 C35.5186735,19.8795285 36.0472143,19.4968196 36.6072449,19.2902563 L36.6072449,19.2902563 L36.6072449,29.9525981 L16.0643878,29.9525981 C16.0627551,28.8774399 15.5047143,27.8424494 14.5193878,27.2138639 C13.8856122,26.8096424 13.1469694,26.6164291 12.4127551,26.6331171 C11.6785714,26.6501772 10.949102,26.8782437 10.3376531,27.3113924 C9.43682653,27.9491772 8.94256704,28.9375633 8.93897959,29.9525981 L8.93897959,29.9525981 L1.78571429,29.9525981 C0.780846939,29.9525981 0,29.2260475 0,28.2911392 L0,28.2911392 L0,19.153481 Z M50.0002041,19.153481 L50.0002041,28.2911392 C50.0002041,29.2260475 49.2193571,29.9525316 48.2144898,29.9525316 L38.3930612,29.9525316 L38.3930612,19.2901899 C38.9542857,19.4963829 39.4808163,19.8783513 39.9312245,20.4646519 C40.6144184,21.3543133 41.0716327,22.647057 41.0716327,24.0926582 C41.0716327,24.333462 41.0595864,24.5699789 41.0358476,24.8012159 L40.9915143,25.1436165 C40.9436827,25.3672399 40.996696,25.5990184 41.1378,25.7848096 C41.278902,25.9709709 41.4957388,26.0948349 41.7380857,26.1278444 C41.9800347,26.1608501 42.2263714,26.1000308 42.4188918,25.9591134 C42.6114122,25.8185596 42.7333816,25.6105153 42.7561061,25.3839298 C42.8218745,24.9652399 42.85735,24.533952 42.85735,24.0926007 C42.85735,22.326588 42.3148602,20.712664 41.3821459,19.4978539 C41.2860837,19.3732494 41.1665031,19.2705279 41.0612786,19.1537083 L50.0002041,19.153481 Z M12.4581429,28.2911677 C12.8244694,28.2744513 13.1923776,28.3790297 13.5116327,28.5833639 C14.0070918,28.899693 14.2825204,29.4151709 14.2825204,29.9525411 L10.7178265,29.9525411 C10.7178265,29.4444778 10.9649592,28.9531424 11.4189592,28.6319715 C11.7266735,28.4139114 12.0917959,28.299693 12.4581429,28.2911677 Z M24.144898,21.159019 C22.6760204,21.159019 21.4663265,22.2844937 21.4663265,23.6511076 C21.4663265,25.0177215 22.6760204,26.1431962 24.144898,26.1431962 C25.6137755,26.1431962 26.8234694,25.0177215 26.8234694,23.6511076 C26.8234694,22.2844937 25.6137755,21.159019 24.144898,21.159019 Z M24.144898,22.8204114 C24.6487245,22.8204114 25.0377551,23.1823576 25.0377551,23.6511076 C25.0377551,24.1194873 24.6487245,24.4818038 24.144898,24.4818038 C23.6410714,24.4818038 23.2520408,24.1194873 23.2520408,23.6511076 C23.2520408,23.1823576 23.6410714,22.8204114 24.144898,22.8204114 Z M48.2142653,0.0481329114 C49.2191327,0.0481329114 49.9999796,0.774987342 49.9999796,1.70952532 L49.9999796,1.70952532 L49.9999796,17.4927532 L44.5905918,17.4927532 C44.9002959,17.000981 45.0892347,16.4384335 45.0892347,15.8313608 C45.0892347,14.0060127 43.4797449,12.5085759 41.5178061,12.5085759 C40.5217857,12.5085759 39.6735408,12.9584241 39.1218878,13.5532595 C38.8145714,13.8847785 38.5865714,14.256731 38.3928571,14.6401899 L38.3928571,14.6401899 L38.3928571,0.0474683544 Z M36.6074082,0.0471835443 L36.6074082,14.6332595 C36.4144898,14.2516424 36.184102,13.8822816 35.8783776,13.5525949 C35.3271531,12.95775 34.478551,12.5079114 33.4824592,12.5079114 C31.5205204,12.5079114 29.9110306,14.0053481 29.9110306,15.8306962 C29.9110306,16.4378165 30.1031531,17.0003449 30.4132653,17.4920886 L30.4132653,17.4920886 L0,17.4920886 L0,1.70886076 C0,0.774322785 0.780846939,0.0474683544 1.78571429,0.0474683544 L1.78571429,0.0474683544 L36.6074082,0.0471835443 Z M33.4816837,14.1692089 C33.9647347,14.1693038 34.2234184,14.3154209 34.5243878,14.6399051 C34.8253571,14.9643892 35.0971735,15.4924842 35.3128163,16.0935759 L35.815051,17.4919937 L33.4816837,17.4919937 C32.4847959,17.4919937 31.6959694,16.7580854 31.6959694,15.8306013 C31.6959694,14.9031171 32.4847959,14.1692089 33.4816837,14.1692089 Z M41.5184184,14.1693987 C42.5152551,14.1693038 43.3040816,14.903212 43.3040816,15.8306962 C43.3040816,16.7581804 42.5152551,17.4920886 41.5183673,17.4920886 L39.185,17.4920886 L39.6872347,16.0936709 C39.9024796,15.4925316 40.1743163,14.9643987 40.4756633,14.64 C40.776602,14.3155063 41.0352959,14.1693987 41.5184184,14.1693987 Z M7.14257041,10.0191456 L7.07998878,10.0191456 C6.61124388,10.0495538 6.24851745,10.4126108 6.24971032,10.8498418 C6.24971032,11.3085759 6.64950918,11.680538 7.14257041,11.680538 C7.37933571,11.680538 7.6065398,11.5930158 7.77394796,11.4372627 C7.94135816,11.2811392 8.03542755,11.0701234 8.03542755,10.8498418 C8.03542755,10.6295601 7.94135612,10.4181759 7.77394796,10.2624209 C7.6065398,10.1066658 7.37933571,10.0191456 7.14257041,10.0191456 L7.14257041,10.0191456 Z M18.75,1.70886076 C17.2811224,1.70886076 16.0714286,2.83433544 16.0714286,4.20094937 C16.0714286,5.56756329 17.2811224,6.69303797 18.75,6.69303797 C20.2188776,6.69303797 21.4285714,5.56756329 21.4285714,4.20094937 C21.4285714,2.83433544 20.2188776,1.70886076 18.75,1.70886076 Z M18.75,3.37025316 C19.2538265,3.37025316 19.6428571,3.73256962 19.6428571,4.20094937 C19.6428571,4.66969937 19.2538265,5.03164557 18.75,5.03164557 C18.2461735,5.03164557 17.8571429,4.66969937 17.8571429,4.20094937 C17.8571429,3.73256962 18.2461735,3.37025316 18.75,3.37025316 Z M45.5357337,2.54287975 L45.473152,2.54287975 C45.0044071,2.57328797 44.6416807,2.93634494 44.6428736,3.37357595 C44.6428736,3.83231013 45.0426724,4.20427215 45.5357337,4.20427215 C45.772499,4.20427215 45.9997031,4.11675 46.1671112,3.96099684 C46.3345214,3.80487342 46.4285908,3.59385759 46.4285908,3.37357595 C46.4285908,3.1532943 46.3345194,2.94191013 46.1671112,2.78615506 C45.9997031,2.6304 45.772499,2.54287975 45.5357337,2.54287975 L45.5357337,2.54287975 Z"/>
</svg>
</div>
</div>
</div>
{% if store.availability.closed_now %}
<button class="no-btn-style common-btn cart__total-checkout mt-4 btn-disabled">{{locals.cart_proceed}}</button>
{% else %}
<a href="{% if customer %}/checkout/choose-address-and-shipping{% else %}/auth/login?redirect_to=/checkout/choose-address-and-shipping{% endif %}" class="no-btn-style common-btn cart__total-checkout mt-4">{{locals.cart_proceed}}</a>
{% endif %}
</div>
<a href="/" class="no-btn-style cart__total-coutinue">{{locals.cart_back_to_store}}</a>
</div>
</div>
{% endif %}
{% endblock %}
{% block footer_scripts %}
{{ cart_view_scripts|raw }}
<script>
$(document).on('click','.cart-product-delete a', function(event) {
event.currentTarget.querySelector('.icon-delete').style.display = 'none'
event.currentTarget.querySelector('.prefix').style.display = 'block'
});
$(document).on('change','.cart-product-quantity-dropdown select', function(event) {
let pElm = event.currentTarget.closest('.cart-product-row')
pElm.querySelector('.icon-delete').style.display = 'none'
pElm.querySelector('.prefix').style.display = 'block'
});
function cartProductsHtmlChanged(html, cart){
if (cart.products_count <= 0){
document.querySelector('.cart__empty').style.display = 'flex'
document.querySelector('.cart.cart_page').style.display = 'none'
updateCartProducts(cart, false);
return;
} else {
document.querySelector('.cart__empty').style.display = 'none'
document.querySelector('.cart.cart_page').style.display = 'flex'
}
$('.template_for_cart_products_list').html(html);
if (cart && cart.totals) {
let strCartTotals = '';
for (let i = 0; i < cart.totals.length; i++) {
let cartTotal = cart.totals[i];
let totalClass = 'cart__total-item';
if (cartTotal.code === 'total') {
totalClass = 'cart__total-item--total';
}
strCartTotals += `
<li class="${totalClass}">
<p>${cartTotal.title }</p>
<p>${cartTotal.value_string }</p>
</li>
`
}
$('.cart_page .cart__total-list').html(strCartTotals);
}
if (cart.fee_shipping_discount_rules) {
document.querySelector('.free-shipping-rule-section').classList.remove('d-none')
$('.free-shipping-rule-message').html(cart.fee_shipping_discount_rules.conditions_subtotal.status.message)
if (cart.fee_shipping_discount_rules.conditions_subtotal.status.code === 'applied') {
document.querySelector('.free-shipping-rule-done').classList.remove('d-none')
} else {
document.querySelector('.free-shipping-rule-done').classList.add('d-none')
}
} else {
document.querySelector('.free-shipping-rule-section').classList.add('d-none')
}
updateCartProducts(cart, false);
}
</script>
{% endblock %}
{% block footer %} {{ include('footer.twig') }} {% endblock %}
Last modified: 4 months ago