Hide Cart Until Item Is Added

Install Steps

Hide Cart Until Item Is Added

Submitted by Purple Giraffe Works with all template families

ezgif-3-8331124a47bd.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Footer Code Injection box.

<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');
     // 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>

Step Three

You do not need to change any values or properties.

Save and refresh the page. 👍

Moov Labs