Ajaxify header cart项目在Woocommerce中计数

Question

我正在为wordpress创建一个自定义的woocommerce集成主题。

我在顶部有一个blob，显示购物车中的项目总数，我想使用Jquery更新这个blob (不重新加载页面)我能够通过获得blob中的当前数量并为每次单击增加+1来增加项目数量，问题是添加到购物车中有一个选项来选择要添加到购物车中的项目数量。因此，如果我选择3个项目并点击按钮，斑点只增加一个。

我可以创建一种方法来获取从前端添加的条目数量，但我认为这是不必要的。我希望能够使用jquery从PHP会话中获取总数，以便在每次单击add item或remove item时，我将从服务器动态获取当前数量。

到目前为止，我所做的是创建一个回显购物车总数的reloadCart.php文件，代码如下

<?php
require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?>

当我访问这个页面时，它反映了当前的项目总数，但我无法从jquery中获得这些数据，因为我上次使用AJAX已经有一段时间了，我也很长一段时间没有在web项目上工作了，但根据我的记忆，我正在进行的AJAX调用是正确的。

我尝试过使用jquery的get()和post()函数以及普通的ajax()函数，但似乎都不起作用。有人能帮帮忙吗？

$(".ajax_add_to_cart").click(function () {
   /*$("#bag-total").html(function () {
        var bagTotal = parseInt($(this).html());
        return ++bagTotal;
    });*/
    alert('clicked');
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        alert("Data: " + data);
    });
}); 

被注释的行是我之前使用的行，通过从前端获取当前购物车编号来添加购物车总数。

任何帮助都将不胜感激。提前感谢！

Answer 1

您不应使用任何重新加载来更新购物车内容计数…相反，您应该使用专用的woocommerce_add_to_cart_fragments操作钩子，即Ajax powered。

1)要刷新的HTML：所以首先在你的主题的header.php文件中，你应该需要将购物车数量嵌入到一个具有定义的唯一ID (或类)的特定html标记中，例如：

$items_count = WC()->cart->get_cart_contents_count(); 
?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>
<?php

或者：

$items_count = WC()->cart->get_cart_contents_count();

echo '<div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>';

2)代码：

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    $items_count = WC()->cart->get_cart_contents_count();
    ?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}

如果在html标记中使用类，将用['.mini-cart-count']替换['#mini-cart-count']。此挂钩还用于刷新迷你购物车的内容。

代码放在活动子主题(或主题)的function.php文件中，也可以放在任何插件文件中。

这几年来，global $woocommerce; + $woocommerce->cart已经过时了，取而代之的是访问WooCommerce cart对象的global $woocommerce;。

如果需要jQuery强制刷新计数器，可以尝试wc_fragment_refresh或wc_fragments_refreshed委托事件，如下所示：

$(document.body).trigger('wc_fragment_refresh');

或者：

$(document.body).trigger('wc_fragments_refreshed');

Answer 2

对于任何想要正确的ajax实现的人来说，这里有一条路要走。

在functions.php中

add_action('wp_ajax_cart_count_retriever', 'cart_count_retriever');
add_action('wp_ajax_nopriv_cart_count_retriever', 'cart_count_retriever');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

在您的脚本文件中(假设您已经获取了脚本文件并将ajax对象传递到脚本中。您还需要将此块放入setInterval或其他一些jquery操作中。

var data = {
  'action': 'cart_count_retriever'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert('Got this from the server: ' + response);
});

Answer 3

我以前没有使用过woocommerce，但当你在你的帖子中说：

当我访问此页面时，它会回显当前项目总数，但我无法从JQuery获取此数据

...would将使用用户端的JavaScript变量进行显示，然后调用PHP update方法，使用AJAX将商品添加到购物车(下面我不会展示，因为您还没有提供代码)。

<?php
    //hardcoded value for $woocommerce->cart->get_cart_contents_count()
    $woocommerce = 59;
?>
<button class="ajax_add_to_cart">Add to cart</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //user sided variable for PHP value
    var total = parseInt($(".totalCost").text()); 
    $(".ajax_add_to_cart").click(function(){
        total++;                     //add to cart
        $(".totalCost").text(total); //update
    });
});
</script>

<p class="totalCost">
    <?php echo json_encode($woocommerce); ?>
</p>

您可以在http://phpfiddle.org/上复制和测试此代码片段

基本上在上面的代码中，我在页面加载时将PHP值设置为段落文本，然后将该值读取到JS变量中，以处理应用程序客户端的数据，然后根据需要更新显示文本。