free shiiping progrss bar with discount create in cart page

Kumar2573
Explorer
78 5 8
{% if cart.total_price <= 10000 %}
 
{% assign barvalue1 = cart.total_price %}
{% assign barvalue2 = 0 %}
{% assign barvalue3 = 0 %}
{% capture my_variable55 %}You are just <b>{{10000 | minus: cart.total_price | money}}</b> away from <b>10% Discount</b>{% endcapture %}
 
{% elsif cart.total_price <= 25000 %}
 
{% assign barvalue1 = 10000 %}
{% assign barvalue2 = cart.total_price %}
{% assign barvalue3 = 0 %}
{% capture my_variable55 %}You are just <b>{{25000 | minus: cart.total_price | money}}</b> away from <b>free shipping</b>{% endcapture %}
 
{% elsif cart.total_price <= 45000 %}
 
{% assign barvalue1 = 10000 %}
{% assign barvalue2 = 25000 %}
{% assign barvalue3 = cart.total_price %}
{% capture my_variable55 %}You are just <b>{{45000 | minus: cart.total_price | money}}</b> away from <b>15% Discount</b>{% endcapture %}
 
{% else %}
 
{% assign barvalue1 = 10000 %}
{% assign barvalue2 = 25000 %}
{% assign barvalue3 = 45000 %}
 

{% endif %}
 

<div style="text-align: center;">
 
<div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
  <div class="Polaris-ProgressBar Polaris-ProgressBar--sizeLarge"><progress class="Polaris-ProgressBar__Progress" value="{{barvalue1}}" max="10000"></progress><progress class="Polaris-ProgressBar__Progress" value="{{barvalue2}}" max="25000"></progress><progress class="Polaris-ProgressBar__Progress" value="{{barvalue3}}" max="45000"></progress>
    <div class="Polaris-ProgressBar__Indicator" style="width: 100%;"><span style="margin-left: -5%;" class="Polaris-ProgressBar__Label">10% Discount</span><span style="margin-left: 8%;" class="Polaris-ProgressBar__Label">Free Shipping</span><span style="margin-left: 8%;" class="Polaris-ProgressBar__Label">15% Discount</span></div>
  </div>
</div>
<div style="margin-top:25px; margin-bottom:50px;"> {{ my_variable55 }} </div>
</div>  
 
<!-- end progrssbar -->
0 Likes
NeilBDE
Excursionist
13 0 4

Thank you for the code @Kumar2573 It works well just one problem, How to change the color of the progress bar. I want this green. Also If anyone changes the quantity in the cart, it does not get updated automatically, customer has to click 'update cart' then the shipping message gets updated, Can you help?

0 Likes