From 21841fd969d5f09203b743760f0d9fec4b1cdf4e Mon Sep 17 00:00:00 2001 From: creme332 <65414576+creme332@users.noreply.github.com> Date: Wed, 22 May 2024 13:44:44 +0400 Subject: [PATCH 1/5] show loading animation on checkout button after form submission --- public/js_original/cart-view.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/js_original/cart-view.js b/public/js_original/cart-view.js index dc5cca23..c530d71c 100644 --- a/public/js_original/cart-view.js +++ b/public/js_original/cart-view.js @@ -50,6 +50,9 @@ function updateCart(e) { } async function checkout() { + // set loading animation on checkout button to prevent multiple form submissions + document.querySelector("#checkout-btn").setAttribute("aria-busy", "true"); + const myCart = Cart(); const items = myCart.getItems(); @@ -63,6 +66,9 @@ async function checkout() { body: JSON.stringify(data), }); + // stop loading animation + document.querySelector("#checkout-btn").setAttribute("aria-busy", "false"); + if (response.ok) { // Clear cart items from localStorage if checkout is successful myCart.clear(); From 72e17b3611c09556cbe9233dce1ca8a1736a88cd Mon Sep 17 00:00:00 2001 From: creme332 <65414576+creme332@users.noreply.github.com> Date: Wed, 22 May 2024 14:26:37 +0400 Subject: [PATCH 2/5] - add listener to checkout button only if present - remove unused import ModalManager --- public/js_original/cart-view.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/public/js_original/cart-view.js b/public/js_original/cart-view.js index c530d71c..1b1eb18f 100644 --- a/public/js_original/cart-view.js +++ b/public/js_original/cart-view.js @@ -4,7 +4,6 @@ import Cart from "./models/Cart"; import CartItem from "./models/CartItem"; -import ModalManager from "./modal"; function updateCart(e) { const sectionNode = e.target.parentNode.parentNode; @@ -67,12 +66,13 @@ async function checkout() { }); // stop loading animation - document.querySelector("#checkout-btn").setAttribute("aria-busy", "false"); + document.querySelector("#checkout-btn").removeAttribute("aria-busy"); if (response.ok) { // Clear cart items from localStorage if checkout is successful myCart.clear(); - ModalManager("my-modal").openModal(); + + document.querySelector("#my-modal").setAttribute("open", ""); return; } const x = await response.json(); @@ -91,9 +91,12 @@ function initCartPage() { ...document.querySelectorAll("section input[type='number']"), ]; - ModalManager("my-modal").init(); + const checkoutBtn = document.querySelector("#checkout-btn"); - document.querySelector("#checkout-btn").addEventListener("click", checkout); + // if checkout button is present on page (button is absent when cart is empty) + if (checkoutBtn !== null) { + checkoutBtn.addEventListener("click", checkout); + } quantityInputs.forEach((input) => { input.addEventListener("change", updateCart); From 7fc6e370476abf87a87d45ea0edb0b8247429c43 Mon Sep 17 00:00:00 2001 From: creme332 <65414576+creme332@users.noreply.github.com> Date: Wed, 22 May 2024 14:27:27 +0400 Subject: [PATCH 3/5] use a simpler modal when displaying order success message --- src/views/Cart.php | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/views/Cart.php b/src/views/Cart.php index e29a73dc..4948ddd6 100644 --- a/src/views/Cart.php +++ b/src/views/Cart.php @@ -16,24 +16,11 @@ ?>
- -

Checkout successful! ✨

+

Your order has been successfully placed and an email has been sent to you.