學習來自 YT: compiletab
影片: Build & Deploy Full Stack E-commerce Website | Redux | MERN Stack Project
Github assets: 連結
Thank you, teacher
建立 & 部署全端商業網站
影片時間戳
00:00:00 – Introduction
00:01:56 – Demo
00:05:26 – Installation & set up
05:50:25 – Admin UI
07:20:25 – Backend setup
07:32:40 – user routes
08:05:40 – Products routes
09:18:56 – cart routes
10:13:26 – checkout routes
10:57:55 – Admin routes
11:58:30 – Redux
Integrate frontend with backend (整合前端與後端)
New Arrivals (新品上架)
// frontend/src/components/Products/NewArrivals.js
import React, { useEffect, useRef, useState } from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
import { Link } from "react-router-dom";
import axios from "axios";
const NewArrivals = () => {
const scrollRef = useRef(null); // 用於引用滾動容器的 DOM 元素
const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(0);
// const [scrollLeft, setScrollLeft] = useState(false);
// scrollLeft 是用來儲存滾動容器水平方向的偏移量，它應該是數字型態而非布林值。
const [scrollLeft, setScrollLeft] = useState(0);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(true);
const [newArrivals, setNewArrivals] = useState([]);
useEffect(() => {
const fetchNewArrivals = async () => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/products/new-arrivals`
);
setNewArrivals(response.data);
} catch (error) {
console.error(error);
}
};
fetchNewArrivals();
}, []);
const handleMouseDown = (e) => {
setIsDragging(true); // 開始拖曳
setStartX(e.pageX - scrollRef.current.offsetLeft); // 記錄滑鼠按下時的 X 座標，減去容器的偏移量
setScrollLeft(scrollRef.current.scrollLeft); // 記錄滾動容器當前的 scrollLeft (滾動位置)
};
const handleMouseMove = (e) => {
if (!isDragging) return; // 如果沒有正在拖曳，則不進行後續操作
const x = e.pageX - scrollRef.current.offsetLeft; // 計算滑鼠相對於容器的 X 座標
const walk = x - startX; // 計算滑鼠移動的距離
scrollRef.current.scrollLeft = scrollLeft - walk; // 根據滑鼠移動的距離更新滾動位置
};
const handleMouseUpOrLeave = () => {
setIsDragging(false); // 停止拖曳，將 isDraggin 設為 false
};
const scroll = (direction) => {
const scrollAmount = direction === "left" ? -300 : 300; // 根據方向決定滾動的距離
scrollRef.current.scrollBy({ left: scrollAmount, behaviour: "smooth" }); // 進行平滑滾動
};
// Update Scroll Buttons - 更新滾動的按鈕
const updateScrollButtons = () => {
const container = scrollRef.current; // 取得滾動容器的引用
if (container) {
const leftScroll = container.scrollLeft; // 取得當前滾動容器的滾動位置 (距離左邊的偏移量)
const rightScrollable =
container.scrollWidth > leftScroll + container.clientWidth; // 檢查是否還有內容可以向右滾動
setCanScrollLeft(leftScroll > 0); // 如果滾動位置大於 0，則可以向左滾動
setCanScrollRight(rightScrollable); // 如果總容器寬度大於當前滾動位置加上可視範圍，則可以向右滾動
}
// 用來調試，輸出滾動容器的一些狀態信息
// console.log({
// scrollLeft: container.scrollLeft, // 當前滾動位置
// clientWidth: container.clientWidth, // 容器的可見寬度
// containerScrollWidth: container.scrollWidth, // 容器內容的總寬度
// offsetLeft: scrollRef.current.offsetLeft, // 滾動容器相對於頁面左邊的偏移量
// });
};
useEffect(() => {
const container = scrollRef.current; // 取得滾動容器的 DOM 元素
if (container) {
// 如果容器存在，則添加滾動事件監聽器
container.addEventListener("scroll", updateScrollButtons);
// 呼叫一次 updateScrollButtons 來初始化滾動按鈕狀態
updateScrollButtons();
// 返回清理函數，在組件卸載時移除滾動事件監聽器
return () => container.removeEventListener("scroll", updateScrollButtons);
}
}, [newArrivals]);
return (
<section className="py-16 px-4 lg:px-0">
<div className="container mx-auto text-center mb-10 relative">
<h2 className="text-3xl font-bold mb-4">Explore New Arrivals</h2>
<p className="text-lg text-gray-600 mb-8">
Discover the latest styles straight off the runway, freshly added to
keep your wardrobe on the cutting edge of fashion.
</p>
{/* Scroll Buttons - 滾動按鈕 */}
<div className="absolute right-0 bottom-[-30px] flex space-x-2">
<button
onClick={() => scroll("left")}
disabled={!canScrollLeft}
className={`p-2 rounded border ${
canScrollLeft
? "bg-white text-black"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}`}
>
<FiChevronLeft className="text-2xl" />
</button>
<button
onClick={() => scroll("right")}
className={`p-2 rounded border ${
canScrollRight
? "bg-white text-black"
: "bg-gray-200 text-gray-400 cursor-not-allowed"
}`}
>
<FiChevronRight className="text-2xl" />
</button>
</div>
</div>
{/* Scrollable Content - 可滾動內容 */}
<div
ref={scrollRef}
className={`container mx-auto overflow-x-scroll flex space-x-6 relative ${
isDragging ? "cursor-grabbing" : "cursor-grab"
}`}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUpOrLeave}
onMouseLeave={handleMouseUpOrLeave}
>
{newArrivals.map((product) => (
<div
key={product._id}
className="min-w-[100%] sm:min-w-[50%] lg:min-w-[30%] relative"
>
<img
src={product.images[0]?.url}
alt={product.images[0]?.altText || product.name}
className="w-full h-[500px] object-cover rounded-lg"
draggable="false"
/>
<div className="absolute bottom-0 left-0 right-0 bg-opacity-50 backdrop-blur-md text-white p-4 rounded-b-lg">
<Link to={`/product/${product._id}`} className="block">
<h4 className="font-medium">{product.name}</h4>
<p className="mt-1">${product.price}</p>
</Link>
</div>
</div>
))}
</div>
</section>
);
};
export default NewArrivals;
客製化產品資料圖片
// backend/products.js
// 客製化產品資料圖片
// product.js:
const products = [
{
name: "Classic Oxford Button-Down Shirt",
description:
"This classic Oxford shirt is tailored for a polished yet casual look. Crafted from high-quality cotton, it features a button-down collar and a comfortable, slightly relaxed fit. Perfect for both formal and casual occasions, it comes with long sleeves, a button placket, and a yoke at the back. The shirt is finished with a gently rounded hem and adjustable button cuffs.",
price: 39.99,
discountPrice: 34.99,
countInStock: 20,
sku: "OX-SH-001",
category: "Top Wear",
brand: "Urban Threads",
sizes: ["S", "M", "L", "XL", "XXL"],
colors: ["Red", "Blue", "Yellow"],
collections: "Business Casual",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Classic Oxford Button-Down Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1531891570158-e71b35a485bc?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Classic Oxford Button-Down Shirt Back View",
},
],
rating: 4.5,
numReviews: 12,
},
{
name: "Slim-Fit Stretch Shirt",
description:
"A versatile slim-fit shirt perfect for business or evening events. Designed with a fitted silhouette, the added stretch provides maximum comfort throughout the day. Features a crisp turn-down collar, button placket, and adjustable cuffs.",
price: 29.99,
discountPrice: 24.99,
countInStock: 35,
sku: "SLIM-SH-002",
category: "Top Wear",
brand: "Modern Fit",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "Navy Blue", "Burgundy"],
collections: "Formal Wear",
material: "Cotton Blend",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1623880840102-7df0a9f3545b?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim-Fit Stretch Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1623975561190-49d8eab816bb?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim-Fit Stretch Shirt Back View",
},
],
rating: 4.8,
numReviews: 15,
},
{
name: "Casual Denim Shirt",
description:
"This casual denim shirt is made from lightweight cotton denim. It features a regular fit, snap buttons, and a straight hem. With Western-inspired details, this shirt is perfect for layering or wearing solo.",
price: 49.99,
discountPrice: 44.99,
countInStock: 15,
sku: "CAS-DEN-003",
category: "Top Wear",
brand: "Street Style",
sizes: ["S", "M", "L", "XL", "XXL"],
colors: ["Light Blue", "Dark Wash"],
collections: "Casual Wear",
material: "Denim",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1635205383144-402b892efa23?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Casual Denim Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1635205383325-aa3e6fb5ba55?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Casual Denim Shirt Back View",
},
],
rating: 4.6,
numReviews: 8,
},
{
name: "Printed Resort Shirt",
description:
"Designed for summer, this printed resort shirt is perfect for vacation or weekend getaways. It features a relaxed fit, short sleeves, and a camp collar. The all-over tropical print adds a playful vibe.",
price: 29.99,
discountPrice: 22.99,
countInStock: 25,
sku: "PRNT-RES-004",
category: "Top Wear",
brand: "Beach Breeze",
sizes: ["S", "M", "L", "XL"],
colors: ["Tropical Print", "Navy Palms"],
collections: "Vacation Wear",
material: "Viscose",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1635205383325-aa3e6fb5ba55?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Printed Resort Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1635205383450-e0fee6fe73c4?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Printed Resort Shirt Back View",
},
],
rating: 4.4,
numReviews: 10,
},
{
name: "Slim-Fit Easy-Iron Shirt",
description:
"A slim-fit, easy-iron shirt in woven cotton fabric with a fitted silhouette. Features a turn-down collar, classic button placket, and a yoke at the back. Long sleeves and adjustable button cuffs with a rounded hem.",
price: 34.99,
discountPrice: 29.99,
countInStock: 30,
sku: "SLIM-EIR-005",
category: "Top Wear",
brand: "Urban Chic",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Gray"],
collections: "Business Wear",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1679101893304-045625840a94?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim-Fit Easy-Iron Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1679101893301-6c87f1508e2e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim-Fit Easy-Iron Shirt Front View",
},
],
rating: 5,
numReviews: 14,
},
{
name: "Polo T-Shirt with Ribbed Collar",
description:
"A wardrobe classic, this polo t-shirt features a ribbed collar and cuffs. Made from 100% cotton, it offers breathability and comfort throughout the day. Tailored in a slim fit with a button placket at the neckline.",
price: 24.99,
discountPrice: 19.99,
countInStock: 50,
sku: "POLO-TSH-006",
category: "Top Wear",
brand: "Polo Classics",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Navy", "Red"],
collections: "Casual Wear",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1619533394727-57d522857f89?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Polo T-Shirt Front View",
},
{
url: "https://images.unsplash.com/photo-1618886614638-80e3c103d31a?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Polo T-Shirt Back View",
},
],
rating: 4.3,
numReviews: 22,
},
{
name: "Oversized Graphic T-Shirt",
description:
"An oversized graphic t-shirt that combines comfort with street style. Featuring bold prints across the chest, this relaxed fit tee offers a modern vibe, perfect for pairing with jeans or joggers.",
price: 19.99,
discountPrice: 15.99,
countInStock: 40,
sku: "OVS-GRF-007",
category: "Top Wear",
brand: "Street Vibes",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "Gray"],
collections: "Streetwear",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1492288991661-058aa541ff43?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Oversized Graphic T-Shirt Front View",
},
],
rating: 4.6,
numReviews: 30,
},
{
name: "Regular-Fit Henley Shirt",
description:
"A modern take on the classic Henley shirt, this regular-fit style features a buttoned placket and ribbed cuffs. Made from a soft cotton blend with a touch of elastane for stretch.",
price: 22.99,
discountPrice: 18.99,
countInStock: 35,
sku: "REG-HEN-008",
category: "Top Wear",
brand: "Heritage Wear",
sizes: ["S", "M", "L", "XL"],
colors: ["Heather Gray", "Olive", "Black"],
collections: "Casual Wear",
material: "Cotton Blend",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1519764622345-23439dd774f7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Regular-Fit Henley Shirt Front View",
},
],
rating: 4.5,
numReviews: 25,
},
{
name: "Long-Sleeve Thermal Tee",
description:
"Stay warm with this long-sleeve thermal tee, made from soft cotton with a waffle-knit texture. Ideal for layering in cooler months, the slim-fit design ensures a snug yet comfortable fit.",
price: 27.99,
discountPrice: 22.99,
countInStock: 20,
sku: "LST-THR-009",
category: "Top Wear",
brand: "Winter Basics",
sizes: ["S", "M", "L", "XL", "XXL"],
colors: ["Charcoal", "Dark Green", "Navy"],
collections: "Winter Essentials",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1552642986-ccb41e7059e7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Long-Sleeve Thermal Tee Front View",
},
],
rating: 4.4,
numReviews: 18,
},
{
name: "V-Neck Classic T-Shirt",
description:
"A classic V-neck t-shirt for everyday wear. This regular-fit tee is made from breathable cotton and features a clean, simple design with a flattering V-neckline. Lightweight fabric and soft texture make it perfect for casual looks.",
price: 14.99,
discountPrice: 11.99,
countInStock: 60,
sku: "VNECK-CLS-010",
category: "Top Wear",
brand: "Everyday Comfort",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Black", "Navy"],
collections: "Basics",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1505632958218-4f23394784a6?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "V-Neck Classic T-Shirt Front View",
},
],
rating: 4.7,
numReviews: 28,
},
{
name: "Slim Fit Joggers",
description:
"Slim-fit joggers with an elasticated drawstring waist. Features ribbed hems and side pockets. Ideal for casual outings or workouts.",
price: 40,
discountPrice: 35,
countInStock: 20,
sku: "BW-001",
category: "Bottom Wear",
brand: "ActiveWear",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "Gray", "Navy"],
collections: "Casual Collection",
material: "Cotton Blend",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1599847022902-f64cc1ae97fd?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim Fit Joggers Front View",
},
],
rating: 4.5,
numReviews: 12,
},
{
name: "Cargo Joggers",
description:
"Relaxed-fit cargo joggers featuring multiple pockets for functionality. Drawstring waist and cuffed hems for a modern look.",
price: 45,
discountPrice: 40,
countInStock: 15,
sku: "BW-002",
category: "Bottom Wear",
brand: "UrbanStyle",
sizes: ["S", "M", "L", "XL"],
colors: ["Olive", "Black"],
collections: "Urban Collection",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1605192554106-d549b1b975cd?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Cargo Joggers Front View",
},
],
rating: 4.7,
numReviews: 20,
},
{
name: "Tapered Sweatpants",
description:
"Tapered sweatpants designed for comfort. Elastic waistband with adjustable drawstring, perfect for lounging or athletic activities.",
price: 35,
discountPrice: 30,
countInStock: 25,
sku: "BW-003",
category: "Bottom Wear",
brand: "ChillZone",
sizes: ["S", "M", "L", "XL"],
colors: ["Gray", "Charcoal", "Blue"],
collections: "Lounge Collection",
material: "Fleece",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1636590416708-68a4867918f1?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Tapered Sweatpants Front View",
},
],
rating: 4.3,
numReviews: 18,
},
{
name: "Denim Jeans",
description:
"Classic slim-fit denim jeans with a slight stretch for comfort. Features a zip fly and five-pocket styling for a timeless look.",
price: 60,
discountPrice: 50,
countInStock: 30,
sku: "BW-004",
category: "Bottom Wear",
brand: "DenimCo",
sizes: ["S", "M", "L", "XL"],
colors: ["Dark Blue", "Light Blue"],
collections: "Denim Collection",
material: "Denim",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1589591990984-68a20755020d?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Denim Jeans Front View",
},
],
rating: 4.6,
numReviews: 22,
},
{
name: "Chino Pants",
description:
"Slim-fit chino pants made from stretch cotton twill. Features a button closure and front and back pockets. Ideal for both casual and semi-formal wear.",
price: 55,
discountPrice: 48,
countInStock: 40,
sku: "BW-005",
category: "Bottom Wear",
brand: "CasualLook",
sizes: ["S", "M", "L", "XL"],
colors: ["Beige", "Navy", "Black"],
collections: "Smart Casual Collection",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1651448914541-db2ec9fedad1?q=80&w=1969&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Chino Pants Front View",
},
],
rating: 4.8,
numReviews: 15,
},
{
name: "Track Pants",
description:
"Comfortable track pants with an elasticated waistband and tapered leg. Features side stripes for a sporty look. Ideal for athletic and casual wear.",
price: 40,
discountPrice: 35,
countInStock: 20,
sku: "BW-006",
category: "Bottom Wear",
brand: "SportX",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "Red", "Blue"],
collections: "Activewear Collection",
material: "Polyester",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1584940120743-8981ca35b012?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Track Pants Front View",
},
],
rating: 4.2,
numReviews: 17,
},
{
name: "Slim Fit Trousers",
description:
"Tailored slim-fit trousers with belt loops and a hook-and-eye closure. Suitable for formal occasions or smart-casual wear.",
price: 65,
discountPrice: 55,
countInStock: 15,
sku: "BW-007",
category: "Bottom Wear",
brand: "ExecutiveStyle",
sizes: ["M", "L", "XL"],
colors: ["Gray", "Black"],
collections: "Office Wear",
material: "Polyester",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1480429370139-e0132c086e2a?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Slim Fit Trousers Front View",
},
],
rating: 4.7,
numReviews: 10,
},
{
name: "Cargo Pants",
description:
"Loose-fit cargo pants with multiple utility pockets. Features adjustable ankle cuffs and a drawstring waist for versatility and comfort.",
price: 50,
discountPrice: 45,
countInStock: 25,
sku: "BW-008",
category: "Bottom Wear",
brand: "StreetWear",
sizes: ["S", "M", "L", "XL"],
colors: ["Olive", "Brown", "Black"],
collections: "Street Style Collection",
material: "Cotton",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1552337480-48918be048b9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Cargo Pants Front View",
},
],
rating: 4.5,
numReviews: 13,
},
{
name: "Relaxed Fit Sweatpants",
description:
"Relaxed-fit sweatpants made from soft fleece fabric. Features an elastic waist and adjustable drawstring for a custom fit.",
price: 35,
discountPrice: 30,
countInStock: 35,
sku: "BW-009",
category: "Bottom Wear",
brand: "LoungeWear",
sizes: ["S", "M", "L", "XL"],
colors: ["Gray", "Black", "Navy"],
collections: "Lounge Collection",
material: "Fleece",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1581382575275-97901c2635b7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Relaxed Fit Sweatpants Front View",
},
],
rating: 4.3,
numReviews: 14,
},
{
name: "Formal Dress Pants",
description:
"Classic formal dress pants with a slim fit. Made from lightweight, wrinkle-resistant fabric for a polished look at the office or formal events.",
price: 70,
discountPrice: 60,
countInStock: 20,
sku: "BW-010",
category: "Bottom Wear",
brand: "ElegantStyle",
sizes: ["M", "L", "XL"],
colors: ["Black", "Navy"],
collections: "Formal Collection",
material: "Polyester",
gender: "Men",
images: [
{
url: "https://images.unsplash.com/photo-1555097074-b16ec85d6b3e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Formal Dress Pants Front View",
},
],
rating: 4.9,
numReviews: 8,
},
{
name: "High-Waist Skinny Jeans",
description:
"High-waist skinny jeans in stretch denim with a button and zip fly. Features a flattering fit that hugs your curves and enhances your silhouette.",
price: 50,
discountPrice: 45,
countInStock: 30,
sku: "BW-W-001",
category: "Bottom Wear",
brand: "DenimStyle",
sizes: ["XS", "S", "M", "L", "XL"],
colors: ["Dark Blue", "Black", "Light Blue"],
collections: "Denim Collection",
material: "Denim",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "High-Waist Skinny Jeans",
},
],
rating: 4.8,
numReviews: 20,
},
{
name: "Wide-Leg Trousers",
description:
"Flowy, wide-leg trousers with a high waist and side pockets. Perfect for an elegant look that combines comfort and style.",
price: 60,
discountPrice: 55,
countInStock: 25,
sku: "BW-W-002",
category: "Bottom Wear",
brand: "ElegantWear",
sizes: ["S", "M", "L", "XL"],
colors: ["Beige", "Black", "White"],
collections: "Formal Collection",
material: "Polyester",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=1727&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Wide-Leg Trousers Front View",
},
],
rating: 4.7,
numReviews: 15,
},
{
name: "Stretch Leggings",
description:
"Soft, stretch leggings in a high-rise style. Perfect for lounging, working out, or casual wear, with a smooth fit that flatters your body.",
price: 25,
discountPrice: 20,
countInStock: 40,
sku: "BW-W-003",
category: "Bottom Wear",
brand: "ComfyFit",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "Gray", "Navy"],
collections: "Activewear Collection",
material: "Cotton Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1609505848912-b7c3b8b4beda?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Stretch Leggings Front View",
},
],
rating: 4.5,
numReviews: 30,
},
{
name: "Pleated Midi Skirt",
description:
"Elegant pleated midi skirt with a high waistband and soft fabric that drapes beautifully. Ideal for both formal and casual occasions.",
price: 55,
discountPrice: 50,
countInStock: 20,
sku: "BW-W-004",
category: "Bottom Wear",
brand: "ChicStyle",
sizes: ["S", "M", "L"],
colors: ["Pink", "Navy", "Black"],
collections: "Spring Collection",
material: "Polyester",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1441123694162-e54a981ceba5?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Pleated Midi Skirt Front View",
},
],
rating: 4.6,
numReviews: 18,
},
{
name: "Flared Palazzo Pants",
description:
"High-waist palazzo pants with a loose, flowing fit. Comfortable and stylish, making them perfect for casual outings or beach days.",
price: 45,
discountPrice: 40,
countInStock: 35,
sku: "BW-W-005",
category: "Bottom Wear",
brand: "BreezyVibes",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Beige", "Light Blue"],
collections: "Summer Collection",
material: "Linen Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Flared Palazzo Pants Front View",
},
],
rating: 4.4,
numReviews: 22,
},
{
name: "High-Rise Joggers",
description:
"Comfortable high-rise joggers with an elastic waistband and drawstring for a perfect fit. Great for lounging or working out.",
price: 40,
discountPrice: 35,
countInStock: 30,
sku: "BW-W-006",
category: "Bottom Wear",
brand: "ActiveWear",
sizes: ["XS", "S", "M", "L"],
colors: ["Black", "Gray", "Pink"],
collections: "Loungewear Collection",
material: "Cotton Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "High-Rise Joggers Front View",
},
],
rating: 4.3,
numReviews: 25,
},
{
name: "Paperbag Waist Shorts",
description:
"Stylish paperbag waist shorts with a belted waist and wide legs. Perfect for summer outings and keeping cool in style.",
price: 35,
discountPrice: 30,
countInStock: 20,
sku: "BW-W-007",
category: "Bottom Wear",
brand: "SunnyStyle",
sizes: ["S", "M", "L"],
colors: ["White", "Khaki", "Blue"],
collections: "Summer Collection",
material: "Cotton",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1496440737103-cd596325d314?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Paperbag Waist Shorts Front View",
},
],
rating: 4.5,
numReviews: 19,
},
{
name: "Stretch Denim Shorts",
description:
"Comfortable stretch denim shorts with a high-waisted fit and raw hem. Perfect for pairing with your favorite tops during warmer months.",
price: 40,
discountPrice: 35,
countInStock: 25,
sku: "BW-W-008",
category: "Bottom Wear",
brand: "DenimStyle",
sizes: ["S", "M", "L", "XL"],
colors: ["Blue", "Black", "White"],
collections: "Denim Collection",
material: "Denim",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1541823709867-1b206113eafd?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Stretch Denim Shorts Front View",
},
],
rating: 4.7,
numReviews: 15,
},
{
name: "Culottes",
description:
"Wide-leg culottes with a flattering high waist and cropped length. The perfect blend of comfort and style for any casual occasion.",
price: 50,
discountPrice: 45,
countInStock: 30,
sku: "BW-W-009",
category: "Bottom Wear",
brand: "ChicStyle",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "White", "Olive"],
collections: "Casual Collection",
material: "Polyester",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1526265218618-bdbe4fdb5360?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Culottes Front View",
},
],
rating: 4.6,
numReviews: 23,
},
{
name: "Classic Pleated Trousers",
description:
"Timeless pleated trousers with a tailored fit. A wardrobe essential for workwear or formal occasions.",
price: 70,
discountPrice: 65,
countInStock: 25,
sku: "BW-W-010",
category: "Bottom Wear",
brand: "ElegantWear",
sizes: ["S", "M", "L", "XL"],
colors: ["Navy", "Black", "Gray"],
collections: "Formal Collection",
material: "Wool Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1496217590455-aa63a8350eea?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Classic Pleated Trousers Front View",
},
],
rating: 4.8,
numReviews: 20,
},
{
name: "Knitted Cropped Top",
description:
"A stylish knitted cropped top with a flattering fitted silhouette. Perfect for pairing with high-waisted jeans or skirts for a casual look.",
price: 40,
discountPrice: 35,
countInStock: 25,
sku: "TW-W-001",
category: "Top Wear",
brand: "ChicKnit",
sizes: ["S", "M", "L"],
colors: ["Beige", "White"],
collections: "Knits Collection",
material: "Cotton Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1539655382699-69e1d1979ee0?q=80&w=2126&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Knitted Cropped Top",
},
],
rating: 4.6,
numReviews: 15,
},
{
name: "Boho Floral Blouse",
description:
"Flowy boho blouse with floral patterns, featuring a relaxed fit and balloon sleeves. Ideal for casual summer days.",
price: 50,
discountPrice: 45,
countInStock: 30,
sku: "TW-W-002",
category: "Top Wear",
brand: "BohoVibes",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Pink"],
collections: "Summer Collection",
material: "Viscose",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1515734674582-29010bb37906?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Boho Floral Blouse",
},
],
rating: 4.7,
numReviews: 20,
},
{
name: "Casual T-Shirt",
description:
"A soft, breathable casual t-shirt with a classic fit. Features a round neckline and short sleeves, perfect for everyday wear.",
price: 25,
discountPrice: 20,
countInStock: 50,
sku: "TW-W-003",
category: "Top Wear",
brand: "ComfyTees",
sizes: ["S", "M", "L", "XL"],
colors: ["Black", "White", "Gray"],
collections: "Essentials",
material: "Cotton",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1647957867246-278e4d0f23fa?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Casual T-Shirt",
},
],
rating: 4.5,
numReviews: 25,
},
{
name: "Off-Shoulder Top",
description:
"An elegant off-shoulder top with ruffled sleeves and a flattering fit. Ideal for adding a touch of femininity to your outfit.",
price: 45,
discountPrice: 40,
countInStock: 35,
sku: "TW-W-004",
category: "Top Wear",
brand: "Elegance",
sizes: ["S", "M", "L"],
colors: ["Red", "White", "Blue"],
collections: "Evening Collection",
material: "Polyester",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Off-Shoulder Top",
},
],
rating: 4.7,
numReviews: 18,
},
{
name: "Lace-Trimmed Cami Top",
description:
"A delicate cami top with lace trim and adjustable straps. The lightweight fabric makes it perfect for layering or wearing alone during warmer weather.",
price: 35,
discountPrice: 30,
countInStock: 40,
sku: "TW-W-005",
category: "Top Wear",
brand: "DelicateWear",
sizes: ["S", "M", "L"],
colors: ["Black", "White"],
collections: "Lingerie-Inspired",
material: "Silk Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1653919937297-4645e5e7806e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Lace-Trimmed Cami Top",
},
],
rating: 4.8,
numReviews: 22,
},
{
name: "Graphic Print Tee",
description:
"A trendy graphic print tee with a relaxed fit. Pair it with jeans or skirts for a cool and casual look.",
price: 30,
discountPrice: 25,
countInStock: 45,
sku: "TW-W-006",
category: "Top Wear",
brand: "StreetStyle",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Black"],
collections: "Urban Collection",
material: "Cotton",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1734686885055-3e34120b0520?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Graphic Print Tee",
},
],
rating: 4.6,
numReviews: 30,
},
{
name: "Ribbed Long-Sleeve Top",
description:
"A cozy ribbed long-sleeve top that offers comfort and style. Perfect for layering during cooler months.",
price: 55,
discountPrice: 50,
countInStock: 30,
sku: "TW-W-007",
category: "Top Wear",
brand: "ComfortFit",
sizes: ["S", "M", "L", "XL"],
colors: ["Gray", "Pink", "Brown"],
collections: "Fall Collection",
material: "Cotton Blend",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1564485377539-4af72d1f6a2f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Ribbed Long-Sleeve Top",
},
],
rating: 4.7,
numReviews: 26,
},
{
name: "Ruffle-Sleeve Blouse",
description:
"A lightweight ruffle-sleeve blouse with a flattering fit. Perfect for a feminine touch to any outfit.",
price: 45,
discountPrice: 40,
countInStock: 20,
sku: "TW-W-008",
category: "Top Wear",
brand: "FeminineWear",
sizes: ["S", "M", "L"],
colors: ["White", "Navy", "Lavender"],
collections: "Summer Collection",
material: "Viscose",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1629709200392-f3051760e529?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Ruffle-Sleeve Blouse",
},
],
rating: 4.5,
numReviews: 19,
},
{
name: "Classic Button-Up Shirt",
description:
"A versatile button-up shirt that can be dressed up or down. Made from soft fabric with a tailored fit, it's perfect for both casual and formal occasions.",
price: 60,
discountPrice: 55,
countInStock: 25,
sku: "TW-W-009",
category: "Top Wear",
brand: "ClassicStyle",
sizes: ["S", "M", "L", "XL"],
colors: ["White", "Light Blue", "Black"],
collections: "Office Collection",
material: "Cotton",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1582220225382-ba7e86e9ea5a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "Classic Button-Up Shirt",
},
],
rating: 4.8,
numReviews: 25,
},
{
name: "V-Neck Wrap Top",
description:
"A chic v-neck wrap top with a tie waist. Its elegant style makes it perfect for both casual and semi-formal occasions.",
price: 50,
discountPrice: 45,
countInStock: 30,
sku: "TW-W-010",
category: "Top Wear",
brand: "ChicWrap",
sizes: ["S", "M", "L"],
colors: ["Red", "Black", "White"],
collections: "Evening Collection",
material: "Polyester",
gender: "Women",
images: [
{
url: "https://images.unsplash.com/photo-1612904370193-72d578a78d67?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
altText: "V-Neck Wrap Top",
},
],
rating: 4.7,
numReviews: 22,
},
];
module.exports = products;
初始化資料庫資料
// Terminal - 終端機
// backend
npm run seed
Best Seller (暢銷商品)、Top Wear for Women (女裝上衣)
// frontend/src/pages/Home.jsx
import React, { useEffect, useState } from "react";
import Hero from "../components/Layout/Hero";
import GenderCollectionSection from "../components/Products/GenderCollectionSection";
import NewArrivals from "../components/Products/NewArrivals";
import ProductDetails from "../components/Products/ProductDetails";
import ProductGrid from "../components/Products/ProductGrid";
import FeaturedCollection from "../components/Products/FeaturedCollection";
import FeaturesSection from "../components/Products/FeaturesSection";
import { useDispatch, useSelector } from "react-redux";
import { fetchProductsByFilters } from "../redux/slices/productsSlice";
import axios from "axios";
const Home = () => {
const dispatch = useDispatch();
const { products, loading, error } = useSelector((state) => state.products);
const [bestSellerProduct, setBestSellerProduct] = useState(null);
useEffect(() => {
// Fetch products for a specific collection - 獲取特定系列的產品
dispatch(
fetchProductsByFilters({
gender: "Women",
category: "Bottom Wear",
limit: 8,
})
);
// Fetch best seller product - 獲取暢銷商品
const fetchBestSeller = async () => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/products/best-seller`
);
setBestSellerProduct(response.data);
} catch (error) {
console.error(error);
}
};
fetchBestSeller();
}, [dispatch]);
return (
<div>
<Hero />
<GenderCollectionSection />
<NewArrivals />
{/* Best Seller - 暢銷商品 */}
<h2 className="text-3xl text-center font-bold mb-4">Best Seller</h2>
{bestSellerProduct ? (
<ProductDetails productId={bestSellerProduct._id} />
) : (
<p className="text-center">Loading best seller product ...</p>
)}
<div className="container mx-auto">
<h2 className="text-3xl text-center font-bold mb-4">
Top Wears for Women
</h2>
<ProductGrid products={products} loading={loading} error={error} />
</div>
<FeaturedCollection />
<FeaturesSection />
</div>
);
};
export default Home;
// frontend/src/components/Products/ProductGrid.jsx
import React from "react";
import { Link } from "react-router-dom";
const ProductGrid = ({ products, loading, error }) => {
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {error}</p>;
}
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{products.map((product, index) => (
<Link key={index} to={`/product/${product._id}`} className="block">
<div className="bg-white p-4 rounded-lg">
<div className="w-full h-96 mb-4">
<img
src={product.images[0].url}
alt={product.images[0].altText || product.name}
className="w-full h-full object-cover rounded-lg"
/>
</div>
<h3 className="text-sm mb-2">{product.name}</h3>
<p className="text-gray-500 font-medium text-sm tracking-tighter">
$ {product.price}
</p>
</div>
</Link>
))}
</div>
);
};
export default ProductGrid;
// frontend/src/components/Products/ProductDetails.jsx
import React, { useEffect, useState } from "react";
import { toast } from "sonner";
import ProductGrid from "./ProductGrid";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
fetchProductDetails,
fetchSimilarProducts,
} from "../../redux/slices/productsSlice";
import { addToCart } from "../../redux/slices/cartSlice";
const ProductDetails = ({ productId }) => {
const { id } = useParams();
const dispatch = useDispatch();
const { selectedProduct, loading, error, similarProducts } = useSelector(
(state) => state.products
);
const { user, guestId } = useSelector((state) => state.auth);
const [mainImage, setMainImage] = useState(""); // 用來存儲主圖像的狀態，初始值為空字符串
const [selectedSize, setSelectedSize] = useState(""); // 用來存儲選擇的尺碼的狀態，初始值為空字符串
const [selectedColor, setSelectedColor] = useState(""); // 用來存儲選擇的顏色的狀態，初始值為空字符串
const [quantity, setQuantity] = useState(1); // 用來存儲選擇的購買數量的狀態，初始值為 1
const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 用來控制按鈕是否禁用的狀態，初始值為 false (按鈕可用)
const productFetchId = productId || id;
useEffect(() => {
if (productFetchId) {
dispatch(fetchProductDetails(productFetchId));
dispatch(fetchSimilarProducts({ id: productFetchId }));
}
}, [dispatch, productFetchId]);
// 使用 useEffect 當 selectedProduct 變化時更新主圖片
useEffect(() => {
// 檢查 selectedProduct 是否有圖片，並且圖片陣列長度大於 0
if (selectedProduct?.images?.length > 0) {
// 更新主圖片為第一張圖片的 URL
setMainImage(selectedProduct.images[0].url);
}
}, [selectedProduct]); // 當 selectedProduct 變化時執行這個效果
// 定義一個函數來處理購買數量的增減操作
const handleQuantityChange = (action) => {
// 如果 action 是 "plus"，則增加數量
if (action === "plus") setQuantity((prev) => prev + 1);
// 如果 action 是 "minus" 且數量大於 1，則減少數量
if (action === "minus" && quantity > 1) setQuantity((prev) => prev - 1);
};
// 定義函數處理將商品加入購物車的操作
const handleAddToCart = () => {
// 檢查用戶是否選擇了尺碼和顏色
if (!selectedSize || !selectedColor) {
// 如果沒有選擇尺碼或顏色，顯示錯誤通知
toast.error("Please select a size and color before adding to cart.", {
duration: 1000, // 設置錯誤通知顯示 1 秒
});
return; // 退出函數，不執行後續操作
}
// 禁用按鈕，防止重複點擊
setIsButtonDisabled(true);
dispatch(
addToCart({
productId: productFetchId,
quantity,
size: selectedSize,
color: selectedColor,
guestId,
userId: user?._id,
})
)
.then(() => {
toast.success("Product added to cart!", {
duration: 1000,
});
})
.finally(() => {
setIsButtonDisabled(false);
});
};
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {error}</p>;
}
return (
<div className="p-6">
{selectedProduct && (
<div className="max-w-6xl mx-auto bg-white p-8 rounded-lg">
<div className="flex flex-col md:flex-row">
{/* Left Thumbnails - 左側縮圖 */}
<div className="hidden md:flex flex-col space-y-4 mr-6">
{selectedProduct.images.map((image, index) => (
<img
key={index}
src={image.url}
alt={image.altText || `Thumbnail ${index}`}
className={`w-20 h-20 object-cover rounded-lg cursor-pointer border ${
mainImage === image.url ? "border-black" : "border-gray-300"
}`}
onClick={() => setMainImage(image.url)}
/>
))}
</div>
{/* Main Image - 主要的圖片 */}
<div className="md:w-1/2">
<div className="mb-4">
{/* 僅當 mainImage 不是空字符串時，才渲染圖片 */}
{mainImage && (
<img
src={mainImage}
alt="Main Product"
className="w-full h-auto object-cover rounded-lg"
/>
)}
</div>
</div>
{/* Mobile Thumbnail - 手機板型縮圖 */}
<div className="md:hidden flex overflow-x-scroll space-x-4 mb-4">
{selectedProduct.images.map((image, index) => (
<img
key={index}
src={image.url}
alt={image.altText || `Thumbnail ${index}`}
className={`w-20 h-20 object-cover rounded-lg cursor-pointer border ${
mainImage === image.url ? "border-black" : "border-gray-300"
}`}
onClick={() => setMainImage(image.url)}
/>
))}
</div>
{/* Right Side - 右側 */}
<div className="md:w-1/2 md:ml-10">
<h1 className="text-2xl md:text-3xl font-semibold mb-2">
{selectedProduct.name}
</h1>
<p className="text-lg text-gray-600 mb-1 line-through">
{selectedProduct.originalPrice &&
`${selectedProduct.originalPrice}`}
</p>
<p className="text-xl text-gray-500 mb-2">
$ {selectedProduct.price}
</p>
<p className="text-gray-600 mb-4">
{selectedProduct.description}
</p>
<div className="mb-4">
<p className="text-gray-700">Color:</p>
<div className="flex gap-2 mt-2">
{selectedProduct.colors.map((color) => (
<button
key={color}
onClick={() => setSelectedColor(color)}
className={`w-8 h-8 rounded-full border ${
selectedColor === color
? "border-4 border-black"
: "border-gray-300"
}`}
style={{
backgroundColor: color.toLocaleLowerCase(),
filter: "brightness(0.5)",
}}
></button>
))}
</div>
</div>
<div className="mb-4">
<p className="text-gray-700">Size:</p>
<div className="flex gap-2 mt-2">
{selectedProduct.sizes.map((size) => (
<button
key={size}
onClick={() => setSelectedSize(size)}
className={`px-4 py-2 rounded border ${
selectedSize === size ? "bg-black text-white" : ""
}`}
>
{size}
</button>
))}
</div>
</div>
<div className="mb-6">
<p className="text-gray-700">Quantity:</p>
<div className="flex items-center space-x-4 mt-2">
<button
onClick={() => handleQuantityChange("minus")}
className="px-2 py-1 bg-gray-200 rounded text-lg"
>
-
</button>
<span className="text-lg">{quantity}</span>
<button
onClick={() => handleQuantityChange("plus")}
className="px-2 py-1 bg-gray-200 rounded text-lg"
>
+
</button>
</div>
</div>
<button
onClick={handleAddToCart}
disabled={isButtonDisabled}
className={`bg-black text-white py-2 px-6 rounded w-full mb-4 ${
isButtonDisabled
? "cursor-not-allowed opacity-50"
: "hover:bg-gray-900"
}`}
>
{isButtonDisabled ? "Adding..." : "ADD TO CART"}
</button>
<div className="mt-10 text-gray-700">
<h3 className="text-xl font-bold mb-4">Characteristics:</h3>
<table className="w-full text-left text-sm text-gray-600">
<tbody>
<tr>
<td className="py-1">Brand</td>
<td className="py-1">{selectedProduct.brand}</td>
</tr>
<tr>
<td className="py-1">Material</td>
<td className="py-1">{selectedProduct.material}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="mt-20">
<h2 className="text-2xl text-center font-medium mb-4">
You May Also Like
</h2>
<ProductGrid
products={similarProducts}
loading={loading}
error={error}
/>
</div>
</div>
)}
</div>
);
};
export default ProductDetails;
// frontend/src/redux/slices/productsSlice.js
// 修正錯誤 - similarProducts
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// Async Thunk to Fetch Products by Collection and optional Filters - 使用非同步函數根據集合和可選過濾條件獲取產品
export const fetchProductsByFilters = createAsyncThunk(
"products/fetchByFilters",
async ({
collection,
size,
color,
gender,
minPrice,
maxPrice,
sortBy,
search,
category,
material,
brand,
limit,
}) => {
const query = new URLSearchParams();
if (collection) query.append("collection", collection);
if (size) query.append("size", size);
if (color) query.append("color", color);
if (gender) query.append("gender", gender);
if (minPrice) query.append("minPrice", minPrice);
if (maxPrice) query.append("maxPrice", maxPrice);
if (sortBy) query.append("sortBy", sortBy);
if (search) query.append("search", search);
if (category) query.append("category", category);
if (material) query.append("material", material);
if (brand) query.append("brand", brand);
if (limit) query.append("limit", limit);
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/products?${query.toString()}`
);
return response.data;
}
);
// Async thunk to fetch a single product by ID - 使用非同步函數根據 ID 獲取單個產品
export const fetchProductDetails = createAsyncThunk(
"products/fetchProductDetails",
async (id) => {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/products/${id}`
);
return response.data;
}
);
// Async thunk to fetch update existing products - 使用非同步函數獲取並更新現有產品
export const updateProduct = createAsyncThunk(
"products/updateProduct",
async ({ id, productData }) => {
const response = await axios.put(
`${import.meta.env.VITE_BACKEND_URL}/api/products/${id}`,
productData,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
}
);
// Async thunk to fetch similar products - 使用非同步函數獲取相似產品
export const fetchSimilarProducts = createAsyncThunk(
"products/fetchSimilarProducts",
async ({ id }) => {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/products/similar/${id}`
);
return response.data;
}
);
const productsSlice = createSlice({
name: "products",
initialState: {
products: [],
selectedProduct: null, // Store the details of the single Product - 儲存單一產品的詳細資料
similarProducts: [],
loading: false,
error: null,
filters: {
category: "",
size: "",
color: "",
gender: "",
brand: "",
minPrice: "",
maxPrice: "",
sortBy: "",
search: "",
material: "",
collection: "",
},
},
reducers: {
setFilters: (state, action) => {
state.filters = { ...state.filters, ...action.payload };
},
clearFilters: (state) => {
state.filters = {
category: "",
size: "",
color: "",
gender: "",
brand: "",
minPrice: "",
maxPrice: "",
sortBy: "",
search: "",
material: "",
collection: "",
};
},
},
extraReducers: (builder) => {
builder
// Handle fetching products with filter - 處理使用篩選條件獲取產品
.addCase(fetchProductsByFilters.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchProductsByFilters.fulfilled, (state, action) => {
state.loading = false;
state.products = Array.isArray(action.payload) ? action.payload : [];
})
.addCase(fetchProductsByFilters.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
})
// Handle fetching single product details - 處理獲取單一產品詳細資料
.addCase(fetchProductDetails.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchProductDetails.fulfilled, (state, action) => {
state.loading = false;
state.selectedProduct = action.payload;
})
.addCase(fetchProductDetails.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
})
// Handle updating product - 處理更新產品
.addCase(updateProduct.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(updateProduct.fulfilled, (state, action) => {
state.loading = false;
const updatedProduct = action.payload;
const index = state.products.findIndex(
(product) => product._id === updateProduct._id
);
if (index !== -1) {
state.products[index] = updateProduct;
}
})
.addCase(updateProduct.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
})
// Handle fetching similar products - 處理獲取相似產品
.addCase(fetchSimilarProducts.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchSimilarProducts.fulfilled, (state, action) => {
state.loading = false;
state.similarProducts = action.payload;
})
.addCase(fetchSimilarProducts.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
},
});
export const { setFilters, clearFilters } = productsSlice.actions;
export default productsSlice.reducer;
測試加入購物車功能
- 安裝 Redux DevTools
react redux chrome extension - 檢查 > Redux > cart/addToCart/fulfilled > DIFF
ADD TO CART – 加到購物車 - 測試個別產品
出現錯誤 (個人問題)
- 產品無法加到購物車
// frontend/src/redux/slices/cartSlice.js
// 除錯 addCase 的 addToCart
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// Helper function to load cart from localStorage - 從本地儲存載入購物車的輔助函數
const loadCartFromStorage = () => {
const storedCart = localStorage.getItem("cart");
return storedCart ? JSON.parse(storedCart) : { products: [] };
};
// Helper function to save cart to localStorage - 將購物車儲存到本地儲存的輔助函數
const saveCartToStorage = (cart) => {
localStorage.setItem("cart", JSON.stringify(cart));
};
// Fetch cart for a user or guest - 為用戶或訪客獲取購物車
export const fetchCart = createAsyncThunk(
"cart/fetchCart",
async ({ userId, guestId }, { rejectWithValue }) => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
params: { userId, guestId },
}
);
return response.data;
} catch (error) {
console.error(error);
return rejectWithValue(error.response.data);
}
}
);
// Add an item to the cart for a user or guest - 為用戶或訪客將商品加入購物車
export const addToCart = createAsyncThunk(
"cart/addToCart",
async (
{ productId, quantity, size, color, guestId, userId },
{ rejectWithValue }
) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
productId,
quantity,
size,
color,
guestId,
userId,
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Update the quantity of an item in the cart - 更新購物車中商品的數量
export const updateCartItemQuantity = createAsyncThunk(
"cart/updateCartItemQuantity",
async (
{ productId, quantity, guestId, userId, size, color },
{ rejectWithValue }
) => {
try {
const response = await axios.put(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
productId,
quantity,
guestId,
userId,
size,
color,
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Remove an item from the cart - 從購物車中移除商品
export const removeFromCart = createAsyncThunk(
"cart/removeFromCart",
async ({ productId, guestId, userId, size, color }, { rejectWithValue }) => {
try {
const response = await axios({
method: "DELETE",
url: `${import.meta.env.VITE_BACKEND_URL}/api/cart`,
data: {
productId,
guestId,
userId,
size,
color,
},
});
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Merge guest cart into user cart
export const mergeCart = createAsyncThunk(
"cart/mergeCart",
async ({ guestId, user }, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/cart/merge`,
{ guestId, user },
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
const cartSlice = createSlice({
name: "cart",
initialState: {
cart: loadCartFromStorage(),
loading: false,
error: null,
},
reducers: {
clearCart: (state) => {
state.cart = { products: [] };
localStorage.removeItem("cart");
},
},
extraReducers: (builder) => {
builder
.addCase(fetchCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchCart.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
saveCartToStorage(action.payload);
})
.addCase(fetchCart.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || "Failed to fetch cart";
})
.addCase(addToCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(addToCart.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(addToCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to add to cart";
})
.addCase(updateCartItemQuantity.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(updateCartItemQuantity.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
saveCartToStorage(action.payload);
})
.addCase(updateCartItemQuantity.rejected, (state, action) => {
state.loading = false;
state.error =
action.payload?.message || "Failed to update item quantity";
})
.addCase(removeFromCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(removeFromCart.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
saveCartToStorage(action.payload);
})
.addCase(removeFromCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to remove item";
})
.addCase(mergeCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(mergeCart.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
saveCartToStorage(action.payload);
})
.addCase(mergeCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to merge cart";
});
},
});
export const { clearCart } = cartSlice.actions;
export default cartSlice.reducer;
Collection Section (系列區域)
- Populating the collection (填充集合)
- 修改選單連結
測試桌面版、手機版選單連結是否正常運作
// frontend/src/pages/CollectionPage.jsx
import React, { useEffect, useRef, useState } from "react";
import { FaFilter } from "react-icons/fa";
import FilterSidebar from "../components/Products/FilterSidebar";
import SortOptions from "../components/Products/SortOptions";
import ProductGrid from "../components/Products/ProductGrid";
import { useParams, useSearchParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { fetchProductsByFilters } from "../redux/slices/productsSlice";
const CollectionPage = () => {
const { collection } = useParams();
const [searchParams] = useSearchParams();
const dispatch = useDispatch();
const { products, loading, error } = useSelector((state) => state.products);
const queryParams = Object.fromEntries([...searchParams]);
const sidebarRef = useRef(null);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
useEffect(() => {
dispatch(fetchProductsByFilters({ collection, ...queryParams }));
}, [dispatch, collection, searchParams]);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const handleClickOutside = (e) => {
// Close sidebar if clicked outside - 如果點擊在外部則關閉側邊欄
if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
setIsSidebarOpen(false);
}
};
useEffect(() => {
// Add event listner for clicks - 為點擊事件添加事件監聽器
document.addEventListener("mousedown", handleClickOutside);
// clean event listener - 清除事件監聽器
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<div className="flex flex-col lg:flex-row">
{/* Mobile Filter button - 手機篩選按鈕 */}
<button
onClick={toggleSidebar}
className="lg:hidden border p-2 flex justify-center items-center"
>
<FaFilter className="mr-2" /> Filters
</button>
{/* Filter Sidebar - 篩選側邊欄 */}
<div
ref={sidebarRef}
className={`${
isSidebarOpen ? "translate-x-0" : "-translate-x-full"
} fixed inset-y-0 z-50 left-0 w-64 bg-white overflow-y-auto transition-transform duration-300 lg:static lg:translate-x-0`}
>
<FilterSidebar />
</div>
<div className="flex-grow p-4">
<h2 className="text-2xl uppercase mb-4">All Collection</h2>
{/* Sort Options - 排序選項 */}
<SortOptions />
{/* Product Grid - 產品網格 */}
<ProductGrid products={products} loading={loading} error={error} />
</div>
</div>
);
};
export default CollectionPage;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="/collections/all?gender=Men"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link
to="/admin"
className="block bg-black px-2 rounded text-sm text-white"
>
Admin
</Link>
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
4
</span>
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="/collections/all?gender=Men"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
Cart Functionality (購物車功能)
// frontend/src/components/Layout/CartDrawer.jsx
import React, { useState } from "react";
import { IoMdClose } from "react-icons/io";
import CartContents from "../Cart/CartContents";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
const CartDrawer = ({ drawerOpen, toggleCartDrawer }) => {
const navigate = useNavigate();
const { user, guestId } = useSelector((state) => state.auth);
const { cart } = useSelector((state) => state.cart);
const userId = user ? user._id : null;
const handleCheckout = () => {
toggleCartDrawer();
if (!user) {
navigate("/login?redirect=checkout");
} else {
navigate("/checkout");
}
};
return (
<div
className={`fixed top-0 right-0 w-3/4 sm:w-1/2 md:w-[30rem] h-full bg-white shadow-lg transform transition-transform duration-300 flex flex-col z-50 ${
drawerOpen ? "translate-x-0" : "translate-x-full"
}`}
>
{/* Close Button - 關閉的按鈕 */}
<div className="flex justify-end p-4">
<button onClick={toggleCartDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
{/* Cart contents with scrollable area - 具有可滾動區域的購物車內容 */}
<div className="flex-grow p-4 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4">Your Cart</h2>
{/* Component for Cart Contents - 購物車內容組件 */}
{cart && cart?.products?.length > 0 ? (
<CartContents cart={cart} userId={userId} guestId={guestId} />
) : (
<p>Your cart is empty.</p>
)}
</div>
{/* Checkout button fixed at the bottom - 結帳按鈕固定在底部 */}
<div className="p-4 bg-white sticky bottom-0">
{cart && cart?.products?.length > 0 && (
<>
<button
onClick={handleCheckout}
className="w-full bg-black text-white py-3 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Checkout
</button>
<p className="text-sm tracking-tighter text-gray-500 mt-2 text-center">
Shipping, taxes, and discount codes calculated at checkout.
</p>
</>
)}
</div>
</div>
);
};
export default CartDrawer;
// frontend/src/components/Cart/CartContent.jsx
import React from "react";
import { RiDeleteBin3Line } from "react-icons/ri";
import { useDispatch } from "react-redux";
import {
removeFromCart,
updateCartItemQuantity,
} from "../../redux/slices/cartSlice";
const CartContents = ({ cart, userId, guestId }) => {
const dispatch = useDispatch();
// Handle adding or substracting to cart - 處理加入或減少購物車的商品
const handleAddToCart = (productId, delta, quantity, size, color) => {
const newQuantity = quantity + delta;
if (newQuantity >= 1) {
dispatch(
updateCartItemQuantity({
productId,
quantity: newQuantity,
guestId,
userId,
size,
color,
})
);
}
};
const handleRemoveFromCart = (productId, size, color) => {
dispatch(removeFromCart({ productId, guestId, userId, size, color }));
};
return (
<div>
{cart.products.map((product, index) => (
<div
key={index}
className="flex items-start justify-between py-4 border-b"
>
<div className="flex items-start">
<img
src={product.image}
alt={product.name}
className="w-20 h-24 object-cover mr-4 rounded"
/>
<div>
<h3>{product.name}</h3>
<p className="text-sm text-gray-500">
size: {product.size} | color: {product.color}
</p>
<div className="flex items-center mt-2">
<button
onClick={() =>
handleAddToCart(
product.productId,
-1,
product.quantity,
product.size,
product.color
)
}
className="border rounded px-2 py-1 text-xl font-medium"
>
-
</button>
<span className="mx-4">{product.quantity}</span>
<button
onClick={() =>
handleAddToCart(
product.productId,
1,
product.quantity,
product.size,
product.color
)
}
className="border rounded px-2 py-1 text-xl font-medium"
>
+
</button>
</div>
</div>
</div>
<div>
<p>$ {product.price.toLocaleString()}</p>
<button
onClick={() =>
handleRemoveFromCart(
product.productId,
product.size,
product.color
)
}
>
<RiDeleteBin3Line className="h-6 w-6 mt-2 text-red-600" />
</button>
</div>
</div>
))}
</div>
);
};
export default CartContents;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
import { useSelector } from "react-redux";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const { cart } = useSelector((state) => state.cart);
const cartItemCount =
cart?.products?.reduce((total, product) => total + product.quantity, 0) ||
0;
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="/collections/all?gender=Men"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
<Link
to="/admin"
className="block bg-black px-2 rounded text-sm text-white"
>
Admin
</Link>
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
{cartItemCount > 0 && (
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
{cartItemCount}
</span>
)}
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="/collections/all?gender=Men"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
出現錯誤 (個人問題)
- 購物車抽屜數量無法增加、減少、刪除
// frontend/src/redux/slices/cartSlices.js
// 除錯 addCase 的 fetchCart、updateCartItemQuantity、removeFromCart、mergeCart
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// Helper function to load cart from localStorage - 從本地儲存載入購物車的輔助函數
const loadCartFromStorage = () => {
const storedCart = localStorage.getItem("cart");
return storedCart ? JSON.parse(storedCart) : { products: [] };
};
// Helper function to save cart to localStorage - 將購物車儲存到本地儲存的輔助函數
const saveCartToStorage = (cart) => {
localStorage.setItem("cart", JSON.stringify(cart));
};
// Fetch cart for a user or guest - 為用戶或訪客獲取購物車
export const fetchCart = createAsyncThunk(
"cart/fetchCart",
async ({ userId, guestId }, { rejectWithValue }) => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
params: { userId, guestId },
}
);
return response.data;
} catch (error) {
console.error(error);
return rejectWithValue(error.response.data);
}
}
);
// Add an item to the cart for a user or guest - 為用戶或訪客將商品加入購物車
export const addToCart = createAsyncThunk(
"cart/addToCart",
async (
{ productId, quantity, size, color, guestId, userId },
{ rejectWithValue }
) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
productId,
quantity,
size,
color,
guestId,
userId,
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Update the quantity of an item in the cart - 更新購物車中商品的數量
export const updateCartItemQuantity = createAsyncThunk(
"cart/updateCartItemQuantity",
async (
{ productId, quantity, guestId, userId, size, color },
{ rejectWithValue }
) => {
try {
const response = await axios.put(
`${import.meta.env.VITE_BACKEND_URL}/api/cart`,
{
productId,
quantity,
guestId,
userId,
size,
color,
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Remove an item from the cart - 從購物車中移除商品
export const removeFromCart = createAsyncThunk(
"cart/removeFromCart",
async ({ productId, guestId, userId, size, color }, { rejectWithValue }) => {
try {
const response = await axios({
method: "DELETE",
url: `${import.meta.env.VITE_BACKEND_URL}/api/cart`,
data: {
productId,
guestId,
userId,
size,
color,
},
});
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Merge guest cart into user cart
export const mergeCart = createAsyncThunk(
"cart/mergeCart",
async ({ guestId, user }, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/cart/merge`,
{ guestId, user },
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
const cartSlice = createSlice({
name: "cart",
initialState: {
cart: loadCartFromStorage(),
loading: false,
error: null,
},
reducers: {
clearCart: (state) => {
state.cart = { products: [] };
localStorage.removeItem("cart");
},
},
extraReducers: (builder) => {
builder
.addCase(fetchCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchCart.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(fetchCart.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || "Failed to fetch cart";
})
.addCase(addToCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(addToCart.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(addToCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to add to cart";
})
.addCase(updateCartItemQuantity.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(updateCartItemQuantity.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(updateCartItemQuantity.rejected, (state, action) => {
state.loading = false;
state.error =
action.payload?.message || "Failed to update item quantity";
})
.addCase(removeFromCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(removeFromCart.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(removeFromCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to remove item";
})
.addCase(mergeCart.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(mergeCart.fulfilled, (state, action) => {
state.loading = false;
state.cart = action.payload;
saveCartToStorage(action.payload);
})
.addCase(mergeCart.rejected, (state, action) => {
state.loading = false;
state.error = action.payload?.message || "Failed to merge cart";
});
},
});
export const { clearCart } = cartSlice.actions;
export default cartSlice.reducer;
Search Bar (搜尋欄)
// frontend/src/components/Common/SearchBar.jsx
import React, { useState } from "react";
import { HiMagnifyingGlass, HiMiniXMark } from "react-icons/hi2";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import {
fetchProductsByFilters,
setFilters,
} from "../../redux/slices/productsSlice";
const SearchBar = () => {
const [searchTerm, setSearchTerm] = useState("");
const [isOpen, setIsOpen] = useState(false);
const dispatch = useDispatch();
const navigate = useNavigate();
const handleSearchToggle = () => {
setIsOpen(!isOpen);
};
const handleSearch = (e) => {
e.preventDefault();
// console.log("Search Term:", searchTerm);
dispatch(setFilters({ search: searchTerm }));
dispatch(fetchProductsByFilters({ search: searchTerm }));
navigate(`/collections/all?search=${searchTerm}`);
setIsOpen(false);
};
return (
<div
className={`flex items-center justify-center w-full transition-all duration-300 ${
isOpen ? "absolute top-0 left-0 w-full bg-white h-24 z-50" : "w-auto"
}`}
>
{isOpen ? (
<form
onSubmit={handleSearch}
className="relative flex items-center justify-center w-full"
>
<div className="relative w-1/2">
<input
type="text"
placeholder="Search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="bg-gray-100 px-4 py-2 pl-2 pr-12 rounded-lg focus:outline-none w-full placeholder:text-gray-700"
/>
{/* search icon - 搜尋圖示 */}
<button
type="submit"
className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-gray-800"
>
<HiMagnifyingGlass className="h-6 w-6" />
</button>
</div>
{/* close button - 關閉的按鈕 */}
<button
type="button"
onClick={handleSearchToggle}
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-600 hover:text-gray-800"
>
<HiMiniXMark className="h-6 w-6" />
</button>
</form>
) : (
<button onClick={handleSearchToggle}>
<HiMagnifyingGlass className="h-6 w-6" />
</button>
)}
</div>
);
};
export default SearchBar;
Authentication Process (身份驗證過程)
製作登入帳號
- 帳號登入情況下 /login 會轉址到首頁
- 檢查 > Application
查看本地儲存是否有 userInfo、userToken - 清除本地端儲存 /login 將不會轉址到首頁
- 除錯: 帳號登入不會跳轉
addCase 的 loginUser
// frontend/src/pages/Login.jsx
import React, { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import login from "../assets/login.webp";
import { loginUser } from "../redux/slices/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { mergeCart } from "../redux/slices/cartSlice";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const { user, guestId } = useSelector((state) => state.auth);
const { cart } = useSelector((state) => state.cart);
// Get redirect parameter and check if it's checkout or something - 獲取重定向參數並檢查它是否為結帳或其他東西
const redirect = new URLSearchParams(location.search).get("redirect") || "/";
const isCheckoutRedirect = redirect.includes("checkout");
useEffect(() => {
if (user) {
if (cart?.products.length > 0 && guestId) {
dispatch(mergeCart({ guestId, user })).then(() => {
navigate(isCheckoutRedirect ? "/checkout" : "/");
});
} else {
navigate(isCheckoutRedirect ? "/checkout" : "/");
}
}
}, [user, guestId, cart, navigate, isCheckoutRedirect, dispatch]);
const handleSubmit = (e) => {
e.preventDefault();
// console.log("User Login:", { email, password });
dispatch(loginUser({ email, password }));
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Sign In
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link
to={`/register?redirect=${encodeURIComponent(redirect)}`}
className="text-blue-500"
>
Register
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={login}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Login;
// frontend/src/redux/slices/authSlice.js
// 除錯: 帳號登入不會跳轉
// addCase 的 loginUser
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// Retrieve user info and token from localStorage if available - 如果可用，從本地存儲中獲取用戶資訊和令牌
const userFromStorage = localStorage.getItem("userInfo")
? JSON.parse(localStorage.getItem("userInfo"))
: null;
// Check for an existing guest ID in the localStorage or generate a new one - 檢查本地存儲中是否已有現有的訪客 ID，若沒有則生成一個新的
const initialGuestId =
localStorage.getItem("guestId") || `guest_${new Date().getTime()}`;
localStorage.setItem("guestId", initialGuestId);
// Initial state - 初始狀態
const initialState = {
user: userFromStorage,
guestId: initialGuestId,
loading: false,
error: null,
};
// Async Thunk for User Login - 用於用戶登入的非同步延遲函數
export const loginUser = createAsyncThunk(
"auth/loginUser",
async (userData, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/users/login`,
userData
);
localStorage.setItem("userInfo", JSON.stringify(response.data.user));
localStorage.setItem("userToken", response.data.token);
return response.data.user; // Return the user object from the response - 從回應中返回用戶對象
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Async Thunk for User Registration - 用於用戶註冊的非同步延遲函數
export const registerUser = createAsyncThunk(
"auth/registerUser",
async (userData, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/users/register`,
userData
);
localStorage.setItem("userInfo", JSON.stringify(response.data.user));
localStorage.setItem("userToken", response.data.token);
return response.data.user; // Return the user object from the response - 從回應中返回用戶對象
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Slice - 切片
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
logout: (state) => {
state.user = null;
state.guestId = `guest_${new Date().getTime()}`; // Reset guest ID on logout - 在登出時重置訪客 ID
localStorage.removeItem("userInfo");
localStorage.removeItem("userToken");
localStorage.setItem("guestId", state.guestId); // Set new guest ID in localStorage - 在本地存儲中設置新的訪客 ID
},
generateNewGuestId: (state) => {
state.guestId = `guest_${new Date().getTime()}`;
localStorage.setItem("guestId", state.guestId);
},
},
extraReducers: (builder) => {
builder
.addCase(loginUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(loginUser.fulfilled, (state, action) => {
state.loading = false;
state.user = action.payload;
})
.addCase(loginUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
})
.addCase(registerUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(registerUser.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
})
.addCase(registerUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
});
},
});
export const { logout, generateNewGuestId } = authSlice.actions;
export default authSlice.reducer;
// frontend/src/pages/Profile.jsx
import React, { useEffect } from "react";
import MyOrdersPage from "./MyOrdersPage";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { logout } from "../redux/slices/authSlice";
import { clearCart } from "../redux/slices/cartSlice";
const Profile = () => {
const { user } = useSelector((state) => state.auth);
const navigate = useNavigate();
const dispatch = useDispatch();
useEffect(() => {
if (!user) {
navigate("/login");
}
}, [user, navigate]);
const handleLogout = () => {
dispatch(logout());
dispatch(clearCart());
navigate("/login");
};
return (
<div className="min-h-screen flex flex-col">
<div className="flex-grow container mx-auto p-4 md:p-6">
<div className="flex flex-col md:flex-row md:space-x-6 space-y-6 md:space-y-0">
{/* Left Section - 左側區域 */}
<div className="w-full md:w-1/3 lg:w-1/4 shadow-md rounded-lg p-6">
<h1 className="text-2xl md:text-3xl font-bold mb-4">
{user?.name}
</h1>
<p className="text-lg text-gray-600 mb-4">{user?.email}</p>
<button
onClick={handleLogout}
className="w-full bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600"
>
Logout
</button>
</div>
{/* Right Section: Orders table - 右側區域: 訂單表格 */}
<div className="w-full md:w-2/3 lg:w-3/4">
<MyOrdersPage />
</div>
</div>
</div>
</div>
);
};
export default Profile;
製作註冊帳號
- 除錯: 註冊帳號不會跳轉
- 測試合併功能
未登入時產品加入購物車結帳、登入是否會合併
未登入時產品加入購物車結帳、註冊是否會合併
// frontend/src/pages/Register.jsx
import React, { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import register from "../assets/register.webp";
import { registerUser } from "../redux/slices/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { mergeCart } from "../redux/slices/cartSlice";
const Register = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const { user, guestId } = useSelector((state) => state.auth);
const { cart } = useSelector((state) => state.cart);
// Get redirect parameter and check if it's checkout or something - 獲取重定向參數並檢查它是否為結帳或其他東西
const redirect = new URLSearchParams(location.search).get("redirect") || "/";
const isCheckoutRedirect = redirect.includes("checkout");
useEffect(() => {
if (user) {
if (cart?.products.length > 0 && guestId) {
dispatch(mergeCart({ guestId, user })).then(() => {
navigate(isCheckoutRedirect ? "/checkout" : "/");
});
} else {
navigate(isCheckoutRedirect ? "/checkout" : "/");
}
}
}, [user, guestId, cart, navigate, isCheckoutRedirect, dispatch]);
const handleSubmit = (e) => {
e.preventDefault();
// console.log("User Registered:", { name, email, password });
dispatch(registerUser({ name, email, password }));
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your name"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
Sign Up
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link
to={`/login?redirect=${encodeURIComponent(redirect)}`}
className="text-blue-500"
>
Login
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={register}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Register;
// frontend/src/redux/slices/authSlice.js
// 除錯: 註冊帳號不會跳轉
// addCase 的 registerUser
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// Retrieve user info and token from localStorage if available - 如果可用，從本地存儲中獲取用戶資訊和令牌
const userFromStorage = localStorage.getItem("userInfo")
? JSON.parse(localStorage.getItem("userInfo"))
: null;
// Check for an existing guest ID in the localStorage or generate a new one - 檢查本地存儲中是否已有現有的訪客 ID，若沒有則生成一個新的
const initialGuestId =
localStorage.getItem("guestId") || `guest_${new Date().getTime()}`;
localStorage.setItem("guestId", initialGuestId);
// Initial state - 初始狀態
const initialState = {
user: userFromStorage,
guestId: initialGuestId,
loading: false,
error: null,
};
// Async Thunk for User Login - 用於用戶登入的非同步延遲函數
export const loginUser = createAsyncThunk(
"auth/loginUser",
async (userData, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/users/login`,
userData
);
localStorage.setItem("userInfo", JSON.stringify(response.data.user));
localStorage.setItem("userToken", response.data.token);
return response.data.user; // Return the user object from the response - 從回應中返回用戶對象
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Async Thunk for User Registration - 用於用戶註冊的非同步延遲函數
export const registerUser = createAsyncThunk(
"auth/registerUser",
async (userData, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/users/register`,
userData
);
localStorage.setItem("userInfo", JSON.stringify(response.data.user));
localStorage.setItem("userToken", response.data.token);
return response.data.user; // Return the user object from the response - 從回應中返回用戶對象
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Slice - 切片
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
logout: (state) => {
state.user = null;
state.guestId = `guest_${new Date().getTime()}`; // Reset guest ID on logout - 在登出時重置訪客 ID
localStorage.removeItem("userInfo");
localStorage.removeItem("userToken");
localStorage.setItem("guestId", state.guestId); // Set new guest ID in localStorage - 在本地存儲中設置新的訪客 ID
},
generateNewGuestId: (state) => {
state.guestId = `guest_${new Date().getTime()}`;
localStorage.setItem("guestId", state.guestId);
},
},
extraReducers: (builder) => {
builder
.addCase(loginUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(loginUser.fulfilled, (state, action) => {
state.loading = false;
state.user = action.payload;
})
.addCase(loginUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
})
.addCase(registerUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(registerUser.fulfilled, (state, action) => {
state.loading = false;
state.user = action.payload;
})
.addCase(registerUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
});
},
});
export const { logout, generateNewGuestId } = authSlice.actions;
export default authSlice.reducer;
製作結帳頁面
- 填寫表單測試繼續結帳是否能正常運作
- 檢查 > Network
查看請求是否有正確運行 - 使用 PayPal Sandbox 個人帳號測試能否正常結帳
- 使用 Paypal payment method
// frontend/src/components/Cart/Checkout.jsx
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import PayPalButton from "./PayPalButton";
import { useDispatch, useSelector } from "react-redux";
import { createCheckout } from "../../redux/slices/checkoutSlice";
import axios from "axios";
const Checkout = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { cart, loading, error } = useSelector((state) => state.cart);
const { user } = useSelector((state) => state.auth);
const [checkoutId, setCheckoutId] = useState(null);
const [shippingAddress, setShippingAddress] = useState({
firstName: "",
lastName: "",
address: "",
city: "",
postalCode: "",
country: "",
phone: "",
});
// Ensure cart is loaded before proceeding - 確保購物車已加載完成再繼續
useEffect(() => {
if (!cart || !cart.products || cart.products.length === 0) {
navigate("/");
}
}, [cart, navigate]);
const handleCreateCheckout = async (e) => {
e.preventDefault();
if (cart && cart.products.length > 0) {
const res = await dispatch(
createCheckout({
checkoutItems: cart.products,
shippingAddress,
paymentMethod: "Paypal",
totalPrice: cart.totalPrice,
})
);
if (res.payload && res.payload._id) {
setCheckoutId(res.payload._id); // Set checkout ID if checkout was successful - 如果結帳成功，設置結帳 ID
}
}
};
const handlePaymentSuccess = async (details) => {
// console.log("Payment Successful", details);
try {
const response = await axios.put(
`${import.meta.env.VITE_BACKEND_URL}/api/checkout/${checkoutId}/pay`,
{ paymentStatus: "paid", paymentDetails: details },
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
await handleFinalizeCheckout(checkoutId); // Finalize checkout if payment is successful - 如果付款成功，完成結帳
} catch (error) {
console.error(error);
}
};
const handleFinalizeCheckout = async (checkoutId) => {
try {
const response = await axios.post(
`${
import.meta.env.VITE_BACKEND_URL
}/api/checkout/${checkoutId}/finalize`,
{},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
navigate("/order-confirmation");
} catch (error) {
console.error(error);
}
};
if (loading) return <p>Loading cart ...</p>;
if (error) return <p>Error: {error}</p>;
if (!cart || !cart.products || cart.products.length === 0) {
return <p>Your cart is empty</p>;
}
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-7xl mx-auto py-10 px-6 tracking-tighter">
{/* Left Section - 左側區域 */}
<div className="bg-white rounded-lg p-6">
<h2 className="text-2xl uppercase mb-6">Checkout</h2>
<form onSubmit={handleCreateCheckout}>
<h3 className="text-lg mb-4">Contact Details</h3>
<div className="mb-4">
<label className="block text-gray-700">Email</label>
<input
type="email"
value={user ? user.email : ""}
className="w-full p-2 border rounded"
disabled
/>
</div>
<h3 className="text-lg mb-4">Delivery</h3>
<div className="mb-4 grid grid-cols-2 gap-4">
<div>
<label className="block text-gray-700">First Name</label>
<input
type="text"
value={shippingAddress.firstName}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
firstName: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div>
<label className="block text-gray-700">Last Name</label>
<input
type="text"
value={shippingAddress.lastName}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
lastName: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700">Address</label>
<input
type="text"
value={shippingAddress.address}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
address: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4 grid grid-cols-2 gap-4">
<div>
<label className="block text-gray-700">City</label>
<input
type="text"
value={shippingAddress.city}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
city: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div>
<label className="block text-gray-700">Postal Code</label>
<input
type="text"
value={shippingAddress.postalCode}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
postalCode: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700">Country</label>
<input
type="text"
value={shippingAddress.country}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
country: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Phone</label>
<input
type="tel"
value={shippingAddress.phone}
onChange={(e) =>
setShippingAddress({
...shippingAddress,
phone: e.target.value,
})
}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mt-6">
{!checkoutId ? (
<button
type="submit"
className="w-full bg-black text-white py-3 rounded"
>
Continue to Payment
</button>
) : (
<div>
<h3 className="text-lg mb-4">Pay with Paypal</h3>
{/* Paypal Component */}
<PayPalButton
amount={cart.totalPrice}
onSuccess={handlePaymentSuccess}
onError={(err) => alert("Payment failed. Try again.")}
/>
</div>
)}
</div>
</form>
</div>
{/* Right Section - 右側區域 */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg mb-4">Order Summary</h3>
<div className="border-t py-4 mb-4">
{cart.products.map((product, index) => (
<div
key={index}
className="flex items-start justify-between py-2 border-b"
>
<div className="flex items-start">
<img
src={product.image}
alt={product.name}
className="w-20 h-24 object-cover mr-4"
/>
<div>
<h3 className="text-md">{product.name}</h3>
<p className="text-gray-500">Size: {product.size}</p>
<p className="text-gray-500">Color: {product.color}</p>
</div>
</div>
<p className="text-xl">${product.price?.toLocaleString()}</p>
</div>
))}
</div>
<div className="flex justify-between items-center text-lg mb-4">
<p>Subtotal</p>
<p>${cart.totalPrice?.toLocaleString()}</p>
</div>
<div className="flex justify-between items-center text-lg">
<p>Shipping</p>
<p>Free</p>
</div>
<div className="flex justify-between items-center text-lg mt-4 border-t pt-4">
<p>Total</p>
<p>${cart.totalPrice?.toLocaleString()}</p>
</div>
</div>
</div>
);
};
export default Checkout;
// frontend/src/components/Cart/PayPalButton.jsx
import React from "react";
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
const PayPalButton = ({ amount, onSuccess, onError }) => {
return (
<PayPalScriptProvider
options={{
"client-id": import.meta.env.VITE_PAYPAL_CLIENT_ID,
}}
>
<PayPalButtons
style={{ layout: "vertical" }}
createOrder={(data, actions) => {
return actions.order.create({
purchase_units: [
{ amount: { value: parseFloat(amount).toFixed(2) } },
],
});
}}
onApprove={(data, actions) => {
return actions.order.capture().then(onSuccess);
}}
onError={onError}
/>
</PayPalScriptProvider>
);
};
export default PayPalButton;
製作訂單確認頁面
// frontend/src/pages/OrderConfirmationPage.jsx
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearCart } from "../redux/slices/cartSlice";
const OrderConfirmationPage = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { checkout } = useSelector((state) => state.checkout);
// Clear the cart when the order is confirmed - 訂單確認後清空購物車
useEffect(() => {
if (checkout && checkout._id) {
dispatch(clearCart());
localStorage.removeItem("cart");
} else {
navigate("/my-order");
}
}, [checkout, dispatch, navigate]);
const calculateEstimatedDelivery = (createdAt) => {
const orderDate = new Date(createdAt);
orderDate.setDate(orderDate.getDate() + 10); // Add 10 days to the order date - 訂單日期增加10天
return orderDate.toLocaleDateString();
};
return (
<div className="max-w-4xl mx-auto p-6 bg-white">
<h1 className="text-4xl font-bold text-center text-emerald-700 mb-8">
Thank You for Your Order!
</h1>
{checkout && (
<div className="p-6 rounded-lg border">
<div className="flex justify-between mb-20">
{/* Order Id and Date - 訂單編號和日期 */}
<div>
<h2 className="text-xl font-semibold">
Order ID: {checkout._id}
</h2>
<p className="text-gray-500">
Order date: {new Date(checkout.createdAt).toLocaleDateString()}
</p>
</div>
{/* Estimated Delivery- 預計送達 */}
<div>
<p className="text-emerald-700 text-sm">
Estimated Delivery:{" "}
{calculateEstimatedDelivery(checkout.createdAt)}
</p>
</div>
</div>
{/* Ordered Items - 訂單項目 */}
<div className="mb-20">
{checkout.checkoutItems.map((item) => (
<div key={item.productId} className="flex items-center mb-4">
<img
src={item.image}
alt={item.name}
className="w-16 h-16 object-cover rounded-md mr-4"
/>
<div>
<h4 className="text-md font-semibold">{item.name}</h4>
<p className="text-sm text-gray-500">
{item.color} | {item.size}
</p>
</div>
<div className="ml-auto text-right">
<p className="text-md">${item.price}</p>
<p className="text-sm text-gray-500">Qty: {item.quantity}</p>
</div>
</div>
))}
</div>
{/* Payment and Delivery Info - 付款與送貨資訊 */}
<div className="grid grid-cols-2 gap-8">
{/* Payment Info - 付款資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Payment</h4>
<p className="text-gray-600">PayPal</p>
</div>
{/* Delivery Info - 送貨資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Delivery</h4>
<p className="text-gray-600">
{checkout.shippingAddress.address}
</p>
<p className="text-gray-600">
{checkout.shippingAddress.city},{" "}
{checkout.shippingAddress.country}
</p>
</div>
</div>
</div>
)}
</div>
);
};
export default OrderConfirmationPage;
製作我的訂單 (My Orders Component)
// frontend/src/pages/MyOrdersPage.jsx
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { fetchUserOrders } from "../redux/slices/orderSlice";
const MyOrdersPage = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { orders, loading, error } = useSelector((state) => state.orders);
useEffect(() => {
dispatch(fetchUserOrders());
}, [dispatch]);
const handleRowClick = (orderId) => {
navigate(`/order/${orderId}`);
};
if (loading) return <p>Loading ...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="max-w-7xl mx-auto p-4 sm:p-6">
<h2 className="text-xl sm:text-2xl font-bold mb-6">My Orders</h2>
<div className="relative shadow-md sm:rounded-lg overflow-hidden">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-2 px-4 sm:py-3">Image</th>
<th className="py-2 px-4 sm:py-3">Order ID</th>
<th className="py-2 px-4 sm:py-3">Created</th>
<th className="py-2 px-4 sm:py-3">Shipping Address</th>
<th className="py-2 px-4 sm:py-3">Items</th>
<th className="py-2 px-4 sm:py-3">Price</th>
<th className="py-2 px-4 sm:py-3">Status</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
onClick={() => handleRowClick(order._id)}
className="border-b hover:border-gray-50 cursor-pointer"
>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<img
src={order.orderItems[0].image}
alt={order.orderItems[0].name}
className="w-10 h-10 sm:w-12 sm:h-12 object-cover rounded-lg"
/>
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4 font-medium text-gray-900 whitespace-nowrap">
#{order._id}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{new Date(order.createdAt).toLocaleDateString()}{" "}
{new Date(order.createdAt).toLocaleTimeString()}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.shippingAddress
? `${order.shippingAddress.city}, ${order.shippingAddress.country}`
: "N/A"}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
{order.orderItems.length}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
${order.totalPrice}
</td>
<td className="py-2 px-2 sm:py-4 sm:px-4">
<span
className={`${
order.isPaid
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
} px-2 py-1 rounded-full text-xs sm:text-sm font-medium`}
>
{order.isPaid ? "Paid" : "Pending"}
</span>
</td>
</tr>
))
) : (
<tr>
<td colSpan={7} className="py-4 px-4 text-center text-gray-500">
You have no orders
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default MyOrdersPage;
製作訂單詳情頁面
// frontend/src/pages/OrderDetailsPage.jsx
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { fetchOrderDetails } from "../redux/slices/orderSlice";
const OrderDetailsPage = () => {
const { id } = useParams();
const dispatch = useDispatch();
const { orderDetails, loading, error } = useSelector((state) => state.orders);
useEffect(() => {
dispatch(fetchOrderDetails(id));
}, [dispatch, id]);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="max-w-7xl mx-auto p-4 sm:p-6">
<h2 className="text-2xl md:text-3xl font-bold mb-6">Order Details</h2>
{!orderDetails ? (
<p>No Order details found</p>
) : (
<div className="p-4 sm:p-6 rounded-lg border">
{/* Order Info - 訂單資訊 */}
<div className="flex flex-col sm:flex-row justify-between mb-8">
<div>
<h3 className="text-lg md:text-xl font-semibold">
Order ID: #{orderDetails._id}
</h3>
<p className="text-gray-600">
{new Date(orderDetails.createdAt).toLocaleDateString()}
</p>
</div>
<div className="flex flex-col items-start sm:items-end mt-4 sm:mt-0">
<span
className={`${
orderDetails.isPaid
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
} px-3 py-1 rounded-full text-sm font-medium mb-2`}
>
{orderDetails.isPaid ? "Approved" : "Pending"}
</span>
<span
className={`${
orderDetails.isDelivered
? "bg-green-100 text-green-700"
: "bg-yellow-100 text-yellow-700"
} px-3 py-1 rounded-full text-sm font-medium mb-2`}
>
{orderDetails.isDelivered ? "Delivered" : "Pending"}
</span>
</div>
</div>
{/* Customer, Payment, Shipping Info - 顧客, 付款, 送貨資訊 */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mb-8">
<div>
<h4 className="text-lg font-semibold mb-2">Payment Info</h4>
<p>Payment Method: {orderDetails.paymentMethod}</p>
<p>Status: {orderDetails.isPaid ? "Paid" : "Unpaid"}</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-2">Shipping Info</h4>
<p>Shipping Method: {orderDetails.shippingMethod}</p>
<p>
Address:{" "}
{`${orderDetails.shippingAddress.city}, ${orderDetails.shippingAddress.country}`}
</p>
</div>
</div>
{/* Product list - 產品清單 */}
<div className="overflow-x-auto">
<h4 className="text-lg font-semibold mb-4">Products</h4>
<table className="min-w-full text-gray-600 mb-4">
<thead className="bg-gray-100">
<tr>
<th className="py-2 px-4">Name</th>
<th className="py-2 px-4">Unit Price</th>
<th className="py-2 px-4">Quantity</th>
<th className="py-2 px-4">Total</th>
</tr>
</thead>
<tbody>
{orderDetails.orderItems.map((item) => (
<tr key={item.productId} className="border-b">
<td className="py-2 px-4 flex items-center">
<img
src={item.image}
alt={item.name}
className="w-12 h-12 object-cover rounded-lg mr-4"
/>
<Link
to={`/product/${item.productId}`}
className="text-blue-500 hover:underline"
>
{item.name}
</Link>
</td>
<td className="py-2 px-4">${item.price}</td>
<td className="py-2 px-4">{item.quantity}</td>
<td className="py-2 px-4">${item.price * item.quantity}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Back to Orders Link - 回到訂單頁面連結 */}
<Link to="/my-orders" className="text-blue-500 hover:underline">
Back to My Orders
</Link>
</div>
)}
</div>
);
};
export default OrderDetailsPage;
除錯: 結帳完成頁面顏色、大小顯示錯誤
// backend/models/Checkout.js
// 除錯: 結帳完成頁面產品顏色、大小顯示錯誤
const mongoose = require("mongoose");
const checkoutItemSchema = new mongoose.Schema(
{
productId: {
type: mongoose.Schema.Types.ObjectId,
ref: "Product",
required: true,
},
name: {
type: String,
required: true,
},
image: {
type: String,
requied: true,
},
price: {
type: Number,
requied: true,
},
quantity: {
type: Number,
required: true,
},
size: String,
color: String,
},
{ _id: false }
);
const checkoutSchema = new mongoose.Schema(
{
user: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
requied: true,
},
checkoutItems: [checkoutItemSchema],
shippingAddress: {
address: { type: String, required: true },
city: { type: String, required: true },
postalCode: { type: String, required: true },
country: { type: String, required: true },
},
paymentMethod: {
type: String,
required: true,
},
totalPrice: {
type: Number,
required: true,
},
isPaid: {
type: Boolean,
default: false,
},
paidAt: {
type: Date,
},
paymentStatus: {
type: String,
default: "pending",
},
paymentDetails: {
type: mongoose.Schema.Types.Mixed, // store payment-related details(transaction ID, paypal response) - 存儲與支付相關的詳細資訊(如交易 ID 和 PayPal 回應)
},
isFinalized: {
type: Boolean,
default: false,
},
finalizedAt: {
type: Date,
},
},
{ timestamps: true }
);
module.exports = mongoose.model("Checkout", checkoutSchema);
製作使用者角色功能 (管理員、顧客)
- 管理員帳號登入: admin 按鈕、可進入到儀表板頁面
顧客帳號登入: 沒有 admin 按鈕、不可進入到儀表板頁面
// frontend/src/components/Common/ProtectedRoute.jsx
import React from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
const ProtectedRoute = ({ children, role }) => {
const { user } = useSelector((state) => state.auth);
if (!user || (role && user.role !== role)) {
return <Navigate to="/login" replace />;
}
return children;
};
export default ProtectedRoute;
// frontend/src/App.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserLayout from "./components/Layout/UserLayout";
import Home from "./pages/Home";
import { Toaster } from "sonner";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Profile from "./pages/Profile";
import CollectionPage from "./pages/CollectionPage";
import ProductDetails from "./components/Products/ProductDetails";
import Checkout from "./components/Cart/Checkout";
import OrderConfirmationPage from "./pages/OrderConfirmationPage";
import OrderDetailsPage from "./pages/OrderDetailsPage";
import MyOrdersPage from "./pages/MyOrdersPage";
import AdminLayout from "./components/Admin/AdminLayout";
import AdminHomePage from "./pages/AdminHomePage";
import UserManagement from "./components/Admin/UserManagement";
import ProductManagement from "./components/Admin/ProductManagement";
import EditProductPage from "./components/Admin/EditProductPage";
import OrderManagement from "./components/Admin/OrderManagement";
import { Provider } from "react-redux";
import store from "./redux/store";
import ProtectedRoute from "./components/Common/ProtectedRoute";
const App = () => {
return (
<Provider store={store}>
<BrowserRouter>
<Toaster position="top-right" />
<Routes>
<Route path="/" element={<UserLayout />}>
{/* User Layout - 使用者佈局 */}
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="profile" element={<Profile />} />
<Route
path="collections/:collection"
element={<CollectionPage />}
/>
<Route path="product/:id" element={<ProductDetails />} />
<Route path="checkout" element={<Checkout />} />
<Route
path="order-confirmation"
element={<OrderConfirmationPage />}
/>
<Route path="order/:id" element={<OrderDetailsPage />} />
<Route path="my-orders" element={<MyOrdersPage />} />
</Route>
<Route
path="/admin"
element={
<ProtectedRoute role="admin">
<AdminLayout />
</ProtectedRoute>
}
>
{/* Admin Layout - 管理員佈局 */}
<Route index element={<AdminHomePage />} />
<Route path="users" element={<UserManagement />} />
<Route path="products" element={<ProductManagement />} />
<Route path="products/:id/edit" element={<EditProductPage />} />
<Route path="orders" element={<OrderManagement />} />
</Route>
</Routes>
</BrowserRouter>
</Provider>
);
};
export default App;
// frontend/src/components/Common/Navbar.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
HiOutlineUser,
HiOutlineShoppingBag,
HiBars3BottomRight,
} from "react-icons/hi2";
import SearchBar from "./SearchBar";
import CartDrawer from "../Layout/CartDrawer";
import { IoMdClose } from "react-icons/io";
import { useSelector } from "react-redux";
const Navbar = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [navDrawerOpen, setNavDrawerOpen] = useState(false);
const { cart } = useSelector((state) => state.cart);
const { user } = useSelector((state) => state.auth);
const cartItemCount =
cart?.products?.reduce((total, product) => total + product.quantity, 0) ||
0;
const toggleNavDrawer = () => {
setNavDrawerOpen(!navDrawerOpen);
};
const toggleCartDrawer = () => {
setDrawerOpen(!drawerOpen);
};
return (
<>
<nav className="container mx-auto flex items-center justify-between py-4 px-6">
{/* Left - Logo -> 左側 - 商標、標誌 */}
<div>
<Link to="/" className="text-2xl font-medium">
Rabbit
</Link>
</div>
{/* Center - Navigation Links -> 中間 - 導覽連結 */}
<div className="hidden md:flex space-x-6">
<Link
to="/collections/all?gender=Men"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
className="text-gray-700 hover:text-black text-sm font-medium uppercase"
>
Bottom Wear
</Link>
</div>
{/* Right - Icons -> 右側 - 圖示 */}
<div className="flex items-center space-x-4">
{user && user.role === "admin" && (
<Link
to="/admin"
className="block bg-black px-2 rounded text-sm text-white"
>
Admin
</Link>
)}
<Link to="/profile" className="hover:text-black">
<HiOutlineUser className="h-6 w-6 text-gray-700" />
</Link>
<button
onClick={toggleCartDrawer}
className="relative hover:text-black"
>
<HiOutlineShoppingBag className="h-6 w-6 text-gray-700" />
{cartItemCount > 0 && (
<span className="absolute -top-1 bg-rabbit-red text-white text-xs rounded-full px-2 py-0.5">
{cartItemCount}
</span>
)}
</button>
{/* Search - 搜尋 */}
<div className="overflow-hidden">
<SearchBar />
</div>
<button onClick={toggleNavDrawer} className="md:hidden">
<HiBars3BottomRight className="h-6 w-6 text-gray-700" />
</button>
</div>
</nav>
<CartDrawer drawerOpen={drawerOpen} toggleCartDrawer={toggleCartDrawer} />
{/* Mobile Navigation - 手機版導覽 */}
<div
className={`fixed top-0 left-0 w-3/4 sm:w-1/2 md:w-1/3 h-full bg-white shadow-lg transform transition-transform duration-300 z-50 ${
navDrawerOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex justify-end p-4">
<button onClick={toggleNavDrawer}>
<IoMdClose className="h-6 w-6 text-gray-600" />
</button>
</div>
<div className="p-4">
<h2 className="text-xl font-semibold mb-4">Menu</h2>
<nav className="space-y-4">
<Link
to="/collections/all?gender=Men"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Men
</Link>
<Link
to="/collections/all?gender=Women"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Women
</Link>
<Link
to="/collections/all?category=Top Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Top Wear
</Link>
<Link
to="/collections/all?category=Bottom Wear"
onClick={toggleNavDrawer}
className="block text-gray-600 hover:text-black"
>
Bottom Wear
</Link>
</nav>
</div>
</div>
</>
);
};
export default Navbar;
製作管理員頁面
- 修正 Manage Orders、Manage Products 連結
- 價格金額加上 toFixed(2)
- 製作管理員儀錶板登出功能
// frontend/src/pages/AdminHomePage.jsx
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { fetchAdminProducts } from "../redux/slices/adminProductSlice";
import { fetchAllOrders } from "../redux/slices/adminOrderSlice";
const AdminHomePage = () => {
const dispatch = useDispatch();
const {
products,
loading: productsLoading,
error: productsError,
} = useSelector((state) => state.adminProducts);
const {
orders,
totalOrders,
totalSales,
loading: ordersLoading,
error: ordersError,
} = useSelector((state) => state.adminOrders);
useEffect(() => {
dispatch(fetchAdminProducts());
dispatch(fetchAllOrders());
}, [dispatch]);
return (
<div className="max-w-7xl mx-auto p-6">
<h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
{productsLoading || ordersLoading ? (
<p>Loading ...</p>
) : productsError ? (
<p className="text-red-500">Error fetching products: {productsError}</p>
) : ordersError ? (
<p className="text-red-500">Error fetching orders: {ordersError}</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Revenue</h2>
<p className="text-2xl">${totalSales.toFixed(2)}</p>
</div>
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Total Order</h2>
<p className="text-2xl">{totalOrders}</p>
<Link to="/admin/orders" className="text-blue-500 hover:underline">
Manage Orders
</Link>
</div>
<div className="p-4 shadow-md rounded-lg">
<h2 className="text-xl font-semibold">Total Products</h2>
<p className="text-2xl">{products.length}</p>
<Link
to="/admin/products"
className="text-blue-500 hover:underline"
>
Manage Products
</Link>
</div>
</div>
)}
<div className="mt-6">
<h2 className="text-2xl font-bold mb-4">Recent Orders</h2>
<div className="overflow-x-auto">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Order ID</th>
<th className="py-3 px-4">User</th>
<th className="py-3 px-4">Total Price</th>
<th className="py-3 px-4">Status</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="p-4">{order._id}</td>
<td className="p-4">{order.user.name}</td>
<td className="p-4">{order.totalPrice.toFixed(2)}</td>
<td className="p-4">{order.status}</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="p-4 text-center text-gray-500">
No recent orders found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
};
export default AdminHomePage;
// frontend/src/components/Admin/AdminSidebar.jsx
import React from "react";
import {
FaBoxOpen,
FaClipboardList,
FaSignOutAlt,
FaStore,
FaUser,
} from "react-icons/fa";
import { useDispatch } from "react-redux";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { logout } from "../../redux/slices/authSlice";
import { clearCart } from "../../redux/slices/cartSlice";
const AdminSidebar = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const handleLogout = () => {
dispatch(logout());
dispatch(clearCart());
navigate("/");
};
return (
<div className="p-6">
<div className="mb-6">
<Link to="/admin" className="text-2xl font-medium">
Rabbit
</Link>
</div>
<h2 className="text-xl font-medium mb-6 text-center">Admin Dashboard</h2>
<nav className="flex flex-col space-y-2">
<NavLink
to="/admin/users"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaUser />
<span>Users</span>
</NavLink>
<NavLink
to="/admin/products"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaBoxOpen />
<span>Products</span>
</NavLink>
<NavLink
to="/admin/orders"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaClipboardList />
<span>Orders</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
isActive
? "bg-gray-700 text-white py-3 px-4 rounded flex items-center space-x-2"
: "text-gray-300 hover:bg-gray-700 hover:text-white py-3 px-4 rounded flex items-center space-x-2"
}
>
<FaStore />
<span>Shop</span>
</NavLink>
</nav>
<div className="mt-6">
<button
onClick={handleLogout}
className="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded flex items-center justify-center space-x-2"
>
<FaSignOutAlt />
<span>Logout</span>
</button>
</div>
</div>
);
};
export default AdminSidebar;
製作使用者管理功能 (Admin)
- 除錯: fetchUsers 沒有加上 return
- 除錯: 無法更改 Role
// frontend/src/components/Admin/UserManagement.jsx
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import {
addUser,
deleteUser,
fetchUsers,
updateUser,
} from "../../redux/slices/adminSlice";
const UserManagement = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { user } = useSelector((state) => state.auth);
const { users, loading, error } = useSelector((state) => state.admin);
useEffect(() => {
if (user && user.role !== "admin") {
navigate("/");
}
}, [user, navigate]);
useEffect(() => {
if (user && user.role === "admin") {
dispatch(fetchUsers());
}
}, [dispatch, user]);
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
role: "customer", // Default role - 預設角色
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
// console.log(formData);
dispatch(addUser(formData));
// Reset the form after Submission - 提交後重置表單
setFormData({
name: "",
email: "",
password: "",
role: "customer",
});
};
const handleRoleChange = (userId, newRole) => {
// console.log({ id: userId, role: newRole });
dispatch(updateUser({ id: userId, role: newRole }));
};
const handleDeleteUser = (userId) => {
if (window.confirm("Are you sure you want to delete this user?")) {
// console.log("deleting user with ID", userId);
dispatch(deleteUser(userId));
}
};
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">User Management</h2>
{loading && <p>Loading...</p>}
{error && <p>Error: {error}</p>}
{/* Add New User Form - 新增使用者表單 */}
<div className="p-6 rounded-lg mb-6">
<h3 className="text-lg font-bold mb-4">Add New User</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700">Name</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Email</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Password</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
className="w-full p-2 border rounded"
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700">Role</label>
<select
name="role"
value={formData.role}
onChange={handleChange}
className="w-full p-2 border rounded"
>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</div>
<button
type="submit"
className="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"
>
Add User
</button>
</form>
</div>
{/* User List Management - 用戶列表管理 */}
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Name</th>
<th className="py-3 px-4">Email</th>
<th className="py-3 px-4">Role</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user._id} className="border-b hover:bg-gray-50">
<td className="p-4 font-medium text-gray-900 whitespace-nowrap">
{user.name}
</td>
<td className="p-4">{user.email}</td>
<td className="p-4">
<select
value={user.role}
onChange={(e) => handleRoleChange(user._id, e.target.value)}
className="p-2 border rounded"
>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</td>
<td className="p-4">
<button
onClick={() => handleDeleteUser(user._id)}
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default UserManagement;
// frontend/src/redux/slices/adminSlice.js
// 除錯1: fetchUsers 沒有加上 return
// 除錯2: 無法更改 Role
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
// fetch all users (admin only) - 獲取所有用戶 (僅限管理員)
export const fetchUsers = createAsyncThunk("admin/fetchUsers", async () => {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND_URL}/api/admin/users`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("userToken")}` },
}
);
return response.data;
});
// Add the create user action - 新增創建用戶的動作
export const addUser = createAsyncThunk(
"admin/addUser",
async (userData, { rejectWithValue }) => {
try {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/admin/users`,
userData,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
// Update user info - 更新用戶資訊
export const updateUser = createAsyncThunk(
"admin/updateUser",
async ({ id, name, email, role }) => {
const response = await axios.put(
`${import.meta.env.VITE_BACKEND_URL}/api/admin/users/${id}`,
{ name, email, role },
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data.user;
}
);
// Delete a user - 刪除用戶
export const deleteUser = createAsyncThunk("admin/deleteUser", async (id) => {
await axios.delete(
`${import.meta.env.VITE_BACKEND_URL}/api/admin/users/${id}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return id;
});
const adminSlice = createSlice({
name: "admin",
initialState: {
users: [],
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUsers.pending, (state) => {
state.loading = true;
})
.addCase(fetchUsers.fulfilled, (state, action) => {
state.loading = false;
state.users = action.payload;
})
.addCase(fetchUsers.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
})
.addCase(updateUser.fulfilled, (state, action) => {
const updatedUser = action.payload;
// console.log(action.payload); // 顯示開發過程中的訊息
const userIndex = state.users.findIndex(
(user) => user._id === updatedUser._id
);
if (userIndex !== -1) {
state.users[userIndex] = updatedUser;
}
})
.addCase(deleteUser.fulfilled, (state, action) => {
state.users = state.users.filter((user) => user._id !== action.payload);
})
.addCase(addUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(addUser.fulfilled, (state, action) => {
state.loading = false;
state.users.push(action.payload.user); // add a new user to the state - 將新用戶增加到狀態中
})
.addCase(addUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
});
},
});
export default adminSlice.reducer;
製作訂單管理功能 (Admin)
- 修正金額小數點問題
- 除錯: Custmoer 名稱有的沒有顯示
修正 Update 的 findById
// frontend/src/components/Admin/OrderManagement.jsx
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import {
fetchAllOrders,
updateOrderStatus,
} from "../../redux/slices/adminOrderSlice";
const OrderManagement = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { user } = useSelector((state) => state.auth);
const { orders, loading, error } = useSelector((state) => state.adminOrders);
useEffect(() => {
if (!user || user.role !== "admin") {
navigate("/");
} else {
dispatch(fetchAllOrders());
}
}, [dispatch, user, navigate]);
const handleStatusChange = (orderId, status) => {
// console.log({ id: orderId, status });
dispatch(updateOrderStatus({ id: orderId, status }));
};
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Order Management</h2>
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Order ID</th>
<th className="py-3 px-4">Customer</th>
<th className="py-3 px-4">Total Price</th>
<th className="py-3 px-4">Status</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{orders.length > 0 ? (
orders.map((order) => (
<tr
key={order._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="py-4 px-4 font-medium text-gray-900 whitespace-nowrap">
#{order._id}
</td>
<td className="p-4">{order.user.name}</td>
<td className="p-4">${order.totalPrice.toFixed(2)}</td>
<td className="p-4">
<select
value={order.status}
onChange={(e) =>
handleStatusChange(order._id, e.target.value)
}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
>
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
<option value="Delivered">Delivered</option>
<option value="Cancelled">Cancelled</option>
</select>
</td>
<td className="p-4">
<button
onClick={() => handleStatusChange(order._id, "Delivered")}
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
>
Mark as Delivered
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={5} className="p-4 text-center text-gray-500">
No Orders found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default OrderManagement;
// backend/routes/adminOrderRoutes.jsx
// 修正 Update 的 findById
const express = require("express");
const Order = require("../models/Order");
const { protect, admin } = require("../middleware/authMiddleware");
const router = express.Router();
// @route GET /api/admin/orders - @路由、使用 GET 方法、API 的路徑
// @desc Get all order (Admin only) - @描述 取得所有訂單 (僅限管理員)
// @access Private/Admin - @訪問權限 私人/管理員
router.get("/", protect, admin, async (req, res) => {
try {
const orders = await Order.find({}).populate("user", "name email");
res.json(orders);
} catch (error) {
console.error(error);
res.status(500).json({ message: "Server Error" });
}
});
// @route PUT /api/admin/orders/:id - @路由、使用 PUT 方法、API 的路徑
// @desc Update order status - @描述 更新訂單狀態
// @access Private/Admin - @訪問權限 私人/管理員
router.put("/:id", protect, admin, async (req, res) => {
try {
const order = await Order.findById(req.params.id).populate("user", "name");
if (order) {
order.status = req.body.status || order.status;
order.isDelivered =
req.body.status === "Delivered" ? true : order.isDelivered;
order.deliveredAt =
req.body.status === "Delivered" ? Date.now() : order.deliveredAt;
const updatedOrder = await order.save();
res.json(updatedOrder);
} else {
res.status(404).json({ message: "Order not found" });
}
} catch (error) {
console.error(error);
res.status(500).json({ message: "Server Error" });
}
});
// @route DELETE /api/admin/orders/:id - @路由、使用 DELETE 方法、API 的路徑
// @desc Delete an order - @描述 刪除訂單
// @access Private/Admin - @訪問權限 私人/管理員
router.delete("/:id", protect, admin, async (req, res) => {
try {
const order = await Order.findById(req.params.id);
if (order) {
await order.deleteOne();
res.json({ message: "Order removed" });
} else {
res.status(404).json({ message: "Order not found" });
}
} catch (error) {
console.error(error);
res.status(500).json({ message: "Server Error" });
}
});
module.exports = router;
製作產品管理功能 (Admin)
- 除錯: 無法刪除產品
修正 deleteProduct 刪除產品路徑
// frontend/src/components/Admin/ProductManagement.jsx
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
deleteProduct,
fetchAdminProducts,
} from "../../redux/slices/adminProductSlice";
const ProductManagement = () => {
const dispatch = useDispatch();
const { products, loading, error } = useSelector(
(state) => state.adminProducts
);
useEffect(() => {
dispatch(fetchAdminProducts());
}, [dispatch]);
const handleDelete = (id) => {
if (window.confirm("Are you sure you want to delete the Product?")) {
// console.log("Delete Product with id:", id);
dispatch(deleteProduct(id));
}
};
if (loading) return <p>Loading ...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="max-w-7xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Product Management</h2>
<div className="overflow-x-auto shadow-md sm:rounded-lg">
<table className="min-w-full text-left text-gray-500">
<thead className="bg-gray-100 text-xs uppercase text-gray-700">
<tr>
<th className="py-3 px-4">Name</th>
<th className="py-3 px-4">Price</th>
<th className="py-3 px-4">SKU</th>
<th className="py-3 px-4">Actions</th>
</tr>
</thead>
<tbody>
{products.length > 0 ? (
products.map((product) => (
<tr
key={product._id}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="p-4 font-medium text-gray-900 whitespace-nowrap">
{product.name}
</td>
<td className="p-4">${product.price}</td>
<td className="p-4">{product.sku}</td>
<td className="p-4">
<Link
to={`/admin/products/${product._id}/edit`}
className="bg-yellow-500 text-white px-2 py-1 rounded mr-2 hover:bg-yellow-600"
>
Edit
</Link>
<button
onClick={() => handleDelete(product._id)}
className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
>
Delete
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="p-4 text-center text-gray-500">
No Products found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default ProductManagement;
// frontend/src/redux/slices/adminProductSlice.jsx
// 除錯: 無法刪除產品
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
const API_URL = `${import.meta.env.VITE_BACKEND_URL}`;
const USER_TOKEN = `Bearer ${localStorage.getItem("userToken")}`;
// async thunk to fetch admin products - 獲取管理員產品的非同步函數
export const fetchAdminProducts = createAsyncThunk(
"adminProducts/fetchProducts",
async () => {
const response = await axios.get(`${API_URL}/api/admin/products`, {
headers: {
Authorization: USER_TOKEN,
},
});
return response.data;
}
);
// async function to create a new product - 創建新產品的非同步函數
export const createProduct = createAsyncThunk(
"adminProducts/createProduct",
async (productData) => {
const response = await axios.post(
`${API_URL}/api/admin/products`,
productData,
{
headers: {
Authorization: USER_TOKEN,
},
}
);
return response.data;
}
);
// async thunk to update an existing product - 更新現有產品的非同步函數
export const updateProduct = createAsyncThunk(
"adminProducts/updateProduct",
async ({ id, productData }) => {
const response = await axios.put(
`${API_URL}/api/admin/products/${id}`,
productData,
{
headers: {
Authorization: USER_TOKEN,
},
}
);
return response.data;
}
);
// async thunk to delete a product - 刪除產品的非同步函數
export const deleteProduct = createAsyncThunk(
"adminProducts/deleteProduct",
async (id) => {
await axios.delete(`${API_URL}/api/products/${id}`, {
headers: { Authorization: USER_TOKEN },
});
return id;
}
);
const adminProductSlice = createSlice({
name: "adminProducts",
initialState: {
products: [],
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchAdminProducts.pending, (state) => {
state.loading = true;
})
.addCase(fetchAdminProducts.fulfilled, (state, action) => {
state.loading = false;
state.products = action.payload;
})
.addCase(fetchAdminProducts.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
})
// Create Product - 新增產品
.addCase(createProduct.fulfilled, (state, action) => {
state.products.push(action.payload);
})
// Update Product - 更新產品
.addCase(updateProduct.fulfilled, (state, action) => {
const index = state.products.findIndex(
(product) => product._id === action.payload._id
);
if (index !== -1) {
state.products[index] = action.payload;
}
})
// Delete Product - 刪除產品
.addCase(deleteProduct.fulfilled, (state, action) => {
state.products = state.products.filter(
(product) => product._id !== action.payload
);
});
},
});
export default adminProductSlice.reducer;
製作更新產品功能 (Admin)
// frontend/src/components/Admin/EditProductPage.jsx
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import {
fetchProductDetails,
updateProduct,
} from "../../redux/slices/productsSlice";
import axios from "axios";
const EditProductPage = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { id } = useParams();
const { selectedProduct, loading, error } = useSelector(
(state) => state.products
);
const [productData, setProductData] = useState({
name: "",
description: "",
price: 0,
countInStock: 0,
sku: "",
category: "",
brand: "",
sizes: [],
colors: [],
collections: "",
material: "",
gender: "",
images: [],
});
const [uploading, setUploading] = useState(false); // Image uploading state - 圖片上傳狀態
useEffect(() => {
if (id) {
dispatch(fetchProductDetails(id));
}
}, [dispatch, id]);
useEffect(() => {
if (selectedProduct) {
setProductData(selectedProduct);
}
}, [selectedProduct]);
const handleChange = (e) => {
const { name, value } = e.target;
setProductData((prevData) => ({ ...prevData, [name]: value }));
};
const handleImageUpload = async (e) => {
const file = e.target.files[0];
// console.log(file);
const formData = new FormData();
formData.append("image", file);
try {
setUploading(true);
const { data } = await axios.post(
`${import.meta.env.VITE_BACKEND_URL}/api/upload`,
formData,
{
headers: { "Content-Type": "multipart/form-data" },
}
);
setProductData((prevData) => ({
...prevData,
images: [...prevData.images, { url: data.imageUrl, altText: "" }],
}));
setUploading(false);
} catch (error) {
console.error(error);
setUploading(false);
}
};
const handleSubmit = (e) => {
e.preventDefault();
// console.log(productData);
dispatch(updateProduct({ id, productData }));
navigate("/admin/products");
};
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div className="max-w-5xl mx-auto p-6 shadow-md rounded-md">
<h2 className="text-3xl font-bold mb-6">Edit Product</h2>
<form onSubmit={handleSubmit}>
{/* Name - 名稱 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Product Name</label>
<input
type="text"
name="name"
value={productData.name}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
{/* Description - 描述 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Description</label>
<textarea
name="description"
value={productData.description}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
rows={4}
required
/>
</div>
{/* Price - 價格 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Price</label>
<input
type="number"
name="price"
value={productData.price}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Count In stock - 庫存數量 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Count in Stock</label>
<input
type="number"
name="countInStock"
value={productData.countInStock}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* SKU - 庫存單位 */}
<div className="mb-6">
<label className="block font-semibold mb-2">SKU</label>
<input
type="text"
name="sku"
value={productData.sku}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Sizes - 尺寸 */}
<div className="mb-6">
<label className="block font-semibold mb-2">
Sizes (comma-separated)
</label>
<input
type="text"
name="sizes"
value={productData.sizes.join(", ")}
onChange={(e) =>
setProductData({
...productData,
sizes: e.target.value.split(",").map((size) => size.trim()),
})
}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Colors - 顏色 */}
<div className="mb-6">
<label className="block font-semibold mb-2">
Colors (comma-separated)
</label>
<input
type="text"
name="colors"
value={productData.colors.join(", ")}
onChange={(e) =>
setProductData({
...productData,
colors: e.target.value.split(",").map((color) => color.trim()),
})
}
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
{/* Image Upload - 圖片上傳 */}
<div className="mb-6">
<label className="block font-semibold mb-2">Upload Image</label>
<input type="file" onChange={handleImageUpload} />
{uploading && <p>Uploading image...</p>}
<div className="flex gap-4 mt-4">
{productData.images.map((image, index) => (
<div key={index}>
<img
src={image.url}
alt={image.altText || "Product Image"}
className="w-20 h-20 object-cover rounded-md shadow-md"
/>
</div>
))}
</div>
</div>
<button
type="submit"
className="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 transition-colors"
>
Update Product
</button>
</form>
</div>
);
};
export default EditProductPage;
製作登入時的效果
// frontend/src/pages/Login.jsx
import React, { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import login from "../assets/login.webp";
import { loginUser } from "../redux/slices/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { mergeCart } from "../redux/slices/cartSlice";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const { user, guestId, loading } = useSelector((state) => state.auth);
const { cart } = useSelector((state) => state.cart);
// Get redirect parameter and check if it's checkout or something - 獲取重定向參數並檢查它是否為結帳或其他東西
const redirect = new URLSearchParams(location.search).get("redirect") || "/";
const isCheckoutRedirect = redirect.includes("checkout");
useEffect(() => {
if (user) {
if (cart?.products.length > 0 && guestId) {
dispatch(mergeCart({ guestId, user })).then(() => {
navigate(isCheckoutRedirect ? "/checkout" : "/");
});
} else {
navigate(isCheckoutRedirect ? "/checkout" : "/");
}
}
}, [user, guestId, cart, navigate, isCheckoutRedirect, dispatch]);
const handleSubmit = (e) => {
e.preventDefault();
// console.log("User Login:", { email, password });
dispatch(loginUser({ email, password }));
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
{loading ? "loading..." : "Sign In"}
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link
to={`/register?redirect=${encodeURIComponent(redirect)}`}
className="text-blue-500"
>
Register
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={login}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Login;
製作註冊時的效果
// frontend/src/pages/Register.jsx
import React, { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import register from "../assets/register.webp";
import { registerUser } from "../redux/slices/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { mergeCart } from "../redux/slices/cartSlice";
const Register = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const { user, guestId, loading } = useSelector((state) => state.auth);
const { cart } = useSelector((state) => state.cart);
// Get redirect parameter and check if it's checkout or something - 獲取重定向參數並檢查它是否為結帳或其他東西
const redirect = new URLSearchParams(location.search).get("redirect") || "/";
const isCheckoutRedirect = redirect.includes("checkout");
useEffect(() => {
if (user) {
if (cart?.products.length > 0 && guestId) {
dispatch(mergeCart({ guestId, user })).then(() => {
navigate(isCheckoutRedirect ? "/checkout" : "/");
});
} else {
navigate(isCheckoutRedirect ? "/checkout" : "/");
}
}
}, [user, guestId, cart, navigate, isCheckoutRedirect, dispatch]);
const handleSubmit = (e) => {
e.preventDefault();
// console.log("User Registered:", { name, email, password });
dispatch(registerUser({ name, email, password }));
};
return (
<div className="flex">
<div className="w-full md:w-1/2 flex flex-col justify-center items-center p-8 md:p-12">
<form
onSubmit={handleSubmit}
className="w-full max-w-md bg-white p-8 rounded-lg border shadow-sm"
>
<div className="flex justify-center mb-6">
<h2 className="text-xl font-medium">Rabbit</h2>
</div>
<h2 className="text-2xl font-bold text-center mb-6">Hey there! </h2>
<p className="text-center mb-6">
Enter your username and password to Login.
</p>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your name"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your email address"
/>
</div>
<div className="mb-4">
<label className="block text-sm font-semibold mb-2">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 border rounded"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-black text-white p-2 rounded-lg font-semibold hover:bg-gray-800 transition"
>
{loading ? "loading..." : "Sign up"}
</button>
<p className="mt-6 text-center text-sm">
Don't have an account?{" "}
<Link
to={`/login?redirect=${encodeURIComponent(redirect)}`}
className="text-blue-500"
>
Login
</Link>
</p>
</form>
</div>
<div className="hidden md:block w-1/2 bg-gray-800">
<div className="h-full flex flex-col justify-center items-center">
<img
src={register}
alt="Login to Account"
className="h-[750px] w-full object-cover"
/>
</div>
</div>
</div>
);
};
export default Register;
修正訂單確認頁面
- 修正訂單確認後清空購物車
navigate 的 /my-order 要改為 /my-orders
// frontend/src/pages/OrderConfirmationPage.jsx
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearCart } from "../redux/slices/cartSlice";
const OrderConfirmationPage = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { checkout } = useSelector((state) => state.checkout);
// Clear the cart when the order is confirmed - 訂單確認後清空購物車
useEffect(() => {
if (checkout && checkout._id) {
dispatch(clearCart());
localStorage.removeItem("cart");
} else {
navigate("/my-orders");
}
}, [checkout, dispatch, navigate]);
const calculateEstimatedDelivery = (createdAt) => {
const orderDate = new Date(createdAt);
orderDate.setDate(orderDate.getDate() + 10); // Add 10 days to the order date - 訂單日期增加10天
return orderDate.toLocaleDateString();
};
return (
<div className="max-w-4xl mx-auto p-6 bg-white">
<h1 className="text-4xl font-bold text-center text-emerald-700 mb-8">
Thank You for Your Order!
</h1>
{checkout && (
<div className="p-6 rounded-lg border">
<div className="flex justify-between mb-20">
{/* Order Id and Date - 訂單編號和日期 */}
<div>
<h2 className="text-xl font-semibold">
Order ID: {checkout._id}
</h2>
<p className="text-gray-500">
Order date: {new Date(checkout.createdAt).toLocaleDateString()}
</p>
</div>
{/* Estimated Delivery- 預計送達 */}
<div>
<p className="text-emerald-700 text-sm">
Estimated Delivery:{" "}
{calculateEstimatedDelivery(checkout.createdAt)}
</p>
</div>
</div>
{/* Ordered Items - 訂單項目 */}
<div className="mb-20">
{checkout.checkoutItems.map((item) => (
<div key={item.productId} className="flex items-center mb-4">
<img
src={item.image}
alt={item.name}
className="w-16 h-16 object-cover rounded-md mr-4"
/>
<div>
<h4 className="text-md font-semibold">{item.name}</h4>
<p className="text-sm text-gray-500">
{item.color} | {item.size}
</p>
</div>
<div className="ml-auto text-right">
<p className="text-md">${item.price}</p>
<p className="text-sm text-gray-500">Qty: {item.quantity}</p>
</div>
</div>
))}
</div>
{/* Payment and Delivery Info - 付款與送貨資訊 */}
<div className="grid grid-cols-2 gap-8">
{/* Payment Info - 付款資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Payment</h4>
<p className="text-gray-600">PayPal</p>
</div>
{/* Delivery Info - 送貨資訊 */}
<div>
<h4 className="text-lg font-semibold mb-2">Delivery</h4>
<p className="text-gray-600">
{checkout.shippingAddress.address}
</p>
<p className="text-gray-600">
{checkout.shippingAddress.city},{" "}
{checkout.shippingAddress.country}
</p>
</div>
</div>
</div>
)}
</div>
);
};
export default OrderConfirmationPage;
以上完成了前端、後端、Redux(狀態管理)的開發與整合。