首頁 > 後端開發 > php教程 > 如何使用 AJAX 動態更新 WooCommerce 標頭購物車專案計數?

如何使用 AJAX 動態更新 WooCommerce 標頭購物車專案計數?

Linda Hamilton
發布: 2024-10-29 06:19:02
原創
1013 人瀏覽過

How to Dynamically Update WooCommerce Header Cart Items Count Using AJAX?

WooCommerce 中的Ajaxify 標頭購物車專案計數

確定需求

利用AJAX 檢索總計數

從PHP 動態檢索購物車總數使用jQuery 進行會話時,會建立一個reloadCart.php 檔案來回顯該值:

<code class="php"><?php
require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?></code>
登入後複製
AJAX 實作

但是,嘗試使用AJAX 呼叫此檔案jQuery 的get()、post() 或ajax() 函數不成功。

改進的方法

WooCommerce 提供了專用的 woocommerce_add_to_cart_fragments,而不是依賴重新載入支援 Ajax 的操作掛鉤。

HTML 整合

使用唯一ID 或類別將購物車計數嵌入標頭中:

<code class="php">$items_count = WC()->cart->get_cart_contents_count(); 
?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&amp;nbsp;'; ?></div>
<?php
登入後複製
PHP 代碼

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 : '&amp;nbsp;'; ?></div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}</code>
登入後複製

PHP 程式碼

在主題的function.php 檔案或外掛程式中實作以下程式碼:

將#mini-cart-count 替換為.mini-cart-如果使用類別則計數。

<code class="php">$(document.body).trigger('wc_fragment_refresh');</code>
登入後複製
jQuery 刷新

<code class="php">$(document.body).trigger('wc_fragments_refreshed');</code>
登入後複製
如果需要額外的 jQuery 刷新:或

以上是如何使用 AJAX 動態更新 WooCommerce 標頭購物車專案計數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板