GET MORE BEERS FOR YOUR BUCK
If you add 12 beers to your order we will knock off 5% off your box
import React, { useState } from 'react';
import { Minus, Plus } from 'lucide-react';
// Sample cart data structure
const initialCart = {
items: [
{
id: 1,
title: "Sample Product",
image: "/api/placeholder/100/100",
price: 29.99,
compareAtPrice: 39.99,
quantity: 1,
variant: {
title: "Blue / Large",
options: ["Color: Blue", "Size: Large"]
}
}
],
note: "" // This will become order.note in Shopify
};
const ShoppingCart = () => {
const [cart, setCart] = useState(initialCart);
const [specialInstructions, setSpecialInstructions] = useState("");
const updateQuantity = (itemId, newQuantity) => {
if (newQuantity < 1) return;
setCart(prevCart => ({
...prevCart,
items: prevCart.items.map(item =>
item.id === itemId ? { ...item, quantity: newQuantity } : item
)
}));
};
const updateNote = (note) => {
setCart(prevCart => ({
...prevCart,
note: note // This will become order.note
}));
};
const calculateTotal = () => {
return cart.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
};
if (cart.items.length === 0) {
return (
);
}
return (
Shopping Cart
Your cart is empty
Continue browsing our store
Shopping Cart
| Product | Price | Quantity | Total |
|---|---|---|---|
{item.title}{item.variant.title !== 'Default' && (
{item.variant.options.map((option, idx) => (
)}
{option}
))}
|
{item.compareAtPrice ? (
${item.compareAtPrice}
${item.price}
) : (
${item.price}
)}
|
updateQuantity(item.id, parseInt(e.target.value))}
className="w-16 text-center border rounded p-1"
min="1"
/>
|
${(item.price * item.quantity).toFixed(2)} |