Bag Checkout

Component 2

About

The component with sample products using your provided image URL. All animations are smooth and modern, enhancing the premium e-commerce experience!

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bag Checkout to your project and fits it to your theme.

Code

How Bag Checkout is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  )
}