Untitled
unknown
javascript
a year ago
9.3 kB
12
Indexable
// Variables const openShopping = document.querySelector('.shopping'); const closeShoppingDiv = document.querySelector('.closeShopping'); const clearCartDiv = document.querySelector('.clearCart'); const list = document.querySelector('.list'); const listCart = document.querySelector('.listCart'); const body = document.querySelector('body'); const total = document.querySelector('.total'); const quantity = document.querySelector('.quantity'); //Product information const products = [ { id: 1, name: 'African Milk Tree', image: 'AMT_1.png', images: ['AMT_1.png', 'AMT_2.png', 'AMT_3.png'], price: 79.99, description: 'Euphorbia trigona, the African milk tree, cathedral cactus, or Abyssinian euphorbia, is a species of flowering plant that originates from Central Africa. Somewhat common in cultivation as a houseplant or as a hedge, the species is one of the euphorbias with succulent stems and branches as an adaptation to arid climates.' }, { id: 2, name: 'Bishop', image: 'Bishop_1.png', images: ['Bishop_1.png', 'Bishop_2.png', 'Bishop_3.png'], price: 69.99, description: 'Astrophytum myriostigma, the bishops cap cactus, bishops hat or bishops miter cactus, is a species of cactus native to the highlands of northeastern and central Mexico.' }, { id: 3, name: 'Bunny Ears', image: 'Bunny_1.png', images: ['Bunny_1.png', 'Bunny_2.png', 'Bunny_3.png'], price: 129.99, description: 'Opuntia microdasys (angels-wings, bunny ears cactus, bunny cactus or polka-dot cactus) is a species of flowering plant in the cactus family Cactaceae, native and endemic to central and northern Mexico.' }, { id: 4, name: 'Pincushion', image: 'Pincushion_1.png', images: ['Pincushion_1.png', 'Pincushion_2.png', 'Pincushion_3.png'], price: 149.99, description: 'Pelecyphora, pincushion cactus or foxtail cactus is a genus of cacti, comprising 20 species.They originate from Mexico and the United States. Common species include the Missouri foxtail cactus P. missouriensis, widespread in grassland and forest west of the Mississippi, and the spinystar P. vivipara, distributed across the US and into Canada, first described by Nuttall in 1813.' }, { id: 5, name: 'Lady Finger', image: 'Lady_1.png', images: ['Lady_1.png', 'Lady_2.png', 'Lady_3.png'], price: 89.99, description: 'Mammillaria elongata, the gold lace cactus or ladyfinger cactus, is a species of flowering plant in the family Cactaceae, native to central Mexico. Growing to 15 cm (6 in) tall by 30 cm (12 in) wide, it consists of densely packed clusters of elongated oval stems, covered in harmless (although very sharp) yellow or brown spines, and in spring producing white or yellow flowers.' }, { id: 6, name: 'Moon Cactus', image: 'Moon_1.png', images: ['Moon_1.png', 'Moon_2.png', 'Moon_3.png'], price: 49.99, description: 'Gymnocalycium mihanovichii is a species of cactus from South America. The most popular cultivars are varied mutants which completely lack chlorophyll, exposing the red, orange, or yellow pigmentation. These mutant strains are often grafted onto the hylocereus cactus, and the combined plant is called a "Moon Cactus".' } ]; //Makes sure the shopping cart is empty at the start let cartItems = []; //Interaction to open the shopping cart openShopping.addEventListener('click', () => { body.classList.add('active'); }); //Interaction to close the shopping cart closeShoppingDiv.addEventListener('click', () => { body.classList.remove('active'); }); //Interaction to clear the shopping cart clearCartDiv.addEventListener('click', () => { cartItems = []; updateCart(); }); //Creating products elements to the product list, showing the products on the main page function runApp() { products.forEach((product, index) => { let newProduct = document.createElement('div'); newProduct.classList.add('item'); newProduct.innerHTML = ` <img src="image/${product.image}" onclick="openModal(${index})"> <div class="title">${product.name}</div> <div class="price">${formatPrice(parseFloat(product.price))}</div> <button onclick="addToCart(${index})">Add To Cart</button>`; list.appendChild(newProduct); }); } //Add a product to the cart function addToCart(index) { let product = products[index]; let existingItem = cartItems.find(item => item.id === product.id); if (!existingItem) { cartItems.push(Object.assign({}, product, { quantity: 1 })); } else { existingItem.quantity++; } updateCart(); } //Update the shopping cart function updateCart() { listCart.innerHTML = ''; let totalCount = 0; let totalPrice = 0; cartItems.forEach(item => { totalPrice += item.price; totalCount += item.quantity; let newProduct = document.createElement('li'); newProduct.innerHTML = ` <div><img src="image/${item.image}" alt="${item.name}"></div> <div>${item.name}</div> <div>${formatPrice(item.price)}</div> <div> <button onclick="changeQuantity(${item.id}, ${item.quantity - 1})">-</button> <div class="count">${item.quantity}</div> <button onclick="changeQuantity(${item.id}, ${item.quantity + 1})">+</button> </div>`; listCart.appendChild(newProduct); }); total.innerText = formatTotalPrice(totalPrice); quantity.innerText = totalCount; } //Change the quantity of a product in the cart function changeQuantity(productId, quantity) { let item = cartItems.find(item => item.id === productId); if (!quantity) { cartItems = cartItems.filter(item => item.id !== productId); } else { item.quantity = quantity; item.price = quantity * products.find(product => product.id === productId).price; } updateCart(); } //Open the modal with product details function openModal(index) { let product = products[index]; let modalImage = document.getElementById('modalImage'); let currentIndex = 0; // Initialize index for the modal image //Set the initial image modalImage.src = `image/${product.images[currentIndex]}`; modalImage.setAttribute('data-current-index', currentIndex); //Define the information in the modal document.getElementById('modalTitle').innerText = product.name; document.getElementById('modalDescription').innerText = product.description; document.getElementById('modalPrice').innerText = formatPrice(product.price); document.getElementById('productModal').style.display = 'block'; document.getElementById('quantityValue').innerText = '1'; } //Close the modal function closeModal() { document.getElementById('productModal').style.display = 'none'; } //Event listener for closing the modal when clicking outside the modal window let overlay = document.querySelector('.modal'); overlay.addEventListener('click', (event) => { if (!event.target.closest('.modal-content')) { closeModal(); } }); //Add selected product to the cart from the modal function addToCartModal() { let modalTitle = document.getElementById('modalTitle').innerText; let modalPrice = parseFloat(document.getElementById('modalPrice').innerText.replace(' kr', '')); let selectedProduct = products.find(product => product.name === modalTitle); if (selectedProduct) { let quantity = parseInt(document.getElementById('quantityValue').innerText); let existingItem = cartItems.find(item => item.id === selectedProduct.id); if (!existingItem) { cartItems.push(Object.assign({}, selectedProduct, { quantity: quantity, price: modalPrice * quantity })); } else { existingItem.quantity += quantity; existingItem.price += modalPrice * quantity; } updateCart(); } closeModal(); } //Function to enable us to scroll through the images in the modal window function changeImageModal(direction) { let modalImage = document.getElementById('modalImage'); let currentIndex = parseInt(modalImage.getAttribute('data-current-index')); let modalTitle = document.getElementById('modalTitle').innerText; let product = products.find(product => product.name === modalTitle); currentIndex += direction; currentIndex = (currentIndex + product.images.length) % product.images.length; modalImage.src = `image/${product.images[currentIndex]}`; modalImage.setAttribute('data-current-index', currentIndex); } //Change the quantity of productgs inside the modal function changeQuantityModal(change) { let quantity = document.getElementById('quantityValue'); let currentQuantity = parseInt(quantity.innerText); currentQuantity += change; if (currentQuantity < 1) { currentQuantity = 1; } quantity.innerText = currentQuantity; } //Formats the price so kr appears after the value function formatPrice(price) { return price.toLocaleString() + ' kr'; } //Formats the price so kr appears after the total value function formatTotalPrice(price) { return 'Total price: ' + price.toLocaleString() + ' kr'; } runApp();
Editor is loading...
Leave a Comment