AJAX を使用して WooCommerce ヘッダー カートのアイテム数を動的に更新する方法

WooCommerce の Ajaxify ヘッダー カート アイテム数

ニーズの特定

WooCommerce 統合 WordPress テーマで、ヘッダー カートを更新するページをリロードせずにアイテム数をカウントするのは一般的な課題です。 jQuery は解決策を提供しますが、アイテムを複数の数量で追加できる場合には疑問が生じます。

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 コード

テーマの function.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>

#mini-cart-count を .mini-cart- に置き換えます。クラスを使用する場合はカウントします。

jQuery リフレッシュ

追加の jQuery リフレッシュが必要な場合:

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

または

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

以上がAJAX を使用して WooCommerce ヘッダー カートのアイテム数を動的に更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。