[FIXED] How to update css styles in Shopify ajax cart

Issue

I'm building ajax cart for my client's Shopify store with liquid-ajax-cart. Now I'm trying to add a progress bar that shows how far a user from the free shipping option. The bar is the .free-shipping-bar element within the .minicart__header.

The free shipping starts from $100 (free_shipping_threshold_price liquid variable) so I want the bar to be filled completely if the cart total is $100 or more.

If the cart total is less than $100 then I want to fill the bar accordingly (40% for $40, 50% for $50 etc.).

The HTML of the section updates as it should when a user clicks "add to cart" but the css ({% style %}) doesn't. Is possible to fix it somehow so that css code updates by ajax also?

<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 %}

Solution

according to the docs only the part that is inside the data-ajax-cart-section element will get updated. So you need to put the CSS styles that should be updated within the element:

{%- liquid
    assign free_shipping_threshold_price = 10000
    assign free_shipping_percent = cart.total_price | times: 100 | divided_by: free_shipping_threshold_price
-%}

<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>
        <style>
            .free-shipping-bar:after { 
                width: {{ free_shipping_percent }}% !important; 
            }
        </style>
        <!-- Mini-cart code -->
    </div>
</div>

Answered By - Evgeniy

Answer Checked By - Terry (PHPFixing Volunteer)