how to add class without reloading page-CodePudding

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")   "&timestamp="   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)
                        })
                    })
                }

CodePudding user response：

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.

CodePudding user response：

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.