Tengo la siguiente configuración: https://jsfiddle.net/uosLke60/
input.Add_To_Cart_Button { background-color: #000; color: #fff; border: none; font: inherit; cursor: pointer; font-size: 13px; margin-bottom: 40px; width: 120px; -webkit-appearance: none; border-radius: 0; } <div class="Product_Card_Button"> <form method="post" action="/cart/add"> <quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;"> <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button> <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;"> <button class="quantity__button no-js-hidden" name="plus" type="button">+</button> </quantity-input> <br> <input type="submit" value="Add to cart" class="Add_To_Cart_Button" /> </form> </div>Cuando se presiona el botón Agregar al carrito, la página se actualiza. ¿Cómo puedo ajustarlo para que el producto se agregue al carrito sin actualizar la página? Probé varias soluciones de jQuery sugeridas en otras publicaciones, pero no tuve suerte. Cualquier sugerencia sería útil. Gracias.
Debe escuchar el evento de envío en su formulario y:
event.preventDefault() que bloquea la acción predeterminada (en su caso, el envío del formulario)return false , que finalmente cancela el eventoyo haría algo como esto
function handleAddToCart(form) { const url = form.getAttribute("action"); const formData = new FormData(form); doSomePost(url, formData); } // Cache this if possible document.querySelector("[add-to-cart-form]") .addEventListener("submit", (e) => { e.preventDefault(); handleAddToCart(e.target); return false; });También actualicé tu violín => violín