ホームページ > バックエンド開発 > PHPチュートリアル > Ajaxを使用してWooCommerceヘッダーカートのアイテム数を動的に更新する方法?

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

Mary-Kate Olsen
リリース: 2024-10-29 18:32:02
オリジナル
714 人が閲覧しました

How to Dynamically Update WooCommerce Header Cart Item Count Using Ajax?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート