feat: display and keep track of cart items count in the cart icon

src/components/shop/CartDrawer.jsx

@@ -65,6 +65,8 @@ function CartDrawer({ open, setOpen }) {
   const handleDeleteSwag = (cartItemId) => {
     removeSwagFromCart(cartItemId);
     deleteFromLocalStorage(cartItemId);
+    // dispatch custom event to notify cart change
+    window.dispatchEvent(new Event("swagListUpdated"));
   };
 
   const handleCheckout = () => {

src/components/shop/CartIcon.jsx

@@ -1,7 +1,33 @@
+import { useEffect, useState } from "react";
 import { MdAddShoppingCart } from "react-icons/md";
 import SectionWrapper from "./SectionWrapper";
 
 function CartIcon() {
+  const [cartProducts, setCartProducts] = useState(() => {
+    // Initialize state with the value from localStorage if it exists
+    const storedProducts = localStorage.getItem("swagList");
+    return storedProducts ? JSON.parse(storedProducts) : [];
+  });
+
+  useEffect(() => {
+    // Event listener for storage changes in other tabs/windows
+    const handleStorageChange = (e) => {
+      const storedProducts = localStorage.getItem("swagList");
+      setCartProducts(storedProducts ? JSON.parse(storedProducts) : []);
+    };
+
+    // Listen for "storage" events,  whenever swagList is updated from another tab
+    window.addEventListener("storage", handleStorageChange);
+    // Listen for custom swagListUpdated events, fired whenever swagList is updated
+    window.addEventListener("swagListUpdated", handleStorageChange);
+
+    // Cleanup event listeners on unmount
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("swagListUpdated", handleStorageChange);
+    };
+  }, []);
+
   return (
     <SectionWrapper>
       <div className="flex justify-end relative">
@@ -10,7 +36,7 @@ function CartIcon() {
             <MdAddShoppingCart color="white" className="h-full w-full" />
           </div>
           <div className="absolute bottom-0 right-0 bg-[#B3261E] text-white text-xs font-medium rounded-full w-5 h-5 flex items-center justify-center">
-            <p>1</p>
+            <p>{cartProducts?.length}</p>
           </div>
         </div>
       </div>

src/pages/shop/SingleItemPage.jsx

@@ -128,6 +128,8 @@ export default function SingleItemPage() {
       });
       // Add to local storage
       addToLocalStorage();
+      // dispatch custom event to notify cart change
+      window.dispatchEvent(new Event("swagListUpdated"));
 
       // open cart
       setOpen(true);