WooCommerce でヘッダー カートのアイテム数を Ajax 化する方法: ステップバイステップ ガイド

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

概要

ページを再読み込みせずにヘッダー カート アイテム数を更新すると、ユーザー エクスペリエンスが向上します。問題とその解決策を詳しく見てみましょう。

問題ステートメント

目標は、jQuery を使用してサーバーからカートのアイテムの総数を動的に取得することです。ただし、現在の実装では、複数の項目を同時に追加する場合に問題が発生します。

解決策

1.専用の WooCommerce フックを使用します

手動リロードの代わりに、Ajax を利用した woocommerce_add_to_cart_fragments アクション フックを利用します。

• 一意の ID またはクラスを使用してカート数を HTML に埋め込みます。例えば
  ...
  .
• 次のコードを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>

2. jQuery を使用して強制的に更新します

必要に応じて、委任されたイベントを使用してカウントを強制的に更新します:

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

または

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

利点

• 不必要なリロードを回避します。
• アイテムの追加または削除ごとにカートの数を動的に更新します。
• リアルタイムのフィードバックを提供することで、ユーザー エクスペリエンスを向上させます。

以上がWooCommerce でヘッダー カートのアイテム数を Ajax 化する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。