Skip to content
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.

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

fix: addresses several ui issues in shop #253

Open
wants to merge 10 commits into
base: Dev
Choose a base branch
from
16 changes: 9 additions & 7 deletions src/components/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,15 @@ function Header() {
{/* mobile menu */}
<div className="flex gap-4 items-center">
<div className="flex md:hidden">
<button
type="button"
aria-label="open cart"
onClick={() => setOpen(true)}
>
<CartIcon />
</button>
{pathname === "/shop" && (
<button
type="button"
aria-label="open cart"
onClick={() => setOpen(true)}
>
<CartIcon />
</button>
)}
</div>
{showNavlinks ? (
<button
Expand Down
10 changes: 9 additions & 1 deletion src/components/shop/CartDrawer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
import { Link, useNavigate } from "react-router-dom";
import { useDeleteSwag } from "../../hooks/Mutations/shop/useCartSwagg";
import formatPrice from "../../utilities/formatPrice";
import { categoryColors } from "../../utilities/utils";

function CartDrawer({ open, setOpen }) {
const navigate = useNavigate();
Expand Down Expand Up @@ -64,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 = () => {
Expand Down Expand Up @@ -148,7 +151,12 @@ function CartDrawer({ open, setOpen }) {
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col space-y-2 justify-start">
<div className="flex justify-between">
<p className="flex justify-between items-center gap-1 font-medium bg-[#FEF3F2] text-[#B42318] text-sm rounded-full px-2 py-1">
<p
style={categoryColors(
cartProduct.category
)}
className="flex justify-between items-center gap-1 font-medium bg-[#FEF3F2] text-[#B42318] text-sm rounded-full px-2 py-1"
>
<CiShoppingTag />
{cartProduct.category}
</p>
Expand Down
33 changes: 32 additions & 1 deletion src/components/shop/CartIcon.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,45 @@
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 = () => {
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 ">
<div className="flex justify-end relative">
<div className="w-12 md:w-16 h-12 md:h-16 rounded-full p-0.5 md:p-1 bg-white border shadow-lg cursor-pointer">
<div className="flex w-full h-full p-1.5 md:p-2 rounded-full justify-center items-center bg-green-dark">
<MdAddShoppingCart color="white" className="h-full w-full" />
</div>
{cartProducts.length > 0 && (
<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>{cartProducts?.length}</p>
</div>
)}
</div>
</div>
</SectionWrapper>
Expand Down
4 changes: 3 additions & 1 deletion src/components/shop/ProductCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ function ProductCard({ product }) {
className="flex justify-between pr-1"
>
<h3 className="text-md uppercase font-medium text-gray-600">
{product.name}
{product.name.length > 15
? `${product.name.slice(0, 18)}...`
: product.name}
</h3>
<div className="p-1 rounded-xl bg-green-dark/10">
{totalStock > 0 ? (
Expand Down
4 changes: 3 additions & 1 deletion src/pages/shop/SingleItemPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -177,7 +179,7 @@ export default function SingleItemPage() {
key={index}
src={image}
alt={singleSwag.name}
className={`m-auto min-w-full ${selectedImage === index + 1 ? "block" : "hidden"}`}
className={`m-auto rounded-lg min-w-full ${selectedImage === index + 1 ? "block" : "hidden"}`}
/>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/shop/sections/Banner/Carousal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ function Carousel() {
From KES {formatPrice(swagList[selectedIndex]?.price)}
</p>
<Link
to={`/shop/item/${isSuccess ? swagList[selectedIndex]?.slug : ""} `}
to={`/shop/item/${isSuccess ? swagList[selectedIndex]?.slug : ""}`}
className="text-white font-bold bg-gradient-to-b to-primary from-green-dark py-3 px-4 mb-2 rounded-md"
>
Shop Now
Expand Down
Loading