首頁 > 後端開發 > php教程 > 如何在 WooCommerce 中 Ajaxify 標頭購物車專案計數?

如何在 WooCommerce 中 Ajaxify 標頭購物車專案計數?

Patricia Arquette
發布: 2024-10-30 01:26:02
原創
852 人瀏覽過

How to Ajaxify Header Cart Items Count in WooCommerce?

WooCommerce 中的Ajaxify 標頭購物車項目計數

挑戰

在自定義WooCommerce 整合中WordPress 主題出現了一個問題,即新增項目後購物車項目計數指示器顯示不正確的值。罪魁禍首是為購物車添加了特定數量的商品,導致指標僅增加一。

解決方案

為了解決這個問題,我們可以利用 WooCommerce 的專用工具woocommerce_add_to_cart_fragments 操作掛鉤,為更新購物車計數提供 Ajax 商品支援。

實作

1. HTML 和ID/Class

在主題的header.php 檔案中,我們定義將顯示購物車計數的HTML 元素。分配唯一的ID 或類別以便於定位非常重要:

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

2. PHP程式碼

接下來,我們在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>
登入後複製

3. Ajax 更新

如果您需要使用jQuery 進行額外控制,請考慮使用wc_fragment_refresh 或frfragments事件:

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

<code class="javascript">$(document.body).trigger('wc_fragments_refreshed');</code>
登入後複製

透過實施這些更改,即使添加特定數量的產品,購物車商品計數指示器也會準確反映購物車中的商品數量。

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

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