How To Only Display the Cart Icon Once An Item Has Been Added

Product Pages are a great way to add an online shop to your Squarespace Website. However, have you ever wished you could hide the cart icon while the cart is empty?

The following video shows you how to only display the cart icon once an item has been added. The code used in the video was provided by AndreaDev in the Squarespace Forum. I have provided the code below.

The following code is used in the video.

In the Footer

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

/*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 });
}
})();
</script>

CSS

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

Here are some other posts you may like:

• How to Add a Multi-Layer Dropdown Box to Your Squarespace Website

• How To Add A Clickable Phone Number On Your Squarespace Website

• How to Have a Coloured Text Block Overlap A Parallax Image