Necesito el ícono del carrito con animación de ping cuando hay más de 0 artículos disponibles, muestra el ping del carrito y cuando el carrito está vacío muestra el ícono del carrito normal. Obtengo lo que quiero, pero el problema es que solo funciona cuando el usuario vuelve a cargar la página. hay alguna forma de agregar una clase sin recargar la página
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) }) }) }En la llamada API de éxito de Agregar carrito, debe cambiar la animación del carrito a ping. Como abajo:
cart.classList.add("ping");Si alguien elimina el artículo del carrito, debe eliminar esa clase en el caso de éxito de la eliminación de esta manera:
cart.classList.remove("ping");Nota: asegúrese de que la clase CSS "ping" muestre ese ícono de punto en el carrito.
Creo que {% if cart.item_count !=0 %} es la parte donde está el problema. Incluso si el valor cambia, la página no se vuelve a representar. En su lugar, intente esto:
<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"; }El código javascript va dentro de la salida ajax.