Shopping Cart (0)

Total: $0.00
class ECommerce { constructor() { this.products = []; this.cart = JSON.parse(localStorage.getItem('cart')) || []; this.init(); } async init() { await this.loadProducts(); this.setupEventListeners(); this.renderProducts(); this.updateCartUI(); } async loadProducts() { this.showLoading(); try { // Simulated API call await new Promise(resolve => setTimeout(resolve, 1000)); this.products = [ { id: 1, name: 'Bamboo Utensil Set', price: 29.99, category: 'Kitchen', image: 'utensils.jpg', // Add actual image path description: 'Eco-friendly bamboo utensils with organic cotton pouch', rating: 4.5, stock: 10 }, { id: 2, name: 'Reusable Shopping Bags', price: 19.99, category: 'Accessories', image: 'reusable-bags.jpg', // Add actual image path description: 'Set of 5 reusable shopping bags made from recycled materials', rating: 4.0, stock: 50 }, { id: 3, name: 'Biodegradable Phone Case', price: 34.99, category: 'Electronics', image: 'phone-case.jpg', // Add actual image path description: 'Sustainable phone case made from biodegradable materials', rating: 4.8, stock: 20 } ]; } catch (error) { this.showError('Failed to load products'); } finally { this.hideLoading(); } } renderProducts() { const grid = document.querySelector('.product-grid'); grid.innerHTML = this.products.map(product => `
${product.name} Eco Friendly

${this.escapeHtml(product.name)}

${this.renderRatingStars(product.rating)}

${this.escapeHtml(product.description)}

$${product.price.toFixed(2)}

`).join(''); } renderRatingStars(rating) { const fullStars = Math.floor(rating); const halfStar = rating % 1 >= 0.5; return ` ${''.repeat(fullStars)} ${halfStar ? '' : ''} ${''.repeat(5 - fullStars - (halfStar ? 1 : 0))} `; } updateCartUI() { const count = this.cart.reduce((sum, item) => sum + item.quantity, 0); document.querySelectorAll('.cart-count').forEach(el => el.textContent = count); localStorage.setItem('cart', JSON.stringify(this.cart)); const total = this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0); document.querySelector('.cart__total span').textContent = total.toFixed(2); } setupEventListeners() { // Mobile Menu Toggle document.querySelector('.mobile-nav-toggle').addEventListener('click', () => { document.querySelector('.nav__links').classList.toggle('nav__links--visible'); }); // Cart Toggle document.querySelector('.cart-toggle').addEventListener('click', () => { document.querySelector('.cart').classList.toggle('cart--visible'); }); // Close Cart document.querySelector('.cart__close').addEventListener('click', () => { document.querySelector('.cart').classList.remove('cart--visible'); }); // Product Interactions document.addEventListener('click', async (e) => { if (e.target.closest('.add-to-cart')) { const productId = +e.target.dataset.id; this.addToCart(productId); } if (e.target.closest('.quick-view')) { const productId = +e.target.dataset.id; this.showQuickView(productId); } if (e.target.closest('.modal-close')) { this.closeQuickView(); } }); // Checkout Form Submission document.querySelector('.checkout-form').addEventListener('submit', (e) => { e.preventDefault(); alert('Proceeding to payment...'); }); } addToCart(productId) { const product = this.products.find(p => p.id === productId); const cartItem = this.cart.find(item => item.id === productId); if (cartItem) { if (cartItem.quantity < product.stock) { cartItem.quantity++; } else { alert('This product is out of stock'); } } else { this.cart.push({ ...product, quantity: 1 }); } this.updateCartUI(); } showQuickView(productId) { const product = this.products.find(p => p.id === productId); const modal = document.querySelector('.quick-view-modal'); modal.querySelector('.modal-content').innerHTML = `

${this.escapeHtml(product.name)}

${this.escapeHtml(product.description)}

Price: $${product.price.toFixed(2)}

Rating: ${this.renderRatingStars(product.rating)}

Available Stock: ${product.stock}

`; modal.style.display = 'block'; } closeQuickView() { document.querySelector('.quick-view-modal').style.display = 'none'; } escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } showLoading() { document.querySelector('.loading-overlay').style.display = 'grid'; } hideLoading() { document.querySelector('.loading-overlay').style.display = 'none'; } showError(message) { alert(message); } } // Initialize E-Commerce Application const ecom = new ECommerce();