ホームページ  >  記事  >  バックエンド開発  >  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>

ただし、この目的で $.get() を使用することは、WooCommerce で推奨されるアプローチではありません。

woocommerce_add_to_cart_fragments アクション フックを使用する

WooCommerce は、Ajax でカートのコンテンツ数を更新するために特別に設計された専用の woocommerce_add_to_cart_fragments アクション フックを提供します。

  1. アクション フックを登録します:

    • テーマの 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 : ' '; ?></div>
        <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
        return $fragments;
    }</code>
  2. HTML を更新して更新:

    • header.php ファイルで、上記のコードで割り当てられた mini-cart-count ID を使用するようにカート数を表示する HTML を更新します:
    <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 アクション フックによって #mini-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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。