A client's Shopify store requires an ajax cart, and I'm utilizing the liquid-ajax-cart plugin for this purpose. My current task involves integrating a progress bar that indicates how close a user is to qualifying for free shipping. This progress bar is defined by the .free-shipping-bar element within the .minicart__header.
For this particular store, free shipping kicks in once the cart total reaches $100 (as specified by the liquid variable free_shipping_threshold_price). Ideally, I want the progress bar to be completely filled when the cart total equals or exceeds $100.
If the cart total is below $100, I aim to fill the bar proportionally (e.g., 40% filled for $40, 50% for $50, etc.).
While the HTML section updates correctly upon clicking "add to cart," I'm facing challenges with the css ({% style %}) not updating. Is there a way to ensure that the css code also refreshes via ajax?
<div class="minicart-wrapper">
<div class="minicart-overlay" data-ajax-cart-toggle-class-button="js-ajax-cart-open"></div>
<div class="minicart" data-ajax-cart-section>
<div class="minicart__header">
<h3 class="title">{{ 'general.cart.title' | t }}</h3>
<div class="free-shipping-bar"></div>
<button class="close-button" data-ajax-cart-toggle-class-button="js-ajax-cart-open" type="button"></button>
</div>
<div class="minicart__items">
<!-- items code -->
</div>
<div class="minicart__footer">
<!-- footer code -->
</div>
</div>
</div>
{%- liquid
assign free_shipping_threshold_price = 10000
assign free_shipping_percent = cart.total_price | times: 100 | divided_by: free_shipping_threshold_price
-%}
{% style %}
.free-shipping-bar {
position: relative;
width: 100%;
height: 3px;
background-color: #c4c4c4;
}
.free-shipping-bar:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: {{ free_shipping_percent }}%;
background-color: #005030;
max-width: 100%;
}
{% endstyle %}
{% schema %}
{
"name": "Ajax Cart",
"settings": [
]
}
{% endschema %}