I need the cart icon with ping animation when more than 0 items are available it shows cart ping and when the cart is empty it shows the normal cart icon I get what I want but the problem is it only working when the user reloads the page is there any way to add a class without reloading the page
https://prnt.sc/1x1r2ih
https://prnt.sc/1x1r04l
<span class="lnr lnr-cart"></span> <span class="Header__CartCount hotiya"></span> {% if cart.item_count !=0 %}<div class="cart_ping"></div>{%
endif %}{
key: "_rerenderCart",
value: function(e) {
var t = this,
n = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartDot")),
i = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartCount"));
return n.forEach(function(e) {
0 === t.itemCount ? e.classList.remove("is-visible") : e.classList.add("is-visible")
}), i.forEach(function(e) {
e.textContent = t.itemCount
}), fetch("/cart?view=" + (this.options.drawer ? "drawer" : "ajax") + "×tamp=" + Date.now(), {
credentials: "same-origin",
method: "GET"
}).then(function(n) {
if (t.options.drawer && e) {
var i = new TimelineLite({
onComplete: function() {
n.text().then(function(e) {
t._replaceContent(e)
})
}
});
i.to(e, .5, {
height: 0,
opacity: 0,
ease: Cubic.easeOut
}, 0), 0 === t.itemCount && i.to(t.element.querySelector(".Drawer__Footer"), .5, {
y: "100%",
transition: "none",
ease: Cubic.easeInOut
}, 0)
} else n.text().then(function(e) {
t._replaceContent(e)
})
})
}
On the Add Cart success API call, need to change the cart animation to ping. Like below:
cart.classList.add("ping");
If someone removes the item from the cart, need to remove that class on the success event of remove like this:
cart.classList.remove("ping");
Note: make sure that "ping" CSS class shows that dot icon on the cart.
I think {% if cart.item_count !=0 %} is the part where the issue is. Even if the value changes, the page is not rerendering. Instead, try this:
<span class="lnr lnr-cart"></span> <span class="Header__CartCount hotiya"></span> <div id="cart_ping" class="cart_ping"></div>
if(cartItems.Count > 0)
{
document.getElementById('cart_ping').style.display = "block";
}
else
{
document.getElementById('cart_ping').style.display = "none";
}
The javascript code goes inside the ajax output.