You can also watch the YouTube video: [Next Js Tutorial #9 | Ecommerce App - Cart Page](https://www.youtube.com/watch?v=z8Cyr6hW-DY) ### Installing Required Dependencies ```bash yarn add zustand ``` ### Installing Required ShadCN UI Components ```bash npx shadcn@latest add scroll-area separator ``` Create `useCart.js` in `hooks` folder: ```js import { create } from "zustand"; import { createJSONStorage, persist } from "zustand/middleware"; export const useCart = create()( persist( (set) => ({ items: [], addItem: (product) => { set((state) => { const isAddedBefore = state.items.find( (item) => item.product.id === product.id ); if (isAddedBefore) { const index = state.items.findIndex( (item) => item.product.id === isAddedBefore.product.id ); state.items[index] = { product: isAddedBefore.product, quantity: isAddedBefore.quantity + 1, }; return { items: [...state.items], }; } else { return { items: [...state.items, { product, quantity: 1 }] }; } }); }, removeItem: (id) => set((state) => ({ items: state.items.filter((item) => item.product.id !== id), })), increaseQuantity: (id) => { set((state) => { const cartItem = state.items.find((item) => item.product.id === id); if (cartItem) { const index = state.items.findIndex( (item) => item.product.id === cartItem.product.id ); state.items[index] = { product: cartItem.product, quantity: cartItem.quantity + 1, }; } return { items: [...state.items] }; }); }, decreaseQuantity: (id) => { set((state) => { const cartItem = state.items.find((item) => item.product.id === id); if (cartItem) { const index = state.items.findIndex( (item) => item.product.id === cartItem.product.id ); if (cartItem.quantity > 1) { state.items[index] = { product: cartItem.product, quantity: cartItem.quantity - 1, }; } else { state.items.splice(index, 1); } } return { items: [...state.items] }; }); }, clearCart: () => set({ items: [] }), }), { name: "cart-storage", storage: createJSONStorage(() => localStorage), } ) ); ``` We'll need empty cart image so you can find it on internet or you can use the image down below: Create `empty-cart.svg` in `public` folder: ```jsx ``` Edit `Header.jsx` in `components` folder: ```js // Import Cart Component import Cart from "./Cart"; // find this line // add this line ``` Create `Cart.jsx` in `components` folder: ```js "use client"; import { useCart } from "@/hooks/useCart"; import { ShoppingCart } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import CartItem from "./CartItem"; import { Button } from "./ui/button"; import { ScrollArea } from "./ui/scroll-area"; import { Separator } from "./ui/separator"; import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./ui/sheet"; const Cart = () => { const { items } = useCart(); const itemCount = items.length; const cartTotal = items.reduce( (total, { product, quantity }) => total + product.price * quantity, 0 ); const fee = 1; return ( Cart ({itemCount}) {itemCount > 0 ? ( <>

{items.map(({ product, quantity }) => ( ))}

Shipping Free

Transaction Fee ${fee} USD

Total ${cartTotal + fee} USD

) : (

Your cart is empty

)} ); }; export default Cart; ``` Create `CartItem.jsx` in `components` folder: ```js import { useCart } from "@/hooks/useCart"; import { X } from "lucide-react"; import Image from "next/image"; const CartItem = ({ product, quantity }) => { const { removeItem } = useCart(); return (

{product.title} {quantity > 1 ? `(${quantity})` : null}

Remove

${product.price * quantity} USD

); }; export default CartItem; ``` Create `AddToCartButton.jsx` in `components` folder: ```js "use client"; import { useCart } from "@/hooks/useCart"; import { useEffect, useState } from "react"; import { Button } from "./ui/button"; const AddToCartButton = ({ product }) => { const { addItem } = useCart(); const [isSuccess, setIsSuccess] = useState(false); useEffect(() => { const timeout = setTimeout(() => { setIsSuccess(false); }, 2000); return () => clearTimeout(timeout); }, [isSuccess]); return ( ); }; export default AddToCartButton; ``` Edit `page.js` in `app/[id]` folder: ```js // import the button component import AddToCartButton from "@/components/AddToCartButton"; // Replace the regular button with AddToCartButton component ; // delete this line ; // add this line ``` Create `page.js` in `app/cart` folder: ```js "use client"; import { Button } from "@/components/ui/button"; import { useCart } from "@/hooks/useCart"; import { cn } from "@/lib/utils"; import { Minus, Plus, X } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; const CartPage = () => { const { items, removeItem, increaseQuantity, decreaseQuantity, clearCart } = useCart(); const productIDs = items.map(({ product }) => product.id); const cartTotal = items.reduce( (total, { product, quantity }) => total + product.price * quantity, 0 ); return (

Shopping Cart

Items in your shopping cart

{items.length === 0 ? (

Your cart is empty

Nothing to show here yet.

) : null}

{product.title}{" "} {quantity > 1 ? `(${quantity})` : null}

${product.price * quantity} USD

Order Summary

Subtotal

{cartTotal}

Flat Transaction Fee

{1}

Order Total

{cartTotal + 1}

); }; export default CartPage; ``` That's it for this tutorial, we created cart page and cart components. Next tutorial we'll create my orders page and api route for it.

Shopping Cart

Items in your shopping cart

Your cart is empty

{product.title}{" "} {quantity > 1 ? `(${quantity})` : null}

Order Summary