Free Delivery Calculator

Highlighted
Excursionist
7 1 1

Hi,

 

I'm looking to implement a Free Delivery Calculator on the ajax-cart-template.liquid. I've already got it on my cart page, see the screenshots below. It can work on the ajax-cart but I was wondering if anyone could help with getting the variables to automatically update when a product is added/removed without having to refresh the page.

 

See a working example here: https://superdupercandle.company.

 

Any help would be greatly appreciated.

 

See below 'Spend £45.05 more to get Free UK Delivery!':

Screenshot 2020-05-29 at 09.35.30.png

Bit of a bodge, I know! But it works and looks good:

<center><div class="note"><center>
                {% assign afterdelivery = 5000 | minus:cart.total_price %}
                      {% if afterdelivery > 0 %} 

              {% raw %}Spend <b>{% endraw %}{{afterdelivery | money}}{% raw %}</b> more to get Free UK Delivery!
                <br></center><progress style=" width:100%;" value="{% endraw %}{{cart.total_price}}{% raw %}" max="5000"></progress><center>
                <style>

                  
                  progress {
    background-color: #cc2952 ;
  border: 0;
  height: 18px;
  border-radius: 9px;
}
progress::-webkit-progress-bar {
    background-color: #CACACA ;
  border: 0;
  height: 18px;
  border-radius: 9px;
}
progress::-webkit-progress-value {
    background-color: #cc2952 ;
  border: 0;
  height: 18px;
  border-radius: 9px;
}
progress::-moz-progress-bar {
    background-color: #CACACA ;
  border: 0;
  height: 18px;
  border-radius: 9px;
}
</style>
                {% endraw %}
{%else%}
                {% raw %}<h4>&#127873<br>Hoorah!</h4><p>You qualify for Free UK Delivery!</p>{% endraw %}
{%endif%}
                </center></div>         
              </center>

 

0 Likes