feat: added cart items quantity to cart icon

Green-Cycle · Jun 3, 2024 · 81f5bc7 · 81f5bc7
1 parent eefc3a5
commit 81f5bc7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/Frontend/src/components/Header.css b/Frontend/src/components/Header.css
@@ -124,6 +124,22 @@
   color: white;
 }
 
+.header__cart-quantity{
+  color: white;
+  position: absolute;
+  font-weight: bold;
+  font-size: 12px;
+  bottom: -5px;
+  right:-5px;
+  background-color: black;
+  width: 20px; 
+  height: 20px;
+  border-radius: 1000px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media screen and (max-width: 880px) {
   .header__hamburguer {
     display: flex;

diff --git a/Frontend/src/components/Header.jsx b/Frontend/src/components/Header.jsx
@@ -42,7 +42,6 @@ function Header() {
   const handleLogin = async () => {
     try {
       const data = await checkToken(token);
-      console.log(data);
       login(data);
     } catch (err) {
       console.log(err);
@@ -58,6 +57,7 @@ function Header() {
   };
 
   const toggleCart = () => {
+    console.log(calculateTotalItems(cartItems))
     setIsCartOpen((prevState) => !prevState);
   };
 
@@ -68,6 +68,15 @@ function Header() {
     navigate('/');
   };
 
+  // CALCULATE TOTAL ITEMS IN CART
+  function calculateTotalItems(cartItems) {
+    let totalItems = 0;
+    for (const item of cartItems) {
+      totalItems += item.quantity;
+    }
+    return totalItems;
+  }
+
   return (
     <div className='header'>
       <div className='header__top'>
@@ -82,12 +91,13 @@ function Header() {
           {!isLoginPage && !isRegisterPage && isLoggedIn && (
             <>
               {' '}
-              <button onClick={toggleCart}>
+              <button onClick={toggleCart} style={{position: 'relative'}}>
                 <img
                   src='/assets/shopping_bag.svg'
                   alt='account icon'
                   className='account-icon'
                 />
+                {calculateTotalItems(cartItems) !==0 && <div className='header__cart-quantity'><p>{calculateTotalItems(cartItems)}</p></div>}
               </button>
               <button
                 className='header__user-button'