How to make the cart update using ajax?
The code below, updates the shopping cart, but using a page reload.
With Bricks, simple things get complicated(
const wooForm = document.querySelector('.woocommerce');
const updateCart = wooForm.querySelector("[name='update_cart']");
const clickEvent = new MouseEvent('click');
wooForm.addEventListener('click', (e)=>{
if (e.target.classList.contains('action')) {
updateCart.dispatchEvent(clickEvent);
}
});
Hello
same problem triggering ajax cart update with update button
seems it’s solves adding a “.woocommerce-cart-form__contents” div between form div e “carts elements” div
Yep. Same thing I’m saying to myself. With bricks the simplest things get complicated…
You figured out any solution for that issue?
I build a side cart with that offcanvas element because the stock cart is awful and client wants the CartPops look. But with the interaction now we are back to 2000.
<?php
/**
* Update Cart Automatically on Quantity Change
*
* @author Misha Rudrastyh
* @url https://rudrastyh.com/woocommerce/remove-update-cart-button.html
*/
add_action( 'wp_head', function() {
?><style>
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}</style><?php
} );
add_action( 'wp_footer', function() {
?><script>
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click"); // trigger cart update
}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
});
} );
</script><?php
} );Thank you! This works well for me.