Update woocommerce shopping cart icon dynamically with 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>