Header Wishlist items counter

So this is to show how a rookie can forget elementary things.

How I added the counter to the header was adding this in header.php:

<a href="/wishlist/" class="wishlist-count">
	<span> <?php jvm_woocommerce_wishlist_get_count(); ?> </span>
</a>

What I forgot was that I needed to add echo for the function to actually output anything, so this is how it’s looking now:

<a href="/wishlist/" class="wishlist-count">
	<span> <?php echo jvm_woocommerce_wishlist_get_count(); ?> </span>
</a>

It works like a charm now. All I need to do more is to use AJAX to update the counter.

Thank you,
Ovidiu

Hi Ovidiu,

Glad you figured that out yourself. For updating your counter with ajax I would recommend using the woocommerce hook:

add_filter( 'woocommerce_add_to_cart_fragments', 'name_of_my_fragment_update_function');

This hook lets you add html fragments that should be updated whenever a WooCommerce ajax call is made. An general example can be found here: https://docs.woocommerce.com/document/show-cart-contents-total/

You will need to add the code you posted to this hook, so the content can be udpated with ajax. No need to make your own ajax call or whatever.

Kind regards, Joris

• This reply was modified 4 years, 7 months ago by Joris van Montfort.

Hello, Joris.

That’s exactly how I’ve tried doing it, reusing the Add to cart fragments code and adapting it, but no luck yet. I won’t give up, though, especially since you say it should work, now I’m more confident it’s doable like this and I’m the one missing something (again).

Thank you,
Ovidiu

Hi Ovidiu,

I found some other javascript code that might be usefull. I slightly modified it to match your code.

 $(document).on("beforeupdate.JVMWooCommerceWishlist", function(e) {
        var $counter = $("a.wishlist-count span");
        $counter.html(e.wishlist.length);
    });

No Ajax needed. Code is not tested so please let me know if it works for you.

Kind regards, Joris

The function above doesn’t seems to work.

Isn’t AJAX needed to automatically update the counter when the “Add to whishlist” button is clicked?

No progress with fragments either. Yet. ??

Ok, got some partial progress with the fragments, but counter it’s only updating when cart is updating. So if I add to wishlist nothing happens, but if I add to cart a product, both counters updates.

Here’s my function:

function evo_wishlist_count_fragments( $fragments ) {
	ob_start();
	$fragments['a.wishlist-count'] = '<a class="wishlist-count" href="/wishlist/"><span>' . jvm_woocommerce_wishlist_get_count() . '</span></a>';
	return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'evo_wishlist_count_fragments', 10, 1 );

Hi there, Joris.

Just a heads up, it seems that the stock check doesn’t work on the Wishlist page, every product is displayed as in stock, even though some of them are out of stock (as seen by the missing price and on the product’s page).

And as an update, I haven’t been able to make the Wishlist counter to update, not by AJAX, nor by fragments. But because at page refresh the counter is correct, I ended up writing a JS function to get the initial count and update it when items are added to or removed from Wishlist. It doesn’t store anything and it doesn’t need to, the counter will be updated by your function at any page load. Not perfect, but it works great. And it’s way faster than Woo’s add to cart AJAX.

Best regards,
Ovidiu