Hide Empty Cart

Hide Empty Cart

I was looking for a way to hide the shopping cart icon when the cart is empty. I couldn't find my answer online and reached out to support. They offered the following code, which works great.

I wanted to add it here, in case it may help someone else. The following code needs to be added to Site Settings > Header and Footer Code > Header Code.

  1. <script>
  2.     document.addEventListener("zp-event-cart-count", isCartEmpty);
  3.     function isCartEmpty(cartCountEvent){
  4.         let cartCount = document.querySelector("[data-zs-view-cart-count]");
  5.         let cartIcon = document.querySelector("[data-zs-view-cart]");
  6.         if((cartCountEvent.detail.cart_count === 0)){
  7.             cartCount.style.display = "none";
  8.             cartIcon.style.display = "none";
  9.         } else {
  10.             cartCount.style.display = "block";
  11.             cartIcon.style.display = "block";
  12.         }
  13.     }
  14. </script>