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

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