Components
The component with sample products using your provided image URL. All animations are smooth and modern, enhancing the premium e-commerce experience!
Loading preview...
"use client"
import { ShoppingCartCheckout } from "@/components/ui/bag-checkout"
const demoCartItems = [
{
id: "1",
name: "Nike Air Force 1 '07",
category: "Men's Shoes",
color: "White/White",
size: "M 9 / W 10.5",
quantity: 1,
price: 110,
image: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-rwia1MUv5NLXZz5qQFGKX7nT2gKxwA.png&w=320&q=75",
},
]
const demoFavoriteItems = [
{
id: "2",
name: "Nike Everyday Plus",
description: "Cushioned Tie-Dye Crew Socks",
price: 18,
image: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-stfOYGQFBDYezht9LeQIma5X6y4OSr.png&w=320&q=75",
},
{
id: "3",
name: "Nike Air Force 1 '07",
description: "Men's Shoes",
price: 110,
image: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-xhhgK6iBOQkB6SHhvc41KybE2cHgkl.png&w=1000&q=75",
},
]
export default function ShoppingCartDemo() {
return (
<div>
<ShoppingCartCheckout
cartItems={demoCartItems}
favoriteItems={demoFavoriteItems}
shippingCost={0}
showShippingOption={true}
onAddToCart={(itemId) => console.log(`Added item ${itemId} to cart`)}
onRemoveFromCart={(itemId) => console.log(`Removed item ${itemId} from cart`)}
onUpdateQuantity={(itemId, quantity) => console.log(`Updated item ${itemId} quantity to ${quantity}`)}
/>
</div>
)
}