Hide Empty Cart

Hide Empty Cart

I was looking for a way to hide the shopping cart icon when the cart is empty. I couldn't find my answer online and reached out to support. They offered the following code, which works great.

I wanted to add it here, in case it may help someone else. The following code needs to be added to Site Settings > Header and Footer Code > Header Code.

  1. <script>
  2.     document.addEventListener("zp-event-cart-count", isCartEmpty);
  3.     function isCartEmpty(cartCountEvent){
  4.         let cartCount = document.querySelector("[data-zs-view-cart-count]");
  5.         let cartIcon = document.querySelector("[data-zs-view-cart]");
  6.         if((cartCountEvent.detail.cart_count === 0)){
  7.             cartCount.style.display = "none";
  8.             cartIcon.style.display = "none";
  9.         } else {
  10.             cartCount.style.display = "block";
  11.             cartIcon.style.display = "block";
  12.         }
  13.     }
  14. </script>

                            Zoho Desk Resources

                            • Desk Community Learning Series

                            • Digest

                            • Functions

                            • Meetups

                            • Kbase

                            • Resources

                            • Glossary

                            • Desk Marketplace

                            • MVP Corner

                            • Word of the Day

                                Zoho Marketing Automation

                                        Manage your brands on social media

                                                Zoho TeamInbox Resources

                                                  Zoho DataPrep Resources

                                                    Zoho CRM Plus Resources

                                                      Zoho Books Resources

                                                        Zoho Subscriptions Resources

                                                          Zoho Projects Resources

                                                            Zoho Sprints Resources

                                                              Qntrl Resources

                                                                Zoho Creator Resources

                                                                  Zoho WorkDrive Resources

                                                                    Zoho Campaigns Resources

                                                                      Zoho CRM Resources

                                                                      • CRM Community Learning Series

                                                                        CRM Community Learning Series

                                                                      • Tips


                                                                      • Functions


                                                                      • Meetups


                                                                      • Kbase


                                                                      • Resources


                                                                      • Digest


                                                                      • CRM Marketplace

                                                                        CRM Marketplace

                                                                      • MVP Corner

                                                                        MVP Corner

                                                                          Design. Discuss. Deliver.

                                                                          Create visually engaging stories with Zoho Show.

                                                                          Get Started Now