Mtshop

// Sample product data (you can replace this with your actual product data) const products = [ { id: 1, name: 'Product 1', price: 19.99, image: 'https://via.placeholder.com/150' }, { id: 2, name: 'Product 2', price: 29.99, image: 'https://via.placeholder.com/150' }, { id: 3, name: 'Product 3', price: 39.99, image: 'https://via.placeholder.com/150' }, // Add more products as needed ]; let cart = []; // Function to render product list function renderProducts() { const productList = document.querySelector('.product-list'); productList.innerHTML = ''; products.forEach(product => { const productElement = document.createElement('div'); productElement.classList.add('product-item'); productElement.innerHTML = `

${product.name}

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

`; productList.appendChild(productElement); }); } // Function to add item to cart function addToCart(productId) { const product = products.find(p => p.id === productId); if (product) { cart.push(product); updateCartCount(); } } // Function to update cart count function updateCartCount() { const cartCount = document.getElementById('cart-count'); cartCount.textContent = cart.length; } // Function to render cart items function renderCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(item => { const itemElement = document.createElement('div'); itemElement.innerHTML = `

${item.name} - $${item.price.toFixed(2)}

`; cartItems.appendChild(itemElement); total += item.price; }); cartTotal.textContent = total.toFixed(2); } // Event listeners document.addEventListener('DOMContentLoaded', () => { renderProducts(); const cartIcon = document.querySelector('.cart-icon'); const modal = document.getElementById('cart-modal'); const closeModal = document.getElementById('close-modal'); const checkoutBtn = document.getElementById('checkout-btn'); cartIcon.addEventListener('click', () => { renderCart(); modal.style.display = 'block'; }); closeModal.addEventListener('click', () => { modal.style.display = 'none'; }); checkoutBtn.addEventListener('click', () => { alert('Checkout functionality not implemented in this example.'); }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; } }); });