Test_product_category (2025)

`; modalContent.innerHTML = modalContentHtml; modal.style.display = 'block'; //console.log(`${modalContentHtml}`); // Add event listeners after the modal content is set // Add event listeners after the modal content is set document.getElementById('modal-close').addEventListener('click', function() { modal.style.display = 'none'; }); document.querySelector('.continue-checkout').addEventListener('click', function() { // Implement the continue to checkout functionality console.log("I am called 2"); }); document.querySelector('.continue-shopping').addEventListener('click', function() { modal.style.display = 'none'; }); }); }); }); // Close the modal when clicking outside of it window.onclick = function(event) { if (event.target === modal) { modal.style.display = 'none'; } }; // const buttons = document.querySelectorAll('.add-to-cart-button'); // const errorModal = document.getElementById("errorModal"); // const closeBtn = errorModal.querySelector('.close'); // buttons.forEach(button => { // button.addEventListener('click', function (event) { // event.preventDefault(); // const productId = button.getAttribute('data-product-id'); // //const quantityId = button.getAttribute('data-quantity-id'); // const quantityContainer = button.closest('.product-item__details').querySelector('.quantity-selector, .custom-quantity-input'); // let quantity = 1; // Default quantity // // console.log(`######## Quantity Id ${quantityId}`); // if (quantityContainer) { // if (quantityContainer.tagName === 'INPUT' || quantityContainer.type === 'number') { // quantity = quantityContainer.value; // } else { // quantity = quantityContainer.value; // } // } // fetch('/cart/add.js', { // method: 'POST', // headers: { // 'Content-Type': 'application/json', // 'Accept': 'application/json' // }, // body: JSON.stringify({ // id: productId, // quantity: parseInt(quantity, 10) // }) // }) // .then(response => { // if (!response.ok) { // return response.json().then(err => { // throw err; // }) // } // }) // .then(data => { // console.log('Product added to cart:', data); // button.textContent = "Item Added"; // button.classList.add("added-animation"); // setTimeout(() => { // button.textContent = "Add to Cart"; // button.classList.remove("added-animation"); // }, 2000); // updateCartCount(); // }) // .catch(error => { // console.error('Error adding product to cart:', error); // errorModal.style.display = "block"; // }); // }); // }); // closeBtn.addEventListener('click', function () { // errorModal.style.display = "none"; // }); // window.addEventListener('click', function (event) { // if (event.target == errorModal) { // errorModal.style.display = "none"; // } // }); function handleAddToCart(event){ console.log('Called handleAddtoCart'); event.preventDefault(); const button = event.target; const productId = button.getAttribute('data-product-id'); //const quantityId = button.getAttribute('data-quantity-id'); const quantityContainer = button.closest('.product-item__details').querySelector('.quantity-selector, .custom-quantity-input'); let quantity = 1; // Default quantity console.log(`######## Quantity Id ${productId}`); if (quantityContainer) { if (quantityContainer.tagName === 'INPUT' || quantityContainer.type === 'number') { quantity = quantityContainer.value; } else { quantity = quantityContainer.value; } } addToCart(productId,quantity) .then(data => { console.log(`Product Added to Cart:`, data); updateButtonState(button); updateCartCount(); }) .catch(error => { console.error(`Error Adding product to Cart`, error); showErrorModal(); }); } function addToCart(productId,quantity){ return fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ id: productId, quantity: parseInt(quantity, 10) }) }) .then(response => { if (!response.ok) { return response.json().then(err => { throw err; }) } return response.json(); }) } function updateButtonState(button){ button.textContent = "Item Added"; button.classList.add("added-animation"); setTimeout(() => { button.textContent = "Add to Cart"; button.classList.remove("added-animation"); }, 2000); } // Function to show error modal function showErrorModal() { const errorModal = document.getElementById('errorModal'); const closeBtn = errorModal.querySelector('.close'); errorModal.style.display = "block"; closeBtn.addEventListener('click', function () { errorModal.style.display = "none"; }); } document.addEventListener('click', function(event){ if(event.target.classList.contains("add-to-cart-button")){ handleAddToCart(event); } }) const quantitySelectors = document.querySelectorAll('.quantity-selector'); quantitySelectors.forEach(selector => { selector.addEventListener('change', function () { if (this.value === '11+') { console.log("Here inside the 11+"); const input = document.createElement('input'); input.type = 'number'; input.min = 11; input.value = ''; input.className = 'custom-quantity-input'; input.addEventListener('change', function () { selector.dataset.customValue = this.value; console.log(`Custom Quantity: ${this.value}`); }); if (this.parentNode) { this.parentNode.replaceChild(input, this); input.focus(); } } }); }); function closeModal(element){ element.style.display ="none"; } function updateCartCount() { fetch('/cart.js') .then(response => { if (!response.ok) { return response.json().then(err => { throw new Error(`Network response was not ok: ${err}`); }); } return response.json(); }).then(cartData => { console.log(cartData); const cartCount = cartData.item_count || 0; const cartCountElements = document.querySelectorAll('.cart-count-bubble span'); if (cartCountElements.length === 0) { console.warn(`No elements found for cart count display`); } else { cartCountElements.forEach(element => { element.textContent = cartCount; }); } }) .catch(error => { console.error(`Error while updating the cart number${error}`); }); }});