Sofine theme cart icon hide show when empty without page reloads

Store Design
1

I have sofine theme i want to hide cart icon in header when empty and show when item is added in cart without page reload…also when remove everything from cart i want to hide it again without page reload…i found some code but it works only when i reloads page

4

thanks for your response

5

any code snippet???if i share html

9

{% if section.settings.header_use_cart_home %}

<li class="box-minicart" 
id="cart-icon-wrapper">

<div class="cart-block box-has-content">

  <a href="{{ routes.cart_url }}"

     class="push_side header-icon"

     {% if request.page_type != 'cart' %}data-id="#js_cart_popup"{% endif %}

     title="{{ 'cart.general.title' | t }}">



    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

      <defs>

        <style>.cls-1{fill:none;}</style>

      </defs>

      <g data-name="Layer 2" id="Layer_2">

        <path d="M23.52,29h-15a5.48,5.48,0,0,1-5.31-6.83L6.25,9.76a1,1,0,0,1,1-.76H24a1,1,0,0,1,1,.7l3.78,12.16a5.49,5.49,0,0,1-.83,4.91A5.41,5.41,0,0,1,23.52,29ZM8,11,5.11,22.65A3.5,3.5,0,0,0,8.48,27h15a3.44,3.44,0,0,0,2.79-1.42,3.5,3.5,0,0,0,.53-3.13L23.28,11Z"/>

        <path d="M20,17a1,1,0,0,1-1-1V8a3,3,0,0,0-6,0v8a1,1,0,0,1-2,0V8A5,5,0,0,1,21,8v8A1,1,0,0,1,20,17Z"/>

      </g>

      <g id="frame">

        <rect class="cls-1" height="32" width="32"/>

      </g>

    </svg>



    <span class="header__counter js-cart-count"

          data-js-cart-count="{{ cart.item_count }}"

>

      {{ cart.item_count }}

    </span>



  </a>

</div>

{% endif %}

11

you are right but can you please help me with code

12

This Sofine – Sofine - Clean Minimal Shopify Theme ?

Then you can do this:

  1. Add a JS code to update cart icon properties to indicate how many items in your cart.
    For this you need to find this code in assets/jquery.interact-function.js:
 function updateCart(data) {
  $(".js-total-price").html(Shopify.formatMoney(data.total_price, theme.moneyFormat)).find('.money').css('opacity', '0').delay(500).fadeTo(50, 1);
  $(".js-cart-count").html(data.item_count);

Insert this line right below:

  $(".js-cart-count").attr('data-js-cart-count', data.item_count);
  1. Add CSS code to hide empty cart icon. This can be done in “Theme settings”-> “Custom CSS” or at the very bottom of your assets/global.css:
.minicart:has([data-js-cart-count="0"]) {
  display: none;
}

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it