checkout-MNJWTWVZ.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. // static/js/cart.js
  2. async function updateCart(form) {
  3. const formData = new FormData(form);
  4. const res = await fetch("/checkout?js=true", {
  5. method: "POST",
  6. body: formData
  7. });
  8. if (res.ok) {
  9. return res.json();
  10. } else {
  11. return { status: res.status, error: res.statusText };
  12. }
  13. }
  14. function updateCartIcon(data) {
  15. const cart_icon = document.querySelector(".cart-icon");
  16. if (cart_icon.length !== null) {
  17. let cart_icon_amount_list = cart_icon.querySelector(".cart-icon--amount");
  18. if (cart_icon_amount_list.length !== null) {
  19. cart_icon_amount_list.innerText = data.cart_breakdown.item_amount;
  20. }
  21. cart_icon.dataset.status = "busy";
  22. cart_icon.style.color = "#FF7070";
  23. cart_icon.style.textDecorationColor = "#FF7070";
  24. setTimeout(() => {
  25. cart_icon.dataset.status = "free";
  26. cart_icon.style.color = "#fff";
  27. cart_icon.style.textDecorationColor = "#fff";
  28. }, "2000");
  29. }
  30. }
  31. function updateItemRow(item_row, cart_items, item_amount) {
  32. let item = null;
  33. for (let i = 0; i < cart_items.length; i++) {
  34. if (cart_items[i].product_id == item_row.id) {
  35. if (!cart_items[i].options.product_variation_id || cart_items[i].options.product_variation_id == item_row.querySelector("#product_id").value) {
  36. item = cart_items[i];
  37. break;
  38. }
  39. }
  40. }
  41. if (item) {
  42. item_row.querySelector("#quantity_manual").value = item.quantity;
  43. let buttonPlus = item_row.querySelector("#button-plus");
  44. if (!item.is_selectable) {
  45. buttonPlus.setAttribute("disabled", "disabled");
  46. buttonPlus.classList.add("cura");
  47. } else {
  48. buttonPlus.removeAttribute("disabled");
  49. buttonPlus.classList.remove("cura");
  50. }
  51. let total = item_row.querySelector(".item-total");
  52. total.querySelector(".item-total--text").textContent = "".concat(item.total);
  53. total.querySelector("#price").value = item.total;
  54. } else {
  55. item_row.remove();
  56. }
  57. }
  58. function updateBreakdown(cart_breakdown) {
  59. let subtotal_amount = Array.from(document.querySelectorAll(".subtotal--amount > .amount"));
  60. subtotal_amount.forEach((subtotal) => {
  61. subtotal.textContent = "".concat(cart_breakdown.subtotal);
  62. });
  63. let shipping = document.querySelectorAll(".subtotal--shipping > .amount");
  64. shipping.forEach((shipping2) => {
  65. shipping2.textContent = "".concat(cart_breakdown.shipping.toFixed(1));
  66. });
  67. let subtotal_total = document.querySelector(".subtotal--total > .amount");
  68. if (subtotal_total) {
  69. subtotal_total.textContent = "".concat(cart_breakdown.total.toFixed(1));
  70. }
  71. ;
  72. let weight = document.getElementById("weight");
  73. weight.value = "".concat(cart_breakdown.total_weight);
  74. }
  75. function removeCheckoutTable() {
  76. document.querySelector(".checkout-table-header").remove();
  77. document.querySelector(".checkout-shipping-info").remove();
  78. document.querySelector(".checkout-empty-message").classList.remove("dn");
  79. }
  80. function updateTable(cart_items, cart_item_rows, cart_breakdown) {
  81. cart_item_rows.map((item_row) => {
  82. updateItemRow(item_row, cart_items, cart_breakdown["item_amount"]);
  83. });
  84. if (cart_items.length > 0) {
  85. updateBreakdown(cart_breakdown);
  86. } else {
  87. removeCheckoutTable();
  88. }
  89. }
  90. function displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable) {
  91. console.log("displayProductSelectable called with:", { isProductSelectable, isProductAvailable, btnSubmit, value: btnSubmit && btnSubmit.value });
  92. if (!btnSubmit) {
  93. return;
  94. }
  95. btnSubmit.classList.remove(
  96. "btn-product-available",
  97. "btn-product-unselectable",
  98. "btn-product-soldout"
  99. );
  100. if (!isProductAvailable || !isProductSelectable) {
  101. btnSubmit.setAttribute("disabled", "disabled");
  102. btnSubmit.classList.add("btn-product-soldout");
  103. btnSubmit.value = "sold out";
  104. } else {
  105. btnSubmit.removeAttribute("disabled");
  106. btnSubmit.classList.add("btn-product-available");
  107. btnSubmit.value = "add to cart";
  108. }
  109. }
  110. // static/js/checkout.js
  111. async function processForm(form) {
  112. form.addEventListener("submit", async (e) => {
  113. e.preventDefault();
  114. document.getElementById("loader").style.display = "flex";
  115. const data = await updateCart(form);
  116. document.getElementById("loader").style.display = "none";
  117. updateCartIcon(data);
  118. const cart_items = data.cart_items;
  119. const cart_breakdown = data.cart_breakdown;
  120. const cart_item_rows = Array.from(document.querySelectorAll(".cart-table-row"));
  121. updateTable(cart_items, cart_item_rows, cart_breakdown);
  122. if ("is_product_available" in data) {
  123. const isProductSelectable = data.is_product_selectable;
  124. const isProductAvailable = data.is_product_available;
  125. const btnSubmit = document.querySelector(".btn-submit");
  126. displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable);
  127. }
  128. const selectCountry = document.querySelector("select#country");
  129. const shipping_data = prepareShippingCost(selectCountry);
  130. if (shipping_data !== void 0) {
  131. const cart_breakdown_shipping = await updateShippingCost(shipping_data.country, shipping_data.weight, shipping_data.csrftoken);
  132. updateBreakdown(cart_breakdown_shipping);
  133. }
  134. ;
  135. });
  136. }
  137. async function updateShippingCost(country, weight, csrftoken) {
  138. const formData = new FormData();
  139. formData.append("country", country);
  140. formData.append("weight", weight);
  141. formData.append("csrftoken", csrftoken);
  142. const res = await fetch("/checkout/shipping?js=true", {
  143. method: "POST",
  144. body: formData
  145. });
  146. if (res.ok) {
  147. return res.json();
  148. } else {
  149. return { status: res.status, error: res.statusText };
  150. }
  151. }
  152. function prepareShippingCost(selectCountry) {
  153. let weight = document.querySelector('.checkout-shipping-info > input[name="weight"]');
  154. if (weight !== void 0) {
  155. weight = Number(weight.value);
  156. }
  157. let csrftoken = "";
  158. const token = document.querySelector('.checkout-shipping-info > input[name="csrftoken"]');
  159. if (token !== void 0) {
  160. csrftoken = token.value;
  161. }
  162. let country = "";
  163. if (selectCountry.value !== "") {
  164. country = selectCountry.value;
  165. }
  166. if (!isNaN(weight) && csrftoken !== "" && country !== "") {
  167. return {
  168. weight,
  169. csrftoken,
  170. country
  171. };
  172. }
  173. }
  174. async function setShippingCost() {
  175. const selectCountry = document.querySelector("select#country");
  176. if (selectCountry !== void 0 && selectCountry !== null) {
  177. const data = prepareShippingCost(selectCountry);
  178. if (data !== void 0) {
  179. const cart_breakdown = await updateShippingCost(data.country, data.weight, data.csrftoken);
  180. updateBreakdown(cart_breakdown);
  181. }
  182. ;
  183. selectCountry.addEventListener("change", async (e) => {
  184. const data2 = prepareShippingCost(selectCountry);
  185. if (data2 !== void 0) {
  186. const cart_breakdown = await updateShippingCost(data2.country, data2.weight, data2.csrftoken);
  187. updateBreakdown(cart_breakdown);
  188. }
  189. ;
  190. });
  191. }
  192. ;
  193. }
  194. window.addEventListener("load", () => {
  195. ;
  196. (async () => {
  197. const forms = Array.from(document.querySelectorAll(".checkout-item"));
  198. await Promise.all(forms.map(async (form) => processForm(form)));
  199. await setShippingCost();
  200. })();
  201. });