Tengo una tienda web, cuando un usuario agrega algo a la página del carrito, se actualiza rápidamente, lo que indica que algo sucedió y puede ver el valor del carrito actualizado en la parte superior de la página. Me informaron que esto no es suficiente para los usuarios y que debería mostrar algún tipo de mensaje al respecto.

Aquí es donde manejo toda la lógica, como actualizar el backend y crear cookies para usuarios anónimos.

 <button type="button" data-product="{{ product.id }}" data-stock="{{ product.stock }}" data-action="add" class="buttonDetail update-cart"> <i class="fas fa-cart-plus" ></i> ADD to cart </button>

 var updateBtn = document.getElementsByClassName("update-cart"); for (i = 0; i < updateBtn.length; i++) updateBtn[i].addEventListener("click", function () { var t = this.dataset.product, e = this.dataset.action, a = this.dataset.stock; "AnonymousUser" === user ? addCookieItem(t, e, a) : updateUserOrder(t, e); }); function addCookieItem(t, e, a) { "add" == e && (void 0 === cart[t] ? (cart[t] = { quantity: 1 }) : cart[t].quantity < Number(a) && (cart[t].quantity += 1)), "remove" == e && ((cart[t].quantity -= 1), cart[t].quantity <= 0 && delete cart[t]), "delete" == e && delete cart[t], (document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"), history.go(0); } function updateUserOrder(t, e) { fetch("/updateItem", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken }, body: JSON.stringify({ productId: t, action: e }) }) .then((t) => t.json()) .then((t) => { console.log(t), history.go(0); }); }

¿Cómo puedo mostrar un mensaje rápido sobre agregar al carrito? Puedo mostrar algo de div antes de history.go(0) pero parece de mal gusto y no quiero volver a escribir esto en AJAX para mostrar div "on scucces"