ホームページ > バックエンド開発 > PHPチュートリアル > AJAX を使用して WooCommerce ヘッダー カートのアイテム数を動的に更新する方法

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

Linda Hamilton
リリース: 2024-10-29 06:19:02
オリジナル
1023 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート