Updating the WooCommerce mini-cart via AJAX

Excluding the mini-cart from caching

The mini-cart is a scaled-down version of the WooCommerce cart. It’s the template that the WooCommerce Cart widget uses to display the user’s cart in the sidebar or footer. In a client build, I decided to use the mini-cart template to display the user’s cart when they hover over the cart icon in the navigation menu. However, I found that with caching plugins also running, it’s possible to run into problems with the mini-cart not displaying the correct information to users – in effect, they’d be viewing the contents of other users’ carts.

Why use AJAX?

The way to prevent cached versions of the cart displaying was to use AJAX. AJAX allows the theme to update parts of a page without reloading the whole page. Even though most caching plugins will allow you to exclude specific pages from being cached, thereby avoiding any problems with the main cart page itself, it’s not easy to exclude sections of a page. AJAX solves this problem.

How to exclude the mini-cart from being cached

For a full explanation of how AJAX works within WordPress, please check the Codex here. For a quick overview of how I solved this specific problem, read on:

The JavaScript

If you don’t already have a JavaScript file where you put your theme scripts, create one, and add the following code:

;
( function ( $ ) {
 "use strict";
// Define the PHP function to call from here
 var data = {
   'action': 'mode_theme_update_mini_cart'
 };
 $.post(
   woocommerce_params.ajax_url, // The AJAX URL
   data, // Send our PHP function
   function(response){
     $('#mode-mini-cart').html(response); // Repopulate the specific element with the new content
   }
 );
// Close anon function.
}( jQuery ) );

 

This code creates an anonymous jQuery function that defines our PHP function (below) that we’ll use to load the new content. It passes this parameter back to the server then uses the response to populate a defined element with the new content. In this example, we are populating the #mode-mini-cart element with the content but this is likely to be different in your theme.

The PHP

In your functions.php file, add the following snippet:

function mode_theme_update_mini_cart() {
  echo wc_get_template( 'cart/mini-cart.php' );
  die();
}
add_filter( 'wp_ajax_nopriv_mode_theme_update_mini_cart', 'mode_theme_update_mini_cart' );
add_filter( 'wp_ajax_mode_theme_update_mini_cart', 'mode_theme_update_mini_cart' );

This is the PHP code that is triggered by our JavaScript. It uses a standard WooCommerce function, wc_get_template(), to locate the template file for the mini-cart. This will find the default mini-cart.php template if you don’t have a customized version in your theme. It then returns that content to your JavaScript, which completes the process by repopulating the correct element in the page.

Note that we register this function using wp_ajax_ filters. Check the Codex for more information.


Popular Posts

10 thoughts on “Updating the WooCommerce mini-cart via AJAX

Hi I’m triyng to do this function but the console shows the next message:

“Uncaught ReferenceError: woocommerce_params is not defined”

What can be the problem?

Reply

Do you have WooCommerce activated? If so, you may have to ensure you are enqueuing the script above after WC enqueues its scripts, otherwise woocommerce_params might not be available.

Reply

hi,
Thank you for your script!
Where should the above code (javascript) be?
Please help me.

Reply

Put it with your other theme scripts, or create a new js file.

Reply

Thanks for your prompt reply
I placed the code in the footer of website and the products are added to the Intended location, but after reloading the page.
and Ajax does not work.
Please help me.

Reply

hi Gareth,
If you can solve the problem please help me.
thanks.

Reply

Hi

I can’t really help with specifics like this – sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *