如何使用 Ajax 刷新 WooCommerce 标头购物车项目计数？

WooCommerce 中的 Ajaxify 标题购物车项目计数

在 WooCommerce 中，在标题中显示购物车中的项目数量对于用户导航至关重要。当这些商品发生更改（添加或删除）时，最好使用 JavaScript（特别是 Ajax）更新购物车计数，而无需重新加载页面。

使用 Ajax 从 PHP 获取购物车计数

获取使用 Ajax 从 PHP 获取当前购物车计数，我们需要创建一个专用文件，例如 reloadCart.php，以回显此计数。

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

接下来，在 JavaScript 代码中，我们可以使用以下命令检索此计数$.get() 函数：

<code class="js">$(".ajax_add_to_cart").click(function () {
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        console.log("Cart Count: " + data);
    });
});</code>

但是，在 WooCommerce 中不建议使用 $.get() 来实现此目的。

利用 woocommerce_add_to_cart_fragments 操作挂钩

WooCommerce 提供了专用的 woocommerce_add_to_cart_fragments 操作挂钩，专门用于更新 Ajax 中的购物车内容计数。

1. 注册操作挂钩：

   • 在主题的functions.php 文件中，添加以下代码：

   <code class="php">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 : ' '; ?></div>
       <?php $fragments['#mini-cart-count'] = ob_get_clean();
       return $fragments;
   }

2. 更新 HTML 以刷新：

   • 在 header.php 文件中，更新显示购物车计数的 HTML，以使用上述代码中分配的迷你购物车计数 ID：

   <code class="html"><div id="mini-cart-count">
   <?php echo WC()->cart->get_cart_contents_count(); ?></div></code>

现在，当单击 ajax_add_to_cart 按钮时，woocommerce_add_to_cart_fragments 操作挂钩将自动使用刷新的计数更新 #mini-cart-count HTML 元素。

其他信息

• WC()->cart->get_cart_contents_count() 方法替换了已弃用的 $woocommerce->cart->get_cart_contents_count()。

• 要使用 jQuery 强制刷新计数，请使用wc_fragment_refresh 或 wc_fragments_refreshed 委托事件：

  <code class="js">$(document.body).trigger('wc_fragment_refresh'); // or wc_fragments_refreshed</code>

以上是如何使用 Ajax 刷新 WooCommerce 标头购物车项目计数？的详细内容。更多信息请关注PHP中文网其他相关文章！