Snippet file
{% comment %}
Renders free shipping message
Accepts:
- minimum_amount: {Number} Free shipping minimum amount
Usage:
{% render 'free-shipping', minimum_amount: minimum_amount %}
{% endcomment %}
{% liquid
assign minimum_amount_in_cents = minimum_amount | times: 100
assign total_price = cart.total_price
%}
<div class="drawer--amf free--shipping d-flex-col {% if cart == empty %}cart--drawer--empty{% endif %}">
{%- if total_price >= minimum_amount_in_cents -%}
<span class="free-shipping__text free-shipping__text--success">free US shipping</span>
{%- else -%}
{%- capture remaining_amount -%}<price-money class="price"><bdi>{{ total_price | minus: minimum_amount_in_cents | abs | money }}</bdi></price-money>{%- endcapture -%}
<span class="free-shipping__text">Spend {{remaining_amount}} more to enjoy Free Shipping</span>
{%- endif -%}
{%- capture progress_percent -%}{{ total_price | times: 1.0 | divided_by: minimum_amount_in_cents | at_most: 1 | times: 100 | round }}%{%- endcapture -%}
<span class="free-shipping__progress" style="--progress: {{ progress_percent }};">
<span class="free-shipping__data--progress">{{- progress_percent -}}</span>
</span>
</div>
Setting schema json file
{
"type": "checkbox",
"id": "show_free_shipping_message",
"default": true,
"label": "Free shipping"
},
{
"type": "text",
"id": "free_shipping_minimum_amount",
"default": "100",
"label": "Free shipping minimum amount",
"info": "Enter amount using number only."
},
Connect Snippet file
{% comment %} free shipping calc {% endcomment %}
{%- liquid
if settings.show_free_shipping_message and settings.free_shipping_minimum_amount != blank
assign free_shipping_minimum_amounts = settings.free_shipping_minimum_amount
render 'free-shipping', minimum_amount: free_shipping_minimum_amounts
endif
-%}
