WooCommerce でヘッダー カートのアイテム数を Ajaxify する方法?

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

チャレンジ

カスタム WooCommerce 統合内WordPress テーマでは、商品を追加した後にカートの商品数インジケーターに誤った値が表示されるという問題が発生しました。犯人は特定の数量のアイテムをカートに追加しており、その結果、インジケーターは 1 つだけ増加しました。

解決策

これに対処するには、WooCommerce の専用ツールを活用できます。 woocommerce_add_to_cart_fragments アクション フック。カートのアイテム数を更新するための Ajax サポートを提供します。

実装

1. HTML と ID/クラス

テーマの header.php ファイルで、カート数を表示する HTML 要素を定義します。ターゲティングを容易にするために、一意の ID またはクラスを割り当てることが重要です:

<code class="html"><div id="mini-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?></div></code>

2. 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 : ' '; ?></div>
    <?php $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}

3. Ajax Update

jQuery による追加の制御が必要な場合は、wc_fragment_refresh または wc_fragments_refreshed イベントの使用を検討してください:

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

または

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

これらの変更を実装することによって、カートの商品数インジケーターは、特定の数量の商品を追加した場合でも、カート内の商品数を正確に反映します。

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