79000 IQD
Detaylar
{
Alpine.data("productDetails", () => ({
productId: '5014',
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);
});
},
}))
})
Tekrar Hoş Geldiniz Hesap Oluştur
Telefon numaranızla giriş yapın Kaydınızı tamamlayın
Bu telefon numarası, hesabınız için kullanılacaktır.
PetLand Online'ın bültene analitik web işaretçileri eklemesine ve alışveriş sepetine bir şey koyduğumda bir bildirim göndermek de dahil olmak üzere, satın alma ve kullanım davranışlarıma dayalı kişiselleştirilmiş bir kullanıcı profili oluşturmasına izin veriyorum. Daha fazla ayrıntı Gizlilik Politikamızın 5. maddesinde bulunabilir. Onayımı istediğim zaman [email protected] adresine e-posta göndererek geri çekebileceğimi anlıyorum.