product-R6DMP5AX.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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 displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable) {
  32. if (!btnSubmit) {
  33. return;
  34. }
  35. btnSubmit.classList.remove(
  36. "btn-product-available",
  37. "btn-product-available",
  38. "btn-product-unselectable"
  39. );
  40. if (!isProductAvailable) {
  41. btnSubmit.setAttribute("disabled", "disabled");
  42. btnSubmit.classList.add("btn-product-soldout");
  43. btnSubmit.value = "sold out";
  44. } else if (!isProductSelectable) {
  45. btnSubmit.setAttribute("disabled", "disabled");
  46. btnSubmit.classList.add("btn-product-unselectable");
  47. btnSubmit.value = "add to cart";
  48. } else {
  49. btnSubmit.removeAttribute("disabled");
  50. btnSubmit.classList.add("btn-product-available");
  51. btnSubmit.value = "add to cart";
  52. }
  53. }
  54. function updateProductURL(product_selected) {
  55. if ("URLSearchParams" in window) {
  56. const searchParams = new URLSearchParams(product_selected);
  57. history.pushState(null, "", "?".concat(searchParams.toString()));
  58. }
  59. }
  60. // static/js/product.js
  61. async function processForm(form) {
  62. form.addEventListener("submit", async (e) => {
  63. e.preventDefault();
  64. const data = await updateCart(form);
  65. updateCartIcon(data);
  66. const btnSubmit = document.querySelector(".btn-submit");
  67. const isProductSelectable = data.is_product_selectable;
  68. const isProductAvailable = data.is_product_available;
  69. displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable);
  70. updateProductURL(data.product_selected);
  71. });
  72. }
  73. async function checkProductAvailability(product_path, searchParams) {
  74. const res = await fetch("/".concat(product_path, "?js=true&").concat(searchParams.toString()));
  75. if (res.ok) {
  76. return res.json();
  77. } else {
  78. return { status: res.status, error: res.statusText };
  79. }
  80. }
  81. async function changeProductURLOnInputRadio(form) {
  82. const inputs = Array.from(form.querySelectorAll(".input-listen"));
  83. await Promise.all(inputs.map(async (input) => {
  84. input.addEventListener("change", async (e) => {
  85. let key = e.target.name;
  86. let value = e.target.value;
  87. if ("URLSearchParams" in window) {
  88. const product_path = form.querySelector("#product_path").value;
  89. const searchParams = new URLSearchParams(window.location.search);
  90. searchParams.set(key, value);
  91. let size = searchParams.get("size");
  92. let style = searchParams.get("style");
  93. if (size && style) {
  94. const data = await checkProductAvailability(product_path, searchParams);
  95. const btnSubmit = document.querySelector(".btn-submit");
  96. const isProductSelectable = data.is_product_selectable;
  97. const isProductAvailable = data.is_product_available;
  98. displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable);
  99. }
  100. history.pushState(null, "", "?".concat(searchParams.toString()));
  101. }
  102. ;
  103. });
  104. }));
  105. }
  106. window.addEventListener("load", () => {
  107. ;
  108. (async () => {
  109. const forms = Array.from(document.querySelectorAll(".product-item"));
  110. await Promise.all(forms.map(async (form) => {
  111. processForm(form);
  112. changeProductURLOnInputRadio(form);
  113. }));
  114. })();
  115. });