Question 11963 in Shopify Question posted in
The Shopify help center can be found here.

how to add class without reloading page – Shopify

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search