Devco1
Home
Console
Upload
New File
New Folder
Tools
Info
About
/
home
/
wifiyecu
/
www
/
js
/
Filename :
script.js
back
Copy
// إدارة سلة التسوق class ShoppingCart { constructor() { this.init(); } init() { this.bindEvents(); this.updateCartCount(); } bindEvents() { // إضافة منتج إلى السلة document.addEventListener('click', (e) => { if (e.target.classList.contains('add-to-cart') || e.target.closest('.add-to-cart')) { const button = e.target.classList.contains('add-to-cart') ? e.target : e.target.closest('.add-to-cart'); this.addToCart(button.dataset.productId); } // إزالة منتج من السلة if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) { const button = e.target.classList.contains('remove-item') ? e.target : e.target.closest('.remove-item'); this.removeFromCart(button.dataset.cartId); } }); // تحديث الكمية في سلة التسوق document.addEventListener('click', (e) => { if (e.target.classList.contains('increase') || e.target.closest('.increase')) { const button = e.target.classList.contains('increase') ? e.target : e.target.closest('.increase'); const cartItem = button.closest('.cart-item'); this.updateQuantity(cartItem.dataset.cartId, 'increase'); } if (e.target.classList.contains('decrease') || e.target.closest('.decrease')) { const button = e.target.classList.contains('decrease') ? e.target : e.target.closest('.decrease'); const cartItem = button.closest('.cart-item'); this.updateQuantity(cartItem.dataset.cartId, 'decrease'); } }); } async addToCart(productId) { try { const quantity = document.getElementById('quantity') ? parseInt(document.getElementById('quantity').value) : 1; const response = await fetch('ajax/add_to_cart.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ product_id: productId, quantity: quantity }) }); const result = await response.json(); if (result.success) { this.showMessage('تمت إضافة المنتج إلى السلة', 'success'); this.updateCartCount(); } else { this.showMessage(result.message, 'error'); } } catch (error) { console.error('Error:', error); this.showMessage('حدث خطأ في الاتصال', 'error'); } } async removeFromCart(cartId) { if (!confirm('هل تريد حذف هذا المنتج من السلة؟')) return; try { const response = await fetch('ajax/remove_from_cart.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ cart_id: cartId }) }); const result = await response.json(); if (result.success) { document.querySelector(`.cart-item[data-cart-id="${cartId}"]`).remove(); this.updateCartCount(); this.showMessage('تم حذف المنتج من السلة', 'success'); location.reload(); // إعادة تحميل الصفحة لتحديث الإجمالي } } catch (error) { console.error('Error:', error); this.showMessage('حدث خطأ أثناء الحذف', 'error'); } } async updateQuantity(cartId, action) { try { const response = await fetch('ajax/update_cart_quantity.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ cart_id: cartId, action: action }) }); const result = await response.json(); if (result.success) { location.reload(); // إعادة تحميل الصفحة لتحديث الإجمالي } } catch (error) { console.error('Error:', error); this.showMessage('حدث خطأ أثناء التحديث', 'error'); } } async updateCartCount() { try { const response = await fetch('ajax/get_cart_count.php'); const result = await response.json(); if (result.success) { const cartCount = document.getElementById('cartCount'); if (cartCount) { cartCount.textContent = result.count; } } } catch (error) { console.error('Error:', error); } } showMessage(message, type) { // إنشاء عنصر الرسالة const messageDiv = document.createElement('div'); messageDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`; messageDiv.style.position = 'fixed'; messageDiv.style.top = '20px'; messageDiv.style.right = '20px'; messageDiv.style.zIndex = '9999'; messageDiv.style.minWidth = '300px'; messageDiv.innerHTML = ` ${message} <button type="button" class="btn-close" data-bs-dismiss="alert"></button> `; document.body.appendChild(messageDiv); // إزالة الرسالة تلقائياً بعد 3 ثواني setTimeout(() => { if (messageDiv.parentNode) { messageDiv.remove(); } }, 3000); } } // البحث والفلاتر class SearchFilter { constructor() { this.init(); } init() { const filterBtn = document.getElementById('filterBtn'); if (filterBtn) { filterBtn.addEventListener('click', this.filterProducts.bind(this)); } } async filterProducts() { const searchTerm = document.getElementById('searchInput').value; const brand = document.getElementById('brandFilter').value; const priceRange = document.getElementById('priceFilter').value; try { const response = await fetch('ajax/filter_products.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ search: searchTerm, brand: brand, price_range: priceRange }) }); const products = await response.json(); this.updateProductsGrid(products); } catch (error) { console.error('Error:', error); } } updateProductsGrid(products) { const container = document.getElementById('productsContainer'); if (!container) return; container.innerHTML = products.map(product => ` <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card product-card h-100"> ${product.old_price && product.old_price > product.price ? `<div class="discount-badge"><span class="badge bg-danger">خصم ${Math.round((product.old_price - product.price) / product.old_price * 100)}%</span></div>` : ''} <img src="${product.image_url || 'images/placeholder.jpg'}" class="card-img-top" alt="${product.name}" style="height: 200px; object-fit: cover;"> <div class="card-body d-flex flex-column"> <h5 class="card-title">${product.name}</h5> <p class="card-text text-muted small">${product.brand}</p> <div class="price-section mb-2"> ${product.old_price ? `<span class="text-muted text-decoration-line-through me-2">$${product.old_price}</span>` : ''} <span class="h5 text-primary">$${product.price}</span> </div> <div class="stock-info mb-2"> <small class="${product.stock_quantity > 10 ? 'text-success' : 'text-warning'}"> <i class="fas fa-box"></i> ${product.stock_quantity} متوفر </small> </div> <div class="mt-auto"> <div class="d-grid gap-2"> <a href="product.php?id=${product.id}" class="btn btn-outline-primary"> <i class="fas fa-eye"></i> عرض التفاصيل </a> <button class="btn btn-primary add-to-cart" data-product-id="${product.id}"> <i class="fas fa-cart-plus"></i> إضافة إلى السلة </button> </div> </div> </div> </div> </div> `).join(''); } } // تهيئة التطبيق عند تحميل الصفحة document.addEventListener('DOMContentLoaded', function() { new ShoppingCart(); new SearchFilter(); });