首頁  >  文章  >  後端開發  >  如何使用 Ajax 刷新 WooCommerce 標頭購物車專案計數?

如何使用 Ajax 刷新 WooCommerce 標頭購物車專案計數?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-01 01:45:28432瀏覽

How to Refresh WooCommerce Header Cart Item Count Using Ajax?

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;
    }</code>
  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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn