Hide empty Squarespace cart, until a product is added.

cart.less

.Cart {
  transition: 300ms;
}

.Cart[hidden] {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
}

hide-empty-cart.js

/**
* Hide Cart until items in the cart
*/
(function () {
  var carts = document.querySelectorAll('.Cart')
  var mobileBarCart = document.querySelector('.Mobile-bar--bottom')

  Array.from(carts, function (cart) {
    hideCart(cart)
  })

  hideCart(mobileBarCart)

  /**
  * Hide Cart
  */
  function hideCart (cart) {
    var cartQty = cart.querySelector('.sqs-cart-quantity')

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

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

    // Hide/show the cart when the page is loaded
    handler(cartQty)

    // Hide/show the cart when an item was added/removed
    observer.observe(cartQty, {
      childList: true
    })
  }
})()