{ Alpine.data("productDetails", () => ({ productId: '11562', error: false, auth: false, isLoading: false, quantity: 0, cartId: null, isInCart: false, showSizeTooltip: false, tooltipX: 0, tooltipY: 0, init() { if (this.auth) { this.fetchCart(); } // Listen for cart updates from other components this.$watch('quantity', (value) => { this.isInCart = value > 0; }); }, async addToCart() { // Check if user is authenticated if (!'') { window.dispatchEvent(new CustomEvent('open-auth-modal')); return; } await this.createOrUpdateCart(1); }, async increaseQuantity() { const newQuantity = this.quantity + 1; await this.updateQuantity(this.productId, newQuantity); }, async decreaseQuantity() { const newQuantity = this.quantity - 1; await this.updateQuantity(this.productId, newQuantity); }, // Creates cart for the first time or updates existing cart async createOrUpdateCart(initialQuantity = 1) { this.isLoading = true; try { const response = await fetch('/carts/store', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') }, body: JSON.stringify({ product_id: this.productId, quantity: initialQuantity }) }); const data = await response.json(); if (response.ok) { this.quantity = initialQuantity; this.showNotification(data.message || `${this.productName} added to cart!`, 'success'); } else { this.showNotification(data.message || 'Failed to add to cart!', 'error'); throw new Error('Failed to add to cart.'); } } catch (error) { console.error('Error creating/updating cart:', error); this.showNotification('Failed to add to cart. Please try again.', 'error'); } finally { this.isLoading = false; } }, // Updates the quantity of an item async updateQuantity(itemId, quantity) { // Basic validation if (quantity < 1) { // If user enters 0 or less, treat it as a remove action await this.removeItem(itemId); return; } this.isLoading = true; try { const response = await fetch(`/carts/product/${itemId}`, { method: 'PATCH', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') }, body: JSON.stringify({ quantity: quantity }) }); const data = await response.json(); console.log(data); if (response.ok) { // Update local state // window.cartManager.setQuantity(itemId, quantity); this.quantity = quantity; if (quantity === 0) { this.showNotification(data.message || 'Item removed from cart!', 'info'); } else { this.showNotification(data.message || 'Quantity updated!', 'success'); } } else { this.showNotification(data.message || 'Failed to update quantity!', 'error'); // throw new Error('Failed to update quantity.'); } } catch (error) { console.error('Error updating quantity:', error); this.showNotification('Failed to update quantity. Please try again.', 'error'); // Refresh local state from server if needed await this.fetchCart(); } finally { this.isLoading = false; } }, // Remove item from cart async removeItem(itemId) { this.isLoading = true; try { const response = await fetch(`/carts/product/${itemId}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector( 'meta[name="csrf-token"]').getAttribute( 'content') } }); const data = await response.json(); if (response.ok) { // Update local state // window.cartManager.setQuantity(itemId, 0); this.quantity = 0; this.showNotification(data.message || 'Item removed from cart!', 'success'); } else { this.showNotification(data.message || 'Failed to remove item!', 'error'); throw new Error('Failed to remove item.'); } } catch (error) { console.error('Error removing item:', error); this.showNotification('Failed to remove item. Please try again.', 'error'); } finally { this.isLoading = false; } }, // Fetch current cart state from server (for consistency) async fetchCart() { try { const response = await fetch('/carts/index', { method: 'GET', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', } }); const data = await response.json(); if (response.ok && data.data.cart) { // Update local cart state const newCart = {}; data.data.cart.forEach(item => { newCart[item.product_id] = item.quantity; }); // Update this component's quantity this.quantity = newCart[this.productId] || 0; if (this.quantity > 0) { this.isInCart = true; } this.cartId = data.data.cart.id; } } catch (error) { console.error('Error fetching cart:', error); } }, updateTooltipPosition(event) { this.tooltipX = event.pageX + 14; this.tooltipY = event.pageY + 14; }, showNotification(message, type = 'info') { setTimeout(() => { setTimeout(() => { if (typeof notify !== 'undefined') { notify(message, type); } else { console.log(`${type.toUpperCase()}: ${message}`); } }, 300); }); }, })) })