Update woocommerce shopping cart icon dynamically with ajax - ajax

Question

I Have searched for an answer to this, but not been able to find one.
In my woocommerce shop, i want a basket icon at the top of the site. When a customer puts something in the cart, they want to swap this icon for a different one - this icon ("not empty") will stay as long as the cart is not empty.
What I'm after is a PHP-type if / else call, which says "if the cart is empty, display icon A, else display icon B". If anyone could shine some light on this, I'd be most grateful!
I am able to update the cart text dynamically following this woocommerce tutorial,
http://docs.woothemes.com/document/show-cart-contents-total/
In my Page
<?php global $woocommerce;
if($woocommerce->cart->get_cart_total()=='0') { ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/empty_cart.png" alt="" width="30" height="30">
<?php }else{ ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/full_cart.png" alt="" width="30" height="30">
<?php } ?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" >Your Cart : <?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>
In Functions.php
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start();
if($woocommerce->cart->get_cart_total()=='0') { ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/empty_cart.png" alt="" width="30" height="30">
<?php
}else{ ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/full_cart.png" alt="" width="30" height="30">
<?php }
?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" >Your Cart : <?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-contents'] = ob_get_clean();
return $fragments;
}
currently it is showing both the images no matter what is in the cart.
You can see the implementation of the above at
http://fungass.com/testing/shop/uncategorized/abc/

Answer 1

Finally solved it like this,
<?php global $woocommerce; ?>
<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>" ><?php if ($woocommerce->cart->cart_contents_count == 0){
printf( '<img src="%s/images/empty.png" alt="empty" height="25" width="25">', get_stylesheet_directory_uri());
}else{
printf( '<img src="%s/images/full.png" alt="full" height="25" width="25">', get_stylesheet_directory_uri());
}
?> </a>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" >
Your Cart : <?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>

Answer 2

I would actually recommend that you use cookies & JavaScript to handle this functionality for the added benefit of allowing caching plugins to serve static pages on non-WooCommerce pages but still have some dynamic pieces on the page (like cart totals or just simply a populated cart icon).
On the PHP side of things, on init, check for cart totals and set a cookie value...
// this should only ever fire on non-cached pages (so it SHOULD fire
// whenever we add to cart / update cart / etc
function update_cart_total_cookie()
{
global $woocommerce;
$cart_total = $woocommerce->cart->cart_contents_count;
setcookie('woocommerce_cart_total', $cart_total, 0, '/');
}
add_action('init', 'update_cart_total_cookie');
On the JavaScript side of things, examine the cookie and then change the icon...
// use the custom woocommerce cookie to determine if the empty cart icon should show in the header or the full cart icon should show
// *NOTE: I'm using the jQuery cookie plugin for convenience https://github.com/carhartl/jquery-cookie
var cartCount = $.cookie("woocommerce_cart_total");
if (typeof(cartCount) !== "undefined" && parseInt(cartCount, 10) > 0) {
$(".full-cart-icon").show();
$(".empty-cart-icon").hide();
// optionally you can even use the cart total count if you want to show "(#)" after the icon
// $(".either-cart-icon span").html("(" + cartCount + ")");
}
else {
$(".full-cart-icon").hide();
$(".empty-cart-icon").show();
}
Hope this helps a bit! Have fun!