The Ajax seems to work just fine but the cart content won't refresh as expected. I want the contents of the cart to be refreshed once the "add to cart" button is clicked. As it is now, I have to refresh the page manually to see the added products.
I'm using this function to add a product to my woocommerce cart:
function addToCart(p_id) {
jQuery.ajax({
type: 'POST',
url: '/wp/?post_type=product&add-to-cart='+p_id,
data: { 'product_id': p_id,
'quantity': amount},
success: function(response, textStatus, jqXHR){
console.log("Product added");
}/*,
dataType: 'JSON'*/
});
}
jQuery('#addToCart').click(function(e) {
e.preventDefault();
addToCart(prod_id["product_id"]);
return false;
});
Is it possible to refresh only the cart after a product was added?
This is possible - you need to use a modified version of this code:
http://docs.woothemes.com/document/show-cart-contents-total/
Edit - in case of future 404's
<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>
// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php).
// Used in conjunction with https://gist.github.com/DanielSantoro/1d0dc206e242239624eb71b2636ab148
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start();
?>
<a class="cart-customlocation" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
<?php
$fragments['a.cart-customlocation'] = ob_get_clean();
return $fragments;
}
Do you mind if the ajax request "automatically" refreshes the page on its own? then you could try something like this... (untested).
function addToCart(p_id) {
jQuery.ajax({
type: 'POST',
url: '/wp/?post_type=product&add-to-cart='+p_id,
data: { 'product_id': p_id,
'quantity': amount},
success: function(response, textStatus, jqXHR){
location.reload(true);
}/*,
dataType: 'JSON'*/
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With