Add to Cart

The cart context is set up but nothing uses it yet. Let’s wire the “Add to Cart” button on the product detail page.

Update the product detail page

In src/routes/products.$productId.tsx, add the import and hook call:

import { useCart } from "@/hooks/use-cart";

Inside ProductPage, call the hook:

const { addToCart } = useCart();

Then update the button to call addToCart:

<Button className="mt-6" size="lg" onClick={() => addToCart(product)}>
  Add to Cart
</Button>

Click “Add to Cart” and watch the badge appear in the header. Click it again and the count increases. The "added" action in the reducer checks if the product already exists and increments the quantity instead of adding a duplicate.

Cart badge after adding items

Checkpoint: Commit your progress.

git add .
git commit -m "shopping-cart-09: Add to cart from product detail page"
git push