| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- // 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 updateItemRow(item_row, cart_items, item_amount) {
- let item = cart_items.find((item2) => item2.product_id == item_row.id);
- if (item) {
- item_row.querySelector("#quantity_manual").value = item.quantity;
- let buttonPlus = item_row.querySelector("#button-plus");
- if (!item.is_selectable) {
- buttonPlus.setAttribute("disabled", "disabled");
- buttonPlus.classList.add("cura");
- } else {
- buttonPlus.removeAttribute("disabled");
- buttonPlus.classList.remove("cura");
- }
- let total = item_row.querySelector(".item-total");
- total.querySelector(".item-total--text").textContent = "".concat(item.total);
- total.querySelector("#price").value = item.total;
- } else {
- item_row.remove();
- }
- }
- function updateBreakdown(cart_breakdown) {
- let subtotal_amount = Array.from(document.querySelectorAll(".subtotal--amount > .amount"));
- subtotal_amount.forEach((subtotal) => {
- subtotal.textContent = "".concat(cart_breakdown.subtotal);
- });
- let shipping = document.querySelectorAll(".subtotal--shipping > .amount");
- shipping.forEach((shipping2) => {
- shipping2.textContent = "".concat(cart_breakdown.shipping.toFixed(1));
- });
- let subtotal_total = document.querySelector(".subtotal--total > .amount");
- if (subtotal_total) {
- subtotal_total.textContent = "".concat(cart_breakdown.total.toFixed(1));
- }
- ;
- }
- function removeCheckoutTable() {
- document.querySelector(".checkout-table-header").remove();
- document.querySelector(".checkout-shipping-info").remove();
- document.querySelector(".checkout-empty-message").classList.remove("dn");
- }
- function updateTable(cart_items, cart_item_rows, cart_breakdown) {
- cart_item_rows.map((item_row) => {
- updateItemRow(item_row, cart_items, cart_breakdown["item_amount"]);
- });
- if (cart_items.length > 0) {
- updateBreakdown(cart_breakdown);
- } else {
- removeCheckoutTable();
- }
- }
- 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";
- }
- }
- // static/js/checkout.js
- async function processForm(form) {
- form.addEventListener("submit", async (e) => {
- e.preventDefault();
- const data = await updateCart(form);
- updateCartIcon(data);
- const cart_items = data.cart_items;
- const cart_breakdown = data.cart_breakdown;
- const cart_item_rows = Array.from(document.querySelectorAll(".cart-table-row"));
- updateTable(cart_items, cart_item_rows, cart_breakdown);
- if ("is_product_available" in data) {
- const isProductSelectable = data.is_product_selectable;
- const isProductAvailable = data.is_product_available;
- const btnSubmit = document.querySelector(".btn-submit");
- displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable);
- }
- ;
- });
- }
- async function updateShippingCost(country, weight, csrftoken) {
- const formData = new FormData();
- formData.append("country", country);
- formData.append("weight", weight);
- formData.append("csrftoken", csrftoken);
- const res = await fetch("/checkout/shipping?js=true", {
- method: "POST",
- body: formData
- });
- if (res.ok) {
- return res.json();
- } else {
- return { status: res.status, error: res.statusText };
- }
- }
- function prepareShippingCost(selectCountry) {
- let weight = document.querySelector('.checkout-shipping-info > input[name="weight"]');
- if (weight !== void 0) {
- weight = Number(weight.value);
- }
- let csrftoken = "";
- const token = document.querySelector('.checkout-shipping-info > input[name="csrftoken"]');
- if (token !== void 0) {
- csrftoken = token.value;
- }
- let country = "";
- if (selectCountry.value !== "") {
- country = selectCountry.value;
- }
- if (!isNaN(weight) && csrftoken !== "" && country !== "") {
- return {
- weight,
- csrftoken,
- country
- };
- }
- }
- async function setShippingCost() {
- const selectCountry = document.querySelector("select#country");
- if (selectCountry !== void 0 && selectCountry !== null) {
- const data = prepareShippingCost(selectCountry);
- if (data !== void 0) {
- const cart_breakdown = await updateShippingCost(data.country, data.weight, data.csrftoken);
- updateBreakdown(cart_breakdown);
- }
- ;
- selectCountry.addEventListener("change", async (e) => {
- const data2 = prepareShippingCost(selectCountry);
- if (data2 !== void 0) {
- const cart_breakdown = await updateShippingCost(data2.country, data2.weight, data2.csrftoken);
- updateBreakdown(cart_breakdown);
- }
- ;
- });
- }
- ;
- }
- window.addEventListener("load", () => {
- ;
- (async () => {
- const forms = Array.from(document.querySelectorAll(".checkout-item"));
- await Promise.all(forms.map(async (form) => processForm(form)));
- await setShippingCost();
- })();
- });
|