[FIXED] how to add class without reloading page

Issue

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)
                        })
                    })
                }

Solution

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.

Answered By - Viral Patel

Answer Checked By - Cary Denson (PHPFixing Admin)