130 lines
4.6 KiB
JavaScript
130 lines
4.6 KiB
JavaScript
|
class Wishlist {
|
||
|
constructor() {
|
||
|
this.wishlist = JSON.parse(localStorage.getItem('wishlist')) || [];
|
||
|
this.wishlistIcon = document.querySelector('.wishlist-icon');
|
||
|
this.wishlistCount = document.querySelector('.wishlist-count');
|
||
|
|
||
|
this.initializeWishlist();
|
||
|
}
|
||
|
|
||
|
initializeWishlist() {
|
||
|
// تحديث عداد المفضلة
|
||
|
this.updateWishlistCount();
|
||
|
|
||
|
// إضافة مستمعي الأحداث لأزرار المفضلة
|
||
|
document.querySelectorAll('.add-to-wishlist').forEach(button => {
|
||
|
button.addEventListener('click', (e) => this.toggleWishlist(e));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
toggleWishlist(e) {
|
||
|
e.preventDefault();
|
||
|
const productCard = e.target.closest('.product-card');
|
||
|
const productId = productCard.dataset.id;
|
||
|
const productName = productCard.querySelector('h3').textContent;
|
||
|
const productPrice = parseFloat(productCard.querySelector('.product-price').textContent);
|
||
|
const productImage = productCard.querySelector('img').src;
|
||
|
|
||
|
const index = this.wishlist.findIndex(item => item.id === productId);
|
||
|
|
||
|
if (index === -1) {
|
||
|
// إضافة المنتج للمفضلة
|
||
|
this.wishlist.push({
|
||
|
id: productId,
|
||
|
name: productName,
|
||
|
price: productPrice,
|
||
|
image: productImage
|
||
|
});
|
||
|
this.showNotification('تمت إضافة المنتج إلى المفضلة');
|
||
|
e.target.classList.add('active');
|
||
|
} else {
|
||
|
// إزالة المنتج من المفضلة
|
||
|
this.wishlist.splice(index, 1);
|
||
|
this.showNotification('تمت إزالة المنتج من المفضلة');
|
||
|
e.target.classList.remove('active');
|
||
|
}
|
||
|
|
||
|
this.updateWishlist();
|
||
|
}
|
||
|
|
||
|
updateWishlist() {
|
||
|
// تحديث Local Storage
|
||
|
localStorage.setItem('wishlist', JSON.stringify(this.wishlist));
|
||
|
|
||
|
// تحديث عداد المفضلة
|
||
|
this.updateWishlistCount();
|
||
|
|
||
|
// تحديث عرض المفضلة في الصفحة
|
||
|
this.updateWishlistDisplay();
|
||
|
}
|
||
|
|
||
|
updateWishlistCount() {
|
||
|
if (this.wishlistCount) {
|
||
|
this.wishlistCount.textContent = this.wishlist.length;
|
||
|
this.wishlistCount.style.display = this.wishlist.length > 0 ? 'block' : 'none';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
updateWishlistDisplay() {
|
||
|
const wishlistContainer = document.querySelector('.wishlist-items');
|
||
|
if (!wishlistContainer) return;
|
||
|
|
||
|
if (this.wishlist.length === 0) {
|
||
|
wishlistContainer.innerHTML = '<p class="empty-wishlist">لا توجد منتجات في المفضلة</p>';
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
wishlistContainer.innerHTML = this.wishlist.map(item => `
|
||
|
<div class="wishlist-item" data-id="${item.id}">
|
||
|
<img src="${item.image}" alt="${item.name}">
|
||
|
<div class="item-details">
|
||
|
<h4>${item.name}</h4>
|
||
|
<div class="item-price">${item.price} جنيه</div>
|
||
|
</div>
|
||
|
<div class="item-actions">
|
||
|
<button class="add-to-cart" onclick="cart.addToCart(event)">
|
||
|
<i class="fas fa-shopping-cart"></i>
|
||
|
</button>
|
||
|
<button class="remove-from-wishlist" onclick="wishlist.removeFromWishlist('${item.id}')">
|
||
|
<i class="fas fa-trash"></i>
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
`).join('');
|
||
|
}
|
||
|
|
||
|
removeFromWishlist(productId) {
|
||
|
const index = this.wishlist.findIndex(item => item.id === productId);
|
||
|
if (index !== -1) {
|
||
|
this.wishlist.splice(index, 1);
|
||
|
this.updateWishlist();
|
||
|
this.showNotification('تمت إزالة المنتج من المفضلة');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
showNotification(message) {
|
||
|
const notification = document.createElement('div');
|
||
|
notification.className = 'wishlist-notification';
|
||
|
notification.textContent = message;
|
||
|
|
||
|
document.body.appendChild(notification);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.add('show');
|
||
|
}, 100);
|
||
|
|
||
|
setTimeout(() => {
|
||
|
notification.classList.remove('show');
|
||
|
setTimeout(() => notification.remove(), 300);
|
||
|
}, 2000);
|
||
|
}
|
||
|
|
||
|
// التحقق من وجود منتج في المفضلة
|
||
|
isInWishlist(productId) {
|
||
|
return this.wishlist.some(item => item.id === productId);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// تهيئة نظام المفضلة
|
||
|
const wishlist = new Wishlist();
|