Skip to content

Enhanced UX: Added Cart Badge, Clear Cart Feature, and 404 Routing #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
codeCraft-Ritik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhanced UX: Added Cart Badge, Clear Cart Feature, and 404 Routing #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,20 @@ function App() {
<Route path='/under40' element={<> <NavBar /> <Under10 /> </>} />
<Route path='/forher' element={<> <NavBar /> <ForHer /> </>} />
<Route path='/forhim' element={<> <NavBar /> <ForHim /> </>} />

{/* CATCH-ALL ROUTE (404 Page) -------- This must always be the last route inside <Routes> */}
<Route path="*" element={
<>
<NavBar />
<MobileNav />
<div className="text-center mt-20">
<h1 className="text-4xl font-bold fof">404 - Page Not Found</h1>
<p className="mt-4 fof">The page you are looking for does not exist.</p>
</div>
</>
} />


</Routes>

</BrowserRouter>
Expand Down
13 changes: 13 additions & 0 deletions src/components/CartHold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ const CartHold = () => {
return item.quantity * item.price;
}).reduce((totalPrice, singleItemPrice) => totalPrice + singleItemPrice, 0);

// Handler to clear the entire cart
const handleClearCart = () => {
dispatch(cartActions.clearCart());
};

return (
<div>
Expand All @@ -27,6 +31,15 @@ const CartHold = () => {
<div className=' flex flex-row relative gap-40 urCartItem'>
<p className=' text-2xl'> Your Cart </p>
<p className=' font-semibold fof lin text-xl'> {cartLen} items </p>

{/* Added Clear Cart Button */}
<button
onClick={handleClearCart}
className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-700 transition-colors fof"
>
Clear Cart
</button>

</div>


Expand Down
216 changes: 56 additions & 160 deletions src/components/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,188 +10,84 @@ import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';

const NavBar = () => {
const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false);
const [show3, setShow3] = useState(false);
const [show4, setShow4] = useState(false);
// Access the total quantity from the cart state
const cartQuantity = useSelector((state) => state.cart.totalQuantity);

// Refactored: Single state to track the active dropdown menu
const [activeDropdown, setActiveDropdown] = useState(null);

const showHandler = () => {
setShow(true)
setShow2(false)
setShow3(false)
setShow4(false)
const handleMouseOver = (menuName) => {
setActiveDropdown(menuName);
};

}

const showHandler2 = () => {
setShow2(true)
setShow(false)
setShow3(false)
setShow4(false)

}

const showHandler3 = () => {
setShow3(true)
setShow(false)
setShow2(false)
setShow4(false)
}

const showHandler4 = () => {
setShow4(true)
setShow(false)
setShow2(false)
setShow3(false)

}


const dontShowHandler = () => {
setShow(false)
setShow2(false)
setShow3(false)
setShow4(false)


}
const handleMouseLeave = () => {
setActiveDropdown(null);
};

return (
<div>


<header class="banner" role="banner">

<nav class="navbar" role="navigation" aria-label="menu">
<header className="banner" role="banner">
<nav className="navbar" role="navigation" aria-label="menu">

<Link to="/">
<img src={logo} className=" ml-32" />
<img src={logo} className=" ml-32" alt="logo" />
</Link>

<ul class="menuNav">
<li class="dropdown nav-link nav-link-fade-up transition-all duration-700" onMouseOver={showHandler} >
<ul className="menuNav">
{/* BEST SELLERS Dropdown */}
<li
className="dropdown nav-link nav-link-fade-up transition-all duration-700"
onMouseOver={() => handleMouseOver('bestSellers')}
>
BEST SELLERS
{show && <div>
<ul class="dropdown-nav" onMouseLeave={dontShowHandler} >

<BestSellers > </BestSellers>

{activeDropdown === 'bestSellers' && (
<ul className="dropdown-nav" onMouseLeave={handleMouseLeave}>
<BestSellers />
</ul>
)}
</li>

</div>}

</li >


<li class="dropdown nav-link nav-link-fade-up" onMouseOver={showHandler2} >
{/* GIFT SETS Dropdown */}
<li
className="dropdown nav-link nav-link-fade-up"
onMouseOver={() => handleMouseOver('giftSets')}
>
GIFT SETS
{show2 && <ul class="dropdown-nav dropdown-nav2" onMouseLeave={dontShowHandler}>
<GiftSets />
</ul>}

{activeDropdown === 'giftSets' && (
<ul className="dropdown-nav dropdown-nav2" onMouseLeave={handleMouseLeave}>
<GiftSets />
</ul>
)}
</li>


<li class="dropdown nav-link nav-link-fade-up" onMouseOver={showHandler3} >
{/* SHOP RANGE Dropdown */}
<li
className="dropdown nav-link nav-link-fade-up"
onMouseOver={() => handleMouseOver('shopRange')}
>
SHOP RANGE
{show3 && <ul class="dropdown-nav dropdown-nav3" onMouseLeave={dontShowHandler}>
<Body />
</ul>}

{activeDropdown === 'shopRange' && (
<ul className="dropdown-nav dropdown-nav3" onMouseLeave={handleMouseLeave}>
<Body />
</ul>
)}
</li>


<p className='navLine absolute bg-red-600 w-1 font-extralight h-9 z-50'> </p>

<p className='navLine absolute bg-red-600 w-1 font-extralight h-9 z-50'></p>
</ul>

<Link to="/cart">
<FaShoppingBag className=' text-2xl text-right ml-10 relative left-24' />
<Link to="/cart" className="relative flex items-center">
<FaShoppingBag className='text-2xl text-right ml-10 relative left-24' />
{cartQuantity > 0 && (
<span className="absolute top-[-10px] right-[-15px] bg-red-600 text-white text-xs font-bold px-2 py-0.5 rounded-full left-[115px] z-50">
{cartQuantity}
</span>
)}
</Link>
</nav >
</header >



</div >
</nav>
</header>
</div>
)
}

export default NavBar







/*






















<div class="container">
<div class="dropdown" onMouseOver={showHandler}>
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content" onMouseLeave={dontShowHandler}>
{show && <BestSellers /> }
</div>
</div>

<div class="dropdown" onMouseOver={showHandler2}>
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content" onMouseLeave={dontShowHandler}>
{show2 && <GiftSets /> }
</div>
</div>


<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>


<a href="#news">Link</a>
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>













*/

export default NavBar;
5 changes: 5 additions & 0 deletions src/redux-state/CartState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ const cartSlice = createSlice({
existingItem.totalPrice = existingItem.totalPrice - existingItem.price;
}
},
// New reducer to empty the entire cart at once
clearCart(state) {
state.items = [];
state.totalQuantity = 0;
},
}
})

Expand Down
20 changes: 19 additions & 1 deletion src/styles/Navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,4 +171,22 @@ li {
width: 1.5px !important;
top: 2.8rem !important;
background-color: #031D44;
}/*# sourceMappingURL=Navbar.css.map */
}/*# sourceMappingURL=Navbar.css.map */

/* Custom styling for the cart badge */
.navbar .relative {
position: relative;
display: flex;
align-items: center;
}

/* Custom styling for the cart badge */
.navbar span.bg-red-600 {
min-width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}