I'm working on a website that allows users to add products to cart from the home page. I've followed a few resources online from their website and other SO questions which allows me to add products to the cart via Ajax but the cart total will not update without a page reload.
WooCommerce's documentation is where the cpp_header_add_to_cart_fragment function came from and it doesn't seem to work at all. Originally I was using add_to_cart_fragments but I found out that was deprecated and I should be using woocommerce_add_to_cart_fragments but that change doesn't help either.
The more I read the code... I'm noticing that the fragments are being returned from the ajax call so I'm beginning to think I need to replace the html that is showing the cart total with what is returned from the javascript?
page_home.php
<!-- Cart link to be updated when products are added --> <a href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"> <?php echo WC()->cart->get_cart_total(); ?> </a> functions.php
add_action('wp_enqueue_scripts', 'cpp_enqueue_scripts'); function cpp_enqueue_scripts() { /* Other enqueue/registers */ wp_register_script('diy_kits', get_template_directory_uri().'/js/diy_kit.js'); wp_enqueue_script('diy_kits'); wp_localize_script( 'diy_kits', 'cpp_ajax', array( 'ajaxurl' => admin_url('admin-ajax.php'), 'diy_product_nonce' => wp_create_nonce('diy_product_nonce') ) ); } add_action('wp_ajax_nopriv_cpp_ajax-submit', 'cpp_ajax_submit'); add_action('wp_ajax_cpp_ajax-submit', 'cpp_ajax_submit'); function cpp_ajax_submit() { global $woocommerce; $nonce = $_POST['nonce']; if(!wp_verify_nonce($nonce, 'diy_product_nonce')) { wp_die('Busted!'); } // Add product to cart... this works $product_id = $_POST['product_id']; if( $woocommerce->cart->add_to_cart( $product_id ) ) { $data = apply_filters('woocommerce_add_to_cart_fragments', array()); do_action('woocommerce_ajax_added_to_cart', $product_id); } else { $data = array( 'success' => false, 'product_id' => $product_id ); } $response = json_encode($data); header("Content-Type: application/json"); echo $response; exit; } cpp_header_add_to_cart_fragment
// CART UPDATE AJAX this doesn't work add_filter('woocommerce_add_to_cart_fragments', 'cpp_header_add_to_cart_fragment'); function cpp_header_add_to_cart_fragment( $fragments ) { global $woocommerce; ob_start(); ?> <a href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"> <?php echo WC()->cart->get_cart_total(); ?> </a> <?php $fragments['a.cart-contents'] = ob_get_clean(); return $fragments; } diy_kits.js
// setup and other stuff... links.click(function(e) { /* unrelated stuff */ jQuery.post( cpp_ajax.ajaxurl, { action : 'cpp_ajax-submit', nonce : cpp_ajax.diy_product_nonce, product_id : jQuery(this).attr('data-product-id') }, function(response) { console.log(response); } ); }); 2 Answers
In case someone happens upon this... woocommerce_add_to_cart_fragments was returning the new html string in the $fragments array and since I was calling it in my ajax function that was being turned into a json object. So in my diy_kit.js in the success part of the jquery function, I just had to use that string to update the cart total. I'll paste the edits below:
page_home.php
<div> <a href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"> <?php echo WC()->cart->get_cart_total(); ?> </a> </div> diy_kit.js
/*inside jQuery.post() function */ function(response) { jQuery('#cart_container').html(response['a.cart-contents']); } add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) { ob_start(); ?> <li><a href="javascript:void(0)"><svg xmlns=""> <symbol viewBox="0 0 700 700"><title>shopping-cart</title> <path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"></path> <path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"></path> <path d="m360.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"></path> </symbol> </svg><svg viewBox="0 0 40 40"><use xlink:href="#shopping-cart" x="12%" y="16%"></use></svg><i> <?php echo WC()->cart->get_cart_contents_count(); ?> </i></a></li> <?php $fragments['li.my_cart'] = ob_get_clean(); return $fragments; } ); add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) { ob_start(); ?> <?php woocommerce_mini_cart(); ?> <?php $fragments['div.minicart_all_data'] = ob_get_clean(); return $fragments; } ); 
