| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- // 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);
- }));
- })();
- });
|