// static/js/cart.js async function updateCart(form) { const formData = new FormData(form); const res = await fetch("/checkout?js=true", { method: "POST", body: formData }); if (res.ok) { return res.json(); } else { return { status: res.status, error: res.statusText }; } } function updateCartIcon(data) { const cart_icon = document.querySelector(".cart-icon"); if (cart_icon.length !== null) { let cart_icon_amount_list = cart_icon.querySelector(".cart-icon--amount"); if (cart_icon_amount_list.length !== null) { cart_icon_amount_list.innerText = data.cart_breakdown.item_amount; } cart_icon.dataset.status = "busy"; cart_icon.style.color = "#FF7070"; cart_icon.style.textDecorationColor = "#FF7070"; setTimeout(() => { cart_icon.dataset.status = "free"; cart_icon.style.color = "#fff"; cart_icon.style.textDecorationColor = "#fff"; }, "2000"); } } function displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable) { if (!btnSubmit) { return; } btnSubmit.classList.remove( "btn-product-available", "btn-product-available", "btn-product-unselectable" ); if (!isProductAvailable) { btnSubmit.setAttribute("disabled", "disabled"); btnSubmit.classList.add("btn-product-soldout"); btnSubmit.value = "sold out"; } else if (!isProductSelectable) { btnSubmit.setAttribute("disabled", "disabled"); btnSubmit.classList.add("btn-product-unselectable"); btnSubmit.value = "add to cart"; } else { btnSubmit.removeAttribute("disabled"); btnSubmit.classList.add("btn-product-available"); btnSubmit.value = "add to cart"; } } function updateProductURL(product_selected) { if ("URLSearchParams" in window) { const searchParams = new URLSearchParams(product_selected); history.pushState(null, "", "?".concat(searchParams.toString())); } } // static/js/product.js async function processForm(form) { form.addEventListener("submit", async (e) => { e.preventDefault(); const data = await updateCart(form); updateCartIcon(data); const btnSubmit = document.querySelector(".btn-submit"); const isProductSelectable = data.is_product_selectable; const isProductAvailable = data.is_product_available; displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable); updateProductURL(data.product_selected); }); } async function checkProductAvailability(product_path, searchParams) { const res = await fetch("/".concat(product_path, "?js=true&").concat(searchParams.toString())); if (res.ok) { return res.json(); } else { return { status: res.status, error: res.statusText }; } } async function changeProductURLOnInputRadio(form) { const inputs = Array.from(form.querySelectorAll(".input-listen")); await Promise.all(inputs.map(async (input) => { input.addEventListener("change", async (e) => { let key = e.target.name; let value = e.target.value; if ("URLSearchParams" in window) { const product_path = form.querySelector("#product_path").value; const searchParams = new URLSearchParams(window.location.search); searchParams.set(key, value); let size = searchParams.get("size"); let style = searchParams.get("style"); if (size && style) { const data = await checkProductAvailability(product_path, searchParams); const btnSubmit = document.querySelector(".btn-submit"); const isProductSelectable = data.is_product_selectable; const isProductAvailable = data.is_product_available; displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable); } history.pushState(null, "", "?".concat(searchParams.toString())); } ; }); })); } window.addEventListener("load", () => { ; (async () => { const forms = Array.from(document.querySelectorAll(".product-item")); await Promise.all(forms.map(async (form) => { processForm(form); changeProductURLOnInputRadio(form); })); })(); });