cart drawer progress bar problem - motion theme

julienamoseeds
Tourist
17 0 0

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&nbsp;<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>

Replies 0 (0)