Hide Cart Icon When Empty

What does this code do?

This code snippet will allow you hide the cart icon until an item is added.

Code Snippets

Squarespace 7.0

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Hide Cart Icon -->
<script>
  (function() {
    var carts = [].slice.call(document.querySelectorAll('.Cart'));
    carts.forEach(function(cart) {
      hideCart(cart);
    });

    function hideCart(cart) {
      var cartQty = cart.querySelector('.sqs-cart-quantity');

      function handler(target) {
        if (target.innerHTML === '0') {
          cart.setAttribute('hidden', '');
        } else {
          cart.removeAttribute('hidden');
        }
      }

      var observer = new MutationObserver(function(mutations) {
        handler(mutations[0].target);
      });

      handler(cartQty);

      observer.observe(cartQty, {
        childList: true
      });
    }
  })();
</script>

Copy and paste this code into Design > Custom CSS

/* Hide Cart Icon */
.Cart {
  transition: 0.35s;
}
.Cart[hidden] {
  display: none;
}

Squarespace 7.1

Copy and paste this code into the Custom CSS

/* Hide Cart Icon When Empty */
.header-actions-action--cart .cart-quantity-zero {
  display: none;
}