使用ajax动态更新woocommerce购物车图标

时间:2014-01-02 17:13:49

标签: ajax wordpress woocommerce cart shopping

我已经找到了答案,但找不到答案。

在我的woocommerce商店,我想在网站顶部有一个篮子图标。当顾客在购物车中放入物品时,他们想要将此图标换成另一个图标 - 只要购物车不为空,该图标(“非空”)就会保留。

我所追求的是一个PHP类型的if / else调用,它说“如果购物车是空的,则显示图标A,否则显示图标B”。如果有人能够对此有所启发,我将非常感激!

我可以根据这个woocommerce教程动态更新购物车文本,

http://docs.woothemes.com/document/show-cart-contents-total/

在我的页面

  <?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>

在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;

}

目前无论购物车中是什么,它都会显示两个图像。 你可以在上面看到上面的实现 http://fungass.com/testing/shop/uncategorized/abc/

2 个答案:

答案 0 :(得分:1)

我实际上建议你使用cookies&amp;用于处理此功能的JavaScript,以获得允许缓存插件在非WooCommerce页面上提供静态页面但在页面上仍然有一些动态部分(例如购物车总数或仅仅是一个填充的购物车图标)的附加好处

PHP 方面,在init上,检查购物车总数并设置Cookie值...

// 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');

JavaScript 方面,检查Cookie,然后更改图标...

// 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();
}

希望这有点帮助!玩得开心!

答案 1 :(得分:1)

终于解决了这个问题,

 <?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>