🛒 Shopping Cart

<div x-data="{ showCart: false, cartItems: [] }">
    <button @click="showCart = true" class="bg-blue-600 text-white px-4 py-2 rounded">
        Open Cart (<span x-text="cartItems.length"></span>)
    </button>
    
    <div x-show="showCart" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="transform translate-x-full"
         x-transition:enter-end="transform translate-x-0"
         class="fixed right-0 top-0 h-full w-96 bg-white shadow-xl z-50">
        <!-- Cart content -->
    </div>
</div>

<div class="flex items-center space-x-2">
    <button @click="updateQuantity(item.id, item.qty - 1)" 
            class="w-8 h-8 bg-gray-200 rounded hover:bg-gray-300">-</button>
    <span x-text="item.qty" class="w-8 text-center"></span>
    <button @click="updateQuantity(item.id, item.qty + 1)" 
            class="w-8 h-8 bg-gray-200 rounded hover:bg-gray-300">+</button>
</div>

<script>
function updateQuantity(id, qty) {
    const item = this.cartItems.find(item => item.id === id);
    if (item) {
        item.qty = Math.max(0, qty);
        if (item.qty === 0) {
            this.removeItem(id);
        }
    }
}
</script>

<div x-data="{ 
    subtotal: 299.97, 
    discount: 0, 
    shipping: 15.99,
    get total() { 
        return this.subtotal - this.discount + this.shipping; 
    },
    applyCoupon(code) {
        if (code.toLowerCase() === 'save10') {
            this.discount = this.subtotal * 0.1;
        }
    }
}">
    <div class="space-y-2">
        <div class="flex justify-between">
            <span>Subtotal:</span>
            <span x-text="'$' + subtotal.toFixed(2)"></span>
        </div>
        <div x-show="discount > 0" class="flex justify-between text-green-600">
            <span>Discount:</span>
            <span x-text="'-$' + discount.toFixed(2)"></span>
        </div>
        <div class="flex justify-between font-bold">
            <span>Total:</span>
            <span x-text="'$' + total.toFixed(2)"></span>
        </div>
    </div>
</div>