Hide Cart Until Item Is Added

• Look Demo
• How To Install
• Customize
• License

Hide the shopping cart until an item is been added to it. This plugin uses code injection and works with Squarespace 7.0 (Brine template family).

From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Footer Code Injection box.

Copy Code

<script>
 /**
  * Hide Cart until items in the cart
  */
 (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>

You do not need to change any values or properties.

This plugin comes with an Unlimited Use License. View License Terms