Shopify themes, liquid, logos, and UX
Hi community!
i have a progress bar in my drawer cart.
it has 3 different steps with values (40€ - 60€ - 80€)
for each step there's a free shipping option or a gift
when i add products it works but when i remove products from my cart, it doesn't work properly.
any hints ?
here's the link to the demo: https://cwwtek4lh4nmghvc-63687557304.shopifypreview.com
here's the cart-liquid code
{% assign offerProduct = settings.offer-product %}
{% if settings.cart_type == 'drawer' %}
<div id="CartDrawer" class="drawer drawer--right cart__drawer-custom">
<div class="cart-empty-wrapper">{% render 'cart-drawer-empty'%}</div>{% assign collection = collections[settings.drawer_collection] %}
<div class="cart_collection_drawer_desktop sidecart_Collection">{% render 'collection-grid-drawer',
collection: collection,
items: collection.products,
quick_shop_enable: true
%}{% if settings.drawer_charges != blank or settings.loyalty_text != blank or settings.plante != blank %}
<div class="drawer_charges">
<div class="drawer-charges_header">
<div class="drawer__close-charges drawer__close-desktop">
<button type="button" class="drawer__close-button">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
<div class=" drawer__close-charges drawer__close-mobile widescreen--hide">
<button type="button" class="drawer__close-button">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
<div class="drawer-count drawer-charge-heading {{ settings.plante }}">Gastos de entrega en todo el mundo</div>
</div>
{% if settings.drawer_charges != blank %}
{% assign page = settings.drawer_charges %}
<div class="drawer_charges-text drawer_text-charge">
{{ page.content }}
<button class="btn btn-fermer drawer__close-desktop">CERRAR</button>
<button class="btn btn-fermer drawer__close-mobile widescreen--hide">CERRAR</button>
</div>
{% endif %}
{% if settings.loyalty_text != blank %}
{% assign page = settings.loyalty_text %}
<div class="drawer_charges-text drawer_text-loyalty">
{{ page.content }}
<button class="btn btn-fermer drawer__close-desktop">CERRAR</button>
<button class="btn btn-fermer drawer__close-mobile widescreen--hide">CERRAR</button>
</div>
{% endif %}
{% if settings.plante != blank %}
{% assign page = settings.plante %}
<div class="drawer_charges-text drawer_text-arbre">
{{ page.content }}
<button class="btn btn-fermer drawer__close-desktop">CERRAR</button>
<button class="btn btn-fermer drawer__close-mobile widescreen--hide">CERRAR</button>
</div>
{% endif %}
</div>
{% endif %}
</div>
<form id="CartDrawerForm" action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
<div class="drawer-count">Carrito ( <span class="cart-count cart-link__bubble-num"> {{ cart.item_count }}</span>)</div>
<div class="drawer-cart"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 64 64"><path d="M14 17.44h46.79l-7.94 25.61H20.96l-9.65-35.1H3"></path><circle cx="27" cy="53" r="2"></circle><circle cx="47" cy="53" r="2"></circle></svg>
<span class="cart-count cart-link__bubble-num"> {{ cart.item_count }}</span>
</div>
</div>
</div>
{% assign total_cart_price = cart.total_price | divided_by: 100.0 | round: 2 %}
{% assign offer_gift = "" %}
{% assign offer_price = 0 %}
{% assign progressItem = 0 %}
{% assign calculatedPercentage = 0 %}
{% if total_cart_price == 0 %}
{% assign hideClass = "d-none" %}
{% else %}
{% assign hideClass = "" %}
{% endif %}
{% if total_cart_price < 40 and total_cart_price > 0 %}
{% assign offer_gift = "Livraison en Point Relais offerte" %}
{% assign offer_avant = "avant la" %}
{% assign offer_price = 40 | minus: total_cart_price | replace: ".", "," %}
{% assign progressItem = 1 %}
{% assign calculatedPercentage = total_cart_price | times: 100.0 %}
{% assign calculatedPercentage = calculatedPercentage | divided_by: 35.0 | round: 2 %}
{% elsif total_cart_price >= 40 and total_cart_price < 60 %}
{% assign offer_gift = "Livraison à domicile offerte" %}
{% assign offer_avant = "avant la" %}
{% assign offer_price = 60 | minus: total_cart_price | replace: ".", "," %}
{% assign progressItem = 2 %}
{% assign calculatedPercentage = total_cart_price | minus: 40 %}
{% assign calculatedPercentage = calculatedPercentage | times: 100.0 %}
{% assign calculatedPercentage = calculatedPercentage | divided_by: 10.0 | round: 2 %}
{% elsif total_cart_price >= 60 and total_cart_price < 80 %}
{% assign offer_gift = "un arbre planté" %}
{% assign offer_avant = "avant" %}
{% assign offer_price = 80 | minus: total_cart_price | replace: ".", "," %}
{% assign progressItem = 3 %}
{% assign calculatedPercentage = total_cart_price | minus: 60 %}
{% assign calculatedPercentage = calculatedPercentage | times: 100.0 %}
{% assign calculatedPercentage = calculatedPercentage | divided_by: 15.0 | round: 2 %}
{% elsif total_cart_price >= 80 %}
{% assign progressItem = 4 %}
{% endif %}
<div class="drawer__price-offer">
<div class="offer-avail {% if total_cart_price < 80 %} d-none{% endif %}">Félicitations<span>, vous avez obtenu tous les cadeaux !</span></div>
<div class="offer-text {{ hideClass }} {% if total_cart_price >= 80 %} d-none{% endif %}">
Plus que
<span class="offer-price">{{ offer_price }}</span><span class="offer-price-icon">€</span>
<span class="offer-avant"> {{ offer_avant }}</span>
<span class="offer-gift">{{ offer_gift }}</span> !
</div><div class="progress-bar-content {{ hideClass }}">
<div class="content-item first-content-item {% if progressItem == 2 or progressItem == 3 or progressItem == 4 %} completed {% endif %}">
Livraison en Point<br> Relais offerte
</div>
<div class="content-item second-content-item {% if progressItem == 3 or progressItem == 4 %} completed {% endif %}">
Livraison à<br> domicile offerte
</div>
<div class="content-item third-content-item forOpen {% if progressItem == 4 %} completed {% endif %}">
<a> Un <br><u>arbre</u> planté</a>
</div></div>
<div class="progress-bar {{ hideClass }}">
<div class="first-progress-item progress-item {% if progressItem == 2 or progressItem == 3 or progressItem == 4 %} completed {% endif %}" {% if progressItem == 2 or progressItem == 3 or progressItem == 4 %} style="background-color: #83A131" {% elsif progressItem == 1 %} style="background-color: rgba(131, 161, 49, 0.2);" {% endif %}>
<div class="inner-progress-item {% unless progressItem == 1 %} d-none {% endunless %}" style="width : {{calculatedPercentage}}%"></div>
</div>
<div class="second-progress-item progress-item {% if progressItem == 3 or progressItem == 4 %} completed {% endif %}" {% if progressItem == 3 or progressItem == 4 %} style="background-color: #83A131" {% elsif progressItem == 2 %} style="background-color: rgba(131, 161, 49, 0.2);" {% endif %}>
<div class="inner-progress-item {% unless progressItem == 2 %} d-none {% endunless %}" style="width : {{calculatedPercentage}}%"></div>
</div>
<div class="third-progress-item progress-item {% if progressItem == 4 %} completed {% endif %}" {% if progressItem == 4 %} style="background-color: #83A131" {% elsif progressItem == 3 %} style="background-color: rgba(131, 161, 49, 0.2);" {% endif %}>
<div class="inner-progress-item {% unless progressItem == 3 %} d-none {% endunless %}" style="width : {{calculatedPercentage}}%"></div>
</div>
<div class="fourth-progress-item" {% if progressItem == 4 %} style="background-color: #83A131"{% endif %}>
</div>
</div><div class="progress-bar-prices {{ hideClass }}">
<div class="first-progress-item-price {% if progressItem == 2 or progressItem == 3 or progressItem == 4 %} completed {% endif %}">
40€
</div>
<div class="second-progress-item-price {% if progressItem == 3 or progressItem == 4 %} completed {% endif %}" >
60€
</div>
<div class="third-progress-item-price {% if progressItem == 4 %} completed {% endif %}" >
80€
</div>
</div>
</div><div class="drawer__inner">
<div class="drawer__scrollable">
<div data-products class="appear-animation appear-delay-2"></div>{% if settings.cart_notes_enable %}
<div class="appear-animation appear-delay-3">
<label for="CartNoteDrawer">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartNoteDrawer">{{ cart.note }}</textarea>
</div>
{% endif %}
</div>{% assign item_count = cart.item_count %}
{% assign remaining_item = 3 | minus: item_count %}
{% if item_count < 3 %}
{% assign className = "gift_locked" %}
{% else %}
{% assign className = "gift_unlocked" %}
{% endif %}
<div class="cart-drawer-main-footer">
<!-- ----------------------------Free Product Annoucment Bar -->
{% if offerProduct != blank %}
<div class="gift_product {{ className }}">
{% if className == "gift_locked" %}
<span class="gift_heading">CADEAU</span> : Plus que <span class="unlock_count"> {{- remaining_item -}}</span> <span>{% if remaining_item == 1 %}produit{% else %}produits{% endif %}</span> pour obtenir la <span class="gift_product_name">cuillère doseuse 1g.</span>
{% else %}
<img class="card_unlock_tick" src="//cdn.shopify.com/s/files/1/0083/1740/3187/files/Check_vert.svg?v=1661326873" />
<div class="unlock_gift_message">Félicitations, vous avez obtenu la cuillère doseuse 1g !</div>
{% endif %}
</div>
{% endif %}
<!-- ---------------------ends ----------------- -->
<div class="cart_collection_drawer_mobile sidecart_Collection">
{% render 'mobile-collection-grid-drawer',
collection: collection,
items: collection.products,
quick_shop_enable: true
%}
</div><div class="drawer__footer appear-animation appear-delay-4">
</div>
<div data-discounts>
{% if cart.cart_level_discount_applications != blank %}
<div class="cart__item-sub cart__item-row">
<div>{{ 'cart.general.discounts' | t }}</div>
<div class="text-right">
{% for cart_discount in cart.cart_level_discount_applications %}
<div>
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% comment %}
<div class="cart__item-sub cart__item-row">
<div class="cart__subtotal">{{ 'cart.general.subtotal' | t }}</div>
<div data-subtotal>{{ cart.total_price | money }}</div>
</div>
{% endcomment %}
<div class="cart__item-row cart__savings text-center hide" data-savings></div><div class="cart__item-row text-center ajaxcart__note">
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
</small>
</div>{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTermsDrawer" class="cart__terms-checkbox">
<label for="CartTermsDrawer">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}<div class="cart__checkout-wrapper a">
<button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
FINALIZAR MI COMPRA
<span>|</span> <div data-subtotal>{{ cart.total_price | money }}</div>
</button>{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
<div class="drawer__footer-text forOpen">Códigos promocionales y
<span>gastos de entrega</span>
aparecen en el siguiente paso.</div>
</div>
</div>
</div><div class="drawer__cart-empty appear-animation appear-delay-2">
{% render 'cart-drawer-empty'%}
{% comment %} <div class="drawer__scrollable">
{{ 'cart.general.empty' | t }}
</div>{% endcomment %}
</div>
</form>
</div>
{% endif %}
<script>
$(document).ready(function(){
var chargeH1 = "Frais de port monde";
var loyatyH1 = "Programme de fidélité amoseeds"
var arbreH1 = "un arbre plante"
$(".drawer__close-desktop").click(function(){
closeDrawer();
});
jQuery(document).on('click', '.third-content-item.forClose', function () {
closeDrawer();
});
jQuery(document).on('click', '.loyalty_points-container.forClose a', function () {
closeDrawer();
});
jQuery(document).on('click', '.drawer__footer-text.forClose span', function () {
closeDrawer();
})
$(".drawer__close-mobile").click(function(){
closeDrawerMobile();
});
function closeDrawer(){
$(".loyalty_points-container").removeClass('forClose');
$(".loyalty_points-container").addClass('forOpen');
$(".third-content-item").removeClass('forClose');
$(".third-content-item").addClass('forOpen');
$(".drawer__footer-text").removeClass('forClose');
$(".drawer__footer-text").addClass('forOpen');
$(".cart_collection_drawer_desktop .grid").show();
$(".drawer_charges").slideUp();
}
function closeDrawerMobile(){
$(".cart_collection_drawer_desktop").slideUp();
$(".drawer_charges").slideUp();
$(".loyalty_points-container").addClass("forOpen");
$(".loyalty_points-container").removeClass("forClose");
$(".third-content-item").addClass("forOpen");
$(".third-content-item").removeClass("forClose");
$(".drawer__footer-text").addClass("forOpen");
$(".drawer__footer-text").removeClass("forClose");
}
jQuery(document).on('click', '.drawer__footer-text.forOpen span', function () {
$(this).parents(".drawer__footer-text").addClass('forClose');
$(this).parents(".drawer__footer-text").removeClass('forOpen');
$(".cart_collection_drawer_desktop .grid").hide();
$(".drawer_charges").slideDown();
$(".cart_collection_drawer_desktop.sidecart_Collection").slideDown();
$(".drawer-charge-heading").text(chargeH1);
$(".drawer_text-charge").show();
$(".drawer_text-loyalty").hide();
$(".drawer_text-arbre").hide();
});
jQuery(document).on('click', '.loyalty_points-container.forOpen a', function () {
$(".cart_collection_drawer_desktop .grid").hide();
$(this).parents(".loyalty_points-container").addClass('forClose');
$(this).parents(".loyalty_points-container").removeClass('forOpen');
$(".drawer_charges").slideDown();
$(".cart_collection_drawer_desktop.sidecart_Collection").slideDown();
$(".drawer-charge-heading").text(loyatyH1);
$(".drawer_text-charge").hide();
$(".drawer_text-loyalty").show();
$(".drawer_text-arbre").hide();
});
jQuery(document).on('click', '.third-content-item.forOpen', function () {
$(this).addClass('forClose');
$(this).removeClass('forOpen');
$(".cart_collection_drawer_desktop .grid").hide();
$(".drawer_charges").slideDown();
$(".drawer-charge-heading").text(arbreH1);
$(".drawer_text-charge").hide();
$(".cart_collection_drawer_desktop.sidecart_Collection").slideDown();
$(".drawer_text-loyalty").hide();
$(".drawer_text-arbre").show();
});
// $(".third-content-active").click(function(){
// $(".third-content-item").removeClass("third-content-active");
// $(".cart_collection_drawer_desktop .grid").show();
// $(".drawer_charges").slideUp();
// });
});
</script>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025