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

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

概要:

Woocommerce では、追加時にヘッダー カートのアイテム数を更新します/アイテムの削除は、Ajax を使用してページをリロードせずに実行できます。

解決策:

1.カート数の HTML マークアップ:

テーマの header.php に次のコードを追加して、一意の ID またはクラスを持つ HTML タグにカート数を埋め込みます:

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

2.コードの実装:

次に、このコードを 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>

このフックは、「mini-cart-count」要素を次のように更新します。カートに商品を追加した後に更新された数。

3.オプションの jQuery トリガー:

jQuery 経由でカウントの更新を強制したい場合は、次のいずれかの委任イベントを使用します:

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

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

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