Luxury Airline Approved Trolley - Orange
79000 IQD
Details
{
Alpine.data("productDetails", () => ({
productId: '5013',
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);
});
},
}))
})
Welcome Back Create Account
Sign in with your phone number Complete your registration
This phone number will be used for your account
I agree that PetLand Online may insert analytical web beacons into the newsletter and create a personalized user profile based on my purchase and usage behavior, including sending a notification when I have placed something in the shopping cart. Further details can be found in our Privacy Policy, clause 5. I understand that I can revoke my consent at any time by emailing [email protected].