如何使用 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 操作鉤將自動使用更新計數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中文網其他相關文章！