Question

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

我的顶部有一个Blob，用于显示购物车中的商品总数，我想使用Jquery更新此Blob（不重新加载页面），我能够通过获取当前商品来增加商品数量blob中的数字，并为每次点击将其增加+1，问题是添加到购物车中有一个选项可以选择要添加到购物车中的商品数。因此，如果我选择3个项目并单击按钮，则斑点仅增加1。

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

到目前为止，我要做的是创建一个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

您不应使用任何重新加载来更新购物车中的物品数量…而应使用由 Ajax驱动的专用woocommerce_add_to_cart_fragments操作挂钩。

1）要刷新的HTML ：因此，首先在主题的header.php文件中，您需要将购物车计数嵌入具有定义的唯一ID（或类），例如：

?>
    <div id="mini-cart-count"></div>
<?php

或：

echo '<div id="mini-cart-count"></div>';

2）代码：

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

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

代码会出现在您活动的子主题（或主题）的function.php文件中，或者出现在任何插件文件中。

几年以来global $woocommerce; + $woocommerce->cart已过时，取而代之的是 WC()->cart 来访问WooCommerce购物车对象。

如果您需要jQuery强制刷新该计数，则可以尝试wc_fragment_refresh或wc_fragments_refreshed委托事件，例如：

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

或：

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

Answer 2

我以前没有使用过woocommerce，但是在帖子中说一个很简单的选择：

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

...将在显示中使用用户端JavaScript变量，然后只需调用PHP更新方法即可使用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变量中以弄乱应用程序客户端的数据，然后更新显示文本如所须。

Answer 3

对于任何想要适当的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);
});

Woocommerce中的Ajaxify标头购物车项目计数

3 个答案: