From ea60c3acedf4faf55d849bce7cbea762178c4004 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Wed, 6 Nov 2024 20:54:23 +0530 Subject: [PATCH] Revert "Fixed Increment Functionality in Cart" --- script/products.js | 346 +++++++++++++++++++++------------------------ 1 file changed, 163 insertions(+), 183 deletions(-) diff --git a/script/products.js b/script/products.js index 3021b0a9..abfbaf91 100644 --- a/script/products.js +++ b/script/products.js @@ -18,18 +18,6 @@ document.addEventListener("DOMContentLoaded", () => { displayProducts(products_list); } - // Scroll animation - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); }); function displayProducts(products) { @@ -87,8 +75,6 @@ function displayProducts(products) { box.appendChild(addToCartButton); - // Add click event for the quick view icon - box.querySelector(".quick-view-icon").addEventListener("click", () => { showQuickView(product); }); @@ -96,8 +82,8 @@ function displayProducts(products) { productsSection?.appendChild(box); }); - handleQuantityButtonsInProductCard(); } + function displayFlavorFilter() { let flavorFilterSection = document.querySelector(".categories-wrapper"); @@ -286,194 +272,188 @@ function displayCartItems() { function handleQuantityButtonsInProductCard() { const productsBox = document.querySelector(".products-box"); if (!productsBox) return; - productsBox.addEventListener("click", (e) => { if (e.target.classList.contains("increase")) { const qtySpan = e.target.previousElementSibling; let currentQty = parseInt(qtySpan.textContent); - setTimeout(() => { - qtySpan.textContent = currentQty + 1; - }, 600); // 0.6 second delay - } else if (e.target.classList.contains("decrease")) { + qtySpan.textContent = currentQty + 1; + + } + if (e.target.classList.contains("decrease")) { const qtySpan = e.target.nextElementSibling; let currentQty = parseInt(qtySpan.textContent); if (currentQty > 1) { - setTimeout(() => { - qtySpan.textContent = currentQty - 1; - }, 1000); // 1 second delay + qtySpan.textContent = currentQty - 1; + } } }); } +handleQuantityButtonsInProductCard(); + +function handleQuantityButtonsInCart() { + const cartList = document.querySelector(".cart-list-items"); + function updateSubtotal() { + const subtotalElement = document.querySelector(".sub-total"); + const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); + subtotalElement.textContent = `$${subtotal.toFixed(2)}`; + } + + cartList.addEventListener("click", (e) => { + const itemId = e.target.closest("li").getAttribute("id"); + let cartItem = cartItems.find((item) => item.itemId == itemId); + + if (e.target.classList.contains("increase")) { + const qtySpan = e.target.previousElementSibling; + let currentQty = parseInt(qtySpan.textContent); + qtySpan.textContent = currentQty + 1; + cartItem.pcs = currentQty + 1; + cartItem.amount = + cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + const textQtyElement = e.target.closest("li").querySelector(".text .qty"); + textQtyElement.textContent = cartItem.pcs; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - function handleQuantityButtonsInCart() { - const cartList = document.querySelector(".cart-list-items"); - function updateSubtotal() { - const subtotalElement = document.querySelector(".sub-total"); - const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); - subtotalElement.textContent = `$${subtotal.toFixed(2)}`; - } - - cartList.addEventListener("click", (e) => { - const itemId = e.target.closest("li").getAttribute("id"); - let cartItem = cartItems.find((item) => item.itemId == itemId); - - if (e.target.classList.contains("increase")) { - const qtySpan = e.target.previousElementSibling; - let currentQty = parseInt(qtySpan.textContent); - console.log(`Increasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty + 1}`); - qtySpan.textContent = currentQty + 1; - cartItem.pcs = currentQty + 1; - cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - updateSubtotal(); - } - - if (e.target.classList.contains("decrease")) { - const qtySpan = e.target.nextElementSibling; - let currentQty = parseInt(qtySpan.textContent); - if (currentQty > 1) { - console.log(`Decreasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty - 1}`); - qtySpan.textContent = currentQty - 1; - cartItem.pcs = currentQty - 1; - cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - updateSubtotal(); + updateSubtotal(); } - } - }); + + if (e.target.classList.contains("decrease")) { + const qtySpan = e.target.nextElementSibling; + let currentQty = parseInt(qtySpan.textContent); + if (currentQty > 1) { + qtySpan.textContent = currentQty - 1; + cartItem.pcs = currentQty - 1; + cartItem.amount = + cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + + const textQtyElement = e.target + .closest("li") + .querySelector(".text .qty"); + textQtyElement.textContent = cartItem.pcs; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); + + updateSubtotal(); + } + } + }); } -// Add items to wishlist - -function addToWishlist(e) { - let wishlistItemId = e.target.closest(".box").getAttribute("id"); - let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - // Ensure pcs is a valid number - if (isNaN(pcs) || pcs <= 0) { - showToast("Please select the number of cups you want!"); - return; - } - - let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); - let item = products_list.find(item => item.id == wishlistItemId); - let amount = item.price * pcs; - - if (existingWishlistItem) { - existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs - existingWishlistItem.amount = existingWishlistItem.pcs * item.price; - showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); - } else { - wishlistItems.push({ - itemId: wishlistItemId, - pcs: pcs, // Ensure pcs is a number - amount: amount - }); - showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); - } - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); +function createSearchBar() { + const searchBarContainer = document.querySelector(".search-container"); + + // Check if the search bar already exists + if (document.getElementById("search-bar")) return; + + // Create the search bar only if it doesn't already exist + const searchBar = document.createElement("input"); + searchBar.setAttribute("type", "text"); + searchBar.setAttribute("id", "search-bar"); + searchBar.setAttribute("placeholder", "Search for flavors..."); + searchBarContainer.appendChild(searchBar); + + // Check if the search button already exists + if (document.getElementById("search-btn")) return; + + // Create the search button only if it doesn't already exist + const searchButton = document.createElement("button"); + searchButton.setAttribute("id", "search-btn"); + searchButton.innerText = "Search"; + searchBarContainer.appendChild(searchButton); + + // Attach event listener for the search button + searchButton.addEventListener("click", () => { + const query = searchBar.value.toLowerCase(); + const filteredProducts = products_list.filter((product) => { + const flavorName = flavor_list + .find((f) => f.id === product.flavor_id) + ?.name.toLowerCase(); + return ( + product.name.toLowerCase().includes(query) || flavorName.includes(query) + ); + }); + displayProducts(filteredProducts); + }); + + // Handle input event for live search + handleSearchInput(); } -function handleRemoveButtonInWishlist() { - let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); - removeBtns.forEach(btn => { - btn.addEventListener("click", () => { - let itemId = btn.closest('li').getAttribute("id"); - wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); // Update the wishlist display - - // Reset button text to "Add to Wishlist" if necessary - const productBox = document.querySelector(`.box[id='${itemId}']`); - if (productBox) { - const addToWishlistButton = productBox.querySelector(".wishlist-btn"); - addToWishlistButton.innerHTML = ''; // Reset icon and text +function handleSearchInput() { + const searchInput = document.getElementById("search-bar"); + searchInput.addEventListener("input", () => { + const query = searchInput.value.toLowerCase(); + const filteredProducts = products_list.filter((product) => { + const flavorName = flavor_list + .find((f) => f.id === product.flavor_id) + ?.name.toLowerCase(); + return ( + product.name.toLowerCase().includes(query) || flavorName.includes(query) + ); + + }); + displayProducts(filteredProducts); + }); +} + +function showQuickView(product) { + const overlay = document.getElementById("overlay"); + + // Set the inner HTML of overlay with the product details in two sections + overlay.innerHTML = ` +
+ × +
+ +
+ ${product.name} +
+ +
+

${product.name}

+

${product.description}

+
Price: $${product.price}
+
+
+
+ `; + + // Show the overlay + overlay.style.display = "flex"; + + // Close popup on clicking the close button + overlay.querySelector(".close-btn").addEventListener("click", () => { + overlay.style.display = "none"; + }); + + // Close popup when clicking outside of it + overlay.addEventListener("click", (e) => { + if (e.target === overlay) { + overlay.style.display = "none"; } - }); - }); + }); } -function displayWishlistItems() { - const wishlistUlList = document.querySelector(".wishlist-list-items"); - wishlistUlList.innerHTML = ""; - - if (wishlistItems.length > 0) { - document.querySelector(".empty-wishlist").classList.remove("active"); - document.querySelector(".no-empty-wishlist").classList.add("active"); - } else { - document.querySelector(".empty-wishlist").classList.add("active"); - document.querySelector(".no-empty-wishlist").classList.remove("active"); - } - - wishlistItems.forEach(wi => { - let itemLi = document.createElement("li"); - itemLi.setAttribute("id", wi.itemId); - let product = products_list.find(p => p.id == wi.itemId); - - if (product) { - itemLi.innerHTML = ` - -
- ${product.name}
- ${wi.pcs} x ${product.price}
-
$${wi.amount}
- -
-
- - - ${wi.pcs} - + -
- `; - wishlistUlList.appendChild(itemLi); - handleRemoveButtonInWishlist(); // Attach remove functionality - - let moveToCartBtn = itemLi.querySelector(".move-to-cart"); - moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); - } - }); +function openModal() { + document.getElementById("quickViewModal").style.display = "flex"; } -// Function to move item from wishlist to cart -function moveToCart(wishlistItemId) { - // Find the item in wishlist - let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); - if (wishlistItemIndex > -1) { - let wishlistItem = wishlistItems[wishlistItemIndex]; - - // Check if the item already exists in the cart - let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); - if (existingCartItem) { - existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists - existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); - } else { - cartItems.push({ - itemId: wishlistItem.itemId, - pcs: wishlistItem.pcs, - amount: wishlistItem.amount - }); - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); - } - - // Remove the item from the wishlist - wishlistItems.splice(wishlistItemIndex, 1); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - - // Re-display the wishlist and cart items - displayWishlistItems(); - displayCartItems(); - } -} \ No newline at end of file +function closeModal() { + document.getElementById("quickViewModal").style.display = "none"; +} + +// Close modal when clicking outside content +window.onclick = function (event) { + const modal = document.getElementById("quickViewModal"); + if (event.target === modal) { + modal.style.display = "none"; + } +};