<div x-data="{
items: [
{ id: 1, name: 'Wireless Headphones', price: 79.99, quantity: 1, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop' },
{ id: 2, name: 'Smart Watch', price: 199.99, quantity: 1, image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop' }
],
get total() {
return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2);
},
removeItem(id) {
this.items = this.items.filter(item => item.id !== id);
}
}" class="max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-xl font-bold mb-4">Shopping Cart</h3>
<div class="space-y-4">
<template x-for="item in items" :key="item.id">
<div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name"></h4>
<p class="text-gray-600" x-text="'$' + item.price"></p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity"></span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div>
</template><div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop" alt="Wireless Headphones">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name">Wireless Headphones</h4>
<p class="text-gray-600" x-text="'$' + item.price">$79.99</p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity">1</span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div><div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop" alt="Smart Watch">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name">Smart Watch</h4>
<p class="text-gray-600" x-text="'$' + item.price">$199.99</p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity">1</span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div>
</div>
<div class="mt-6 pt-4 border-t">
<div class="flex justify-between text-xl font-bold mb-4">
<span>Total:</span>
<span x-text="'$' + total">$279.98</span>
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition">
Checkout
</button>
</div>
</div>
</div>