Skip to content

Commit

Permalink
Merge pull request #1097 from DharshiBalasubramaniyam/revert-1072-imp…
Browse files Browse the repository at this point in the history 
…rove

Revert "Fixed Increment Functionality in Cart"
  • Loading branch information
@DharshiBalasubramaniyam
DharshiBalasubramaniyam authored Nov 6, 2024
2 parents 27fd5b8 + ea60c3a commit 46927bc
Showing 1 changed file with 163 additions and 183 deletions.
346 changes: 163 additions & 183 deletions script/products.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -87,17 +75,15 @@ function displayProducts(products) {

box.appendChild(addToCartButton);

// Add click event for the quick view icon

box.querySelector(".quick-view-icon").addEventListener("click", () => {
showQuickView(product);
});

productsSection?.appendChild(box);
});

handleQuantityButtonsInProductCard();
}

function displayFlavorFilter() {
let flavorFilterSection = document.querySelector(".categories-wrapper");

Expand Down Expand Up @@ -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 = '<i class="fa fa-heart"></i>'; // 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 = `
<div class="quick-view-popup">
<span class="close-btn">&times;</span>
<div class="popup-content">
<!-- Left section for the image -->
<div class="left-section">
<img src="${product.image}" alt="${product.name}" class="quick-view-image"/>
</div>
<!-- Right section for the text content -->
<div class="right-section">
<h2>${product.name}</h2>
<p>${product.description}</p>
<div class="price">Price: $${product.price}</div>
</div>
</div>
</div>
`;

// 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 = `
<img src="${product.image}" alt="">
<div class="text">
<span class="name">${product.name}</span><br>
<span class="qty">${wi.pcs}</span> x ${product.price} <br>
<div class="price">$${wi.amount}</div>
<i class="fa fa-trash remove-wishlist-item-btn" aria-hidden="true"></i>
</div>
<div class="qty qtycart">
<span class="decrease decreasecart">-</span>
<span class="pcs pcscart">${wi.pcs}</span>
<span class="increase increasecart">+</span>
</div>
`;
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();
}
}
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";
}
};

0 comments on commit 46927bc

Please sign in to comment.