Woocommerce:添加到购物车后的自定义jquery事件 [英] Woocommerce: custom jquery event after added to cart

问题描述

我正在尝试将某些产品添加到购物车中(在存档中)处理事件(图片上有1个操作)，我想抓住那一刻并在导航中更新我的迷你购物车的产品总数"(图片上有3个操作)菜单. (执行第2步就可以了)

第二个代码不起作用:

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

我的自定义代码是在加载woocommerce js文件后初始化的.

如果我将编辑add-to-cart.min.js核心文件并插入自己的逻辑，则一切正常.是什么问题?

解决方案

更新 (与您的jQuery脚本有关)

在Wordpress for jQuery中，您首先需要使用 jQuery 代替别名 $ ，并且您需要指定就绪"状态以允许之前要完全加载的DOM.我已经测试了下面的代码，一旦将产品添加到购物车，它就可以在浏览器控制台中触发"added_to_cart" J​​S事件:

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，而是将自定义php函数挂钩在专用的woocommerce_add_to_cart_fragments动作挂钩中，如本示例中所示，每次将产品添加到其中时，图标计数和内容都会刷新购物车.

刷新购物车图标计数示例:

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"委托事件，则也可以使用wc_fragment_refresh或wc_fragments_refreshed，因为它们是与购物车相关的事件. /p>

Im trying (in archive) handle event after some product was added to cart (1 action on picture), I want catch that moment and update "Total number of products" (3 action on picture) of my mini cart in navigation menu. (With action 2 is all ok)

Not working by me second code:

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

My custom code inited after when woocommerce js files are loaded.

If I will edit add-to-cart.min.js core file and insert my own logic, all is working. What problem is?

解决方案

Update (related to your jQuery script)

In Wordpress for jQuery, you need first to use jQuery instead of the alias $ and you should need to specify the "ready" state to allow the DOM to be completely loaded before. I have tested the code below and it works triggering the "added_to_cart" JS event in the browser console, once a product is added to cart:

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;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

It display the string "added_to_cart" in the browser console once a product has been added to cart… so it's just working this way as you are expecting.

---

Original answer:

The mini-cart update/refresh doesn't really need jQuery but custom php function hooked in dedicated woocommerce_add_to_cart_fragments action hook, like in this examples, where the icon count and the content are refreshed each time a product is added to cart.

Refreshing the cart icon count example:

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;
}

Refreshing the mini-cart content example:

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;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.

---

If you need to use other related jQuery "body" delegated events, you can use wc_fragment_refresh or wc_fragments_refreshed too as they are cart related events.

这篇关于Woocommerce:添加到购物车后的自定义jquery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！