How to display the cart icon once an item is added Squarespace 7.1

This tutorial will show you how to only display the cart icon once an item has been added. The code used was provided by Purple Giraffe. It has been adpated for Squarespace 7.1

Complexity: Easy

---

Step 1

From your Squarespace account, simply add the following JavaScript below to Settings > Advanced > Code Injection > Footer and then save your changes.

<script>
 /**
  * Hide Cart until items in the cart
  */
 (function () {
   var carts = [].slice.call(document.querySelectorAll('.header-actions-action--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>

---

Step 2

Item added to cart

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.