banner massage update according to the cart price

 

 

 

Step 1：modify the announcement bar 

<div class="page-width">
<p class="announcement-bar__message {{ block.settings.text_alignment }} h5 nofree {% if cart.total_price > 499999 %} visually-hidden{% endif %}">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
<p class="announcement-bar__message freeshippg {{ block.settings.text_alignment }} h5 {% if cart.total_price < 500000 %} visually-hidden{% endif %}">
Free shipping
</p>
</div>

 

 

Step 2: add js in the theme.liquid

Use the DOMNodeInserted to listen the event change

 

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>

$("#cart-icon-bubble").bind('DOMNodeInserted', function(e) {      
var totalprice = $(".data-total-price").val();
if (totalprice < 499999){
$(".freeshippg").addClass("visually-hidden")
$(".nofree").removeClass("visually-hidden")
}
else {
$(".nofree").addClass("visually-hidden")
$(".freeshippg").removeClass("visually-hidden")
} 
});
</script>

 

 

Step 3: Add input tag to the cart-icon-bubble for the DOMNodeInserted

code need to added both to header.liquid and cart-icon-bubble.liquid

 

{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>

<input class="visually-hidden data-total-price" data-total-price="{{ cart.total_price }}" value="{{ cart.total_price }}">

</div>
{%- endif -%}