web-dev-qa-db-ja.com

Woocommerce：カートに追加された後のカスタムjqueryイベント

enter image description here

カートに商品が追加された後（アーカイブで）イベントを処理しようとしています（画像に対して1つのアクション）。その瞬間をキャッチして、ナビゲーションメニューでミニカートの[商品の総数]（画像に対して3つのアクション）を更新します。 （アクション2で問題ありません）

私が2番目のコードで機能していない：

$( document.body ).on( 'added_to_cart', function(){
console.log('added_to_cart');
});

私のカスタムコードは、woocommerceのjsファイルが読み込まれた後に初期化されました。

Add-to-cart.min.jsコアファイルを編集して独自のロジックを挿入すると、すべてが機能します。何の問題？

phpjquerywordpresswoocommercecart
5
Vital

更新（jQueryスクリプトに関連）

Wordpressでは、最初にエイリアスの代わりにjQueryを使用する必要があります$そしてDOMが完全にロードされるようにするには、「準備完了」状態を指定する必要があります。以下のコードをテストしました。商品がカートに追加されると、ブラウザコンソールで「added_to_cart」JSイベントをトリガーして機能します。

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_shop() || is_product_category() || is_product_tag() ): // Only for archives pages
        ?>
            <script type="text/javascript">
                // Ready state
                (function($){ 

                    $( document.body ).on( 'added_to_cart', function(){
                        console.log('EVENT: added_to_cart');
                    });

                })(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
            </script>
        <?php
    endif;
}

コードは、アクティブな子テーマ（またはテーマ）のfunction.phpファイル、またはプラグインファイルに配置されます。

カートに商品が追加されると、ブラウザコンソールに「added_to_cart」という文字列が表示されます。したがって、期待どおりにこのように機能します。

元の回答：

ミニカートの更新/更新には実際にはjQueryは必要ありませんが、この例のように専用のwoocommerce_add_to_cart_fragmentsアクションフックにフックされたカスタムphp関数では、商品がカートに追加されるたびにアイコンの数とコンテンツが更新されます。

カートアイコンカウントの例の更新：

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_number');
function wc_mini_cart_refresh_number($fragments){
    ob_start();
    ?>
    <div class="mini-cart-count">
        <?php echo WC()->cart->get_cart_contents_count(); ?>
    </div>
    <?php
        $fragments['.mini-cart-count'] = ob_get_clean();
    return $fragments;
}

ミニカートコンテンツの例の更新：

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_items');
function wc_mini_cart_refresh_items($fragments){
    ob_start();
    ?>
    <div class="mini-cart-content" style="display:none;">
        <?php woocommerce_mini_cart(); ?>
    </div>
    <?php
        $fragments['.mini-cart-content'] = ob_get_clean();
        return $fragments;
}

コードは、アクティブな子テーマ（またはテーマ）のfunction.phpファイル、または任意のプラグインファイルに含まれます。

テストされ、動作します。

他の関連するjQuery "body"委任イベントを使用する必要がある場合は、_cart関連イベントであるため、wc_fragment_refreshまたはwc_fragments_refreshedも使用できます。

7
LoicTheAztec