[FEATURE]: Add Cart Item Count Badge on Navbar Cart Icon

[Git-Shubham14]

🚀 Feature Request

📌 Feature Description

Add a dynamic item count badge on the cart icon in the navbar
that shows the total number of items currently in the user's
cart, updating in real-time whenever items are added or removed.

---

❓ Problem Statement

Currently the navbar cart icon displays no count or indicator
of how many items are in the cart. Users have no way to see
at a glance how many items they have added without navigating
away to the full cart page — breaking the shopping flow and
causing unnecessary page switches.

---

💡 Proposed Solution

• A small circular red badge overlaid on the top-right
  corner of the cart icon in the navbar
• Badge displays the total number of items in the cart
  (e.g. "3")
• Updates dynamically whenever an item is added or removed
  without requiring a page reload
• Disappears entirely when the cart is empty (count = 0)
• Cart count read from and saved to localStorage so it
  persists across page navigation

---

🎯 Benefits

• Industry-standard UX pattern present on every major
  e-commerce platform (Amazon, Flipkart, Myntra, Ajio)
• Users always know their cart state without leaving
  the current page
• Reduces unnecessary navigations to the cart page
  just to check item count
• Improves overall shopping experience and keeps
  users focused on browsing
• Small, focused change with high visual impact

---

📷 Screenshots

Current Behavior:

Expected Behavior (Reference):

---

🛠️ Suggested Implementation

1. In frontend/components/navbar.html — add badge span
   inside the cart icon:

   <a href="cart.html" class="cart-icon-wrapper">
     <i class="fas fa-shopping-cart"></i>
     <span class="cart-badge" id="cart-count">0</span>
   </a>

2. In frontend/styles/components.css — style the badge:

   .cart-icon-wrapper {
     position: relative;
     display: inline-block;
   }
   .cart-badge {
     position: absolute;
     top: -8px;
     right: -8px;
     background: #e74c3c;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     display: none;
   }
   .cart-badge.visible {
     display: flex;
   }

3. In frontend/scripts/cart-drawer.js or utils.js —
   add a reusable function:

   function updateCartBadge() {
     const cart = JSON.parse(localStorage.getItem('cart')) || [];
     const totalItems = cart.reduce((sum, item) => 
       sum + (item.quantity || 1), 0);
     const badge = document.getElementById('cart-count');
     if (!badge) return;
     badge.textContent = totalItems;
     badge.classList.toggle('visible', totalItems > 0);
   }

   // Call on page load
   document.addEventListener('DOMContentLoaded', updateCartBadge);

4. Call updateCartBadge() wherever cart is modified
   (add to cart, remove from cart, quantity change).

---

🌐 Additional Context

• Files to modify: frontend/components/navbar.html,
  frontend/styles/components.css,
  frontend/scripts/cart-drawer.js or utils.js
• No backend changes required — purely frontend using localStorage
• Compatible with all modern browsers
• Reference: Amazon, Flipkart, Myntra all use this exact pattern
• Should work across all pages since navbar is a shared component

[Git-Shubham14]

Hii could you please assign this issue to me under SSOC '2026?

[AnushaRumi]

Hi @AshutoshDash1999 I'd like to work on this issue under SWOC.

My implementation plan is:

• Use the existing cart-badge and mobile-cart-badge elements in the navbar.
• Add a reusable updateCartBadge() function that reads the cart from localStorage and calculates the total item count.
• Call this function on page load (after the navbar is rendered) and whenever the cart is updated (add/remove/change quantity).
• Hide the badge when the cart is empty and show it when the count is greater than zero.

Please let me know if this approach aligns with the project's expectations. and i will be really greatful if u can assign this issue to me