Ajaxify header cart items count in Woocommerce

Question

I\'m creating a custom woocommerce integrated theme for wordpress.

I have a blob on the top that displays the total number of items in the cart, I want to update thi

Answer 1

You should not use any reload to update the cart content count… Instead you should use the dedicated woocommerce_add_to_cart_fragments action hook that is Ajax powered.

1) The HTML to be refreshed: So first in your theme's header.php file you should need to embed the cart count in a specific html tag with a defined unique ID (or a class), for example something like:

?>
    <div id="mini-cart-count"></div>
<?php

or:

echo '<div id="mini-cart-count"></div>';

2) The code:

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    ?>
    <div id="mini-cart-count">
        <?php echo WC()->cart->get_cart_contents_count(); ?>
    </div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}

if you use a class in your html Tag, you will replace ['#mini-cart-count'] by ['.mini-cart-count']. This hook is also used to refresh the mini-cart content.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Since few years global $woocommerce; + $woocommerce->cart is outdated and replaced by WC()->cart to access WooCommerce cart object.

---

If you need jQuery to force refresh that count, you can try wc_fragment_refresh or wc_fragments_refreshed delegated events, like:

$(document.body).trigger('wc_fragment_refresh');

or:

$(document.body).trigger('wc_fragments_refreshed');

Answer 2

For anyone who wants the proper ajax implementation, here is the way to go.

in functions.php

add_action('wp_ajax_cart_count_retriever', 'cart_count_retriever');
add_action('wp_ajax_nopriv_cart_count_retriever', 'cart_count_retriever');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

in your script file (assuming you have enqued the script file and passed the ajax object into the script. you also need to put this block into a setInterval or in some other jquery action.

var data = {
  'action': 'cart_count_retriever'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert('Got this from the server: ' + response);
});

Answer 3

I have not used woocommerce before but one pretty simple option when you say in your post:

When I visit this page it echos the current item totals, but I cant get this data from JQuery

...would be to use a user-sided JavaScript variable for the display, and then just call the PHP update methods for adding items to your cart using AJAX (which I do not show below because you have not provided that code).

<?php
    //hardcoded value for $woocommerce->cart->get_cart_contents_count()
    $woocommerce = 59;
?>
<button class="ajax_add_to_cart">Add to cart</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //user sided variable for PHP value
    var total = parseInt($(".totalCost").text()); 
    $(".ajax_add_to_cart").click(function(){
        total++;                     //add to cart
        $(".totalCost").text(total); //update
    });
});
</script>

<p class="totalCost">
    <?php echo json_encode($woocommerce); ?>
</p>

You can copy and test this snippet on: http://phpfiddle.org/

Basically in the above code, I set the PHP value as a paragraph text on page load and then read that value into a JS variable to mess around with the data on the client side of the application and then I update the display text as needed.