I have webstore, when a user adds something to the cart page is quickly refreshed indicating that something has happened and you can see updated cart value at the top of the page. I was made aware that this isn't enough for users and I should display some sort of message about.
This is where I'm handling all the logic like updating the backend and creating cookies for anonymous user
<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);
});
}
how can I show some quick message about adding to the cart. I can display some div before history.go(0) but that looks tacky and I don't wanna rewrite this to AJAX to display div "on scucces"