🛒

Your cart is empty

\n Looks like you haven't added any items to your cart yet.\n

\n \n Start Shopping\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

Shopping Cart

\n {cart.itemCount} item{cart.itemCount !== 1 ? 's' : ''} in your cart\n

\n\n {/* Cart Items */}\n

\n {cart.items.map(item => (\n \n ))}\n

\n\n {/* Cart Summary */}\n

\n Total:\n \n ${cart.total.toFixed(2)}\n \n

\n\n

\n \n Continue Shopping\n \n \n Proceed to Checkout\n \n

\n );\n}\n\ninterface CartItemProps {\n item: any; // CartItem with product details\n onUpdateQuantity: (productId: number, quantity: number) => void;\n onRemoveItem: (productId: number) => void;\n}\n\nfunction CartItem({ item, onUpdateQuantity, onRemoveItem }: CartItemProps) {\n const product = item.product || item; // Handle different data structures\n const itemTotal = (product.price || 0) * item.quantity;\n\n return (\n

\n {/* Product Image */}\n

\n {product.image_url ? (\n \n ) : (\n

\n 📦\n

\n )}\n

\n\n {/* Product Details */}\n

\n {product.name}\n

{product.category}

\n ${(product.price || 0).toFixed(2)} each\n

\n\n {/* Quantity Controls */}\n

\n onUpdateQuantity(item.product_id, item.quantity - 1)}\n className=\"px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-l-lg\"\n disabled={item.quantity <= 1}\n >\n -\n \n \n {item.quantity}\n \n onUpdateQuantity(item.product_id, item.quantity + 1)}\n className=\"px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-r-lg\"\n disabled={item.quantity >= (product.stock || 999)}\n >\n +\n \n

\n\n {/* Item Total */}\n

\n ${itemTotal.toFixed(2)}\n

\n onRemoveItem(item.product_id)}\n className=\"text-sm text-red-600 hover:text-red-800 mt-1\"\n >\n Remove\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Zee_paul/App/code/frontend/components/Cart.tsx","extension","actionData","errors"]