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');函数 custom_jquery_add_to_cart_script(){if ( is_shop() || is_product_category() || is_product_tag() )://仅适用于档案页面?><script type="text/javascript">//就绪状态(功能($){$( document.body ).on( '添加到购物车', function(){console.log('EVENT: added_to_cart');});})(jQuery);//"jQuery" 使用 WP(添加 $ 别名作为参数)<?php万一;}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

将产品添加到购物车后，它会在浏览器控制台中显示字符串"added_to_cart"......所以它就像您期望的那样工作.

<小时>

原答案:

迷你购物车更新/刷新并不真正需要 jQuery，而是挂在专用 woocommerce_add_to_cart_fragments 动作钩子中的自定义 php 函数，就像在这个例子中一样，每次刷新图标计数和内容产品已添加到购物车.

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

add_filter('woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_number');函数 wc_mini_cart_refresh_number($fragments){ob_start();?><div class="mini-cart-count"><?php echo WC()->cart->get_cart_contents_count();?>

<?php$fragments['.mini-cart-count'] = ob_get_clean();返回 $fragments;}

刷新迷你购物车内容示例:

add_filter('woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_items');函数 wc_mini_cart_refresh_items($fragments){ob_start();?><div class="mini-cart-content" style="display:none;"><?php woocommerce_mini_cart();?>

<?php$fragments['.mini-cart-content'] = ob_get_clean();返回 $fragments;}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

经过测试并有效.

<小时>

如果您需要使用其他相关的 jQuery "body" 委托事件，您也可以使用 wc_fragment_refresh 或 wc_fragments_refreshed，因为它们是购物车相关事件.

I'm 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 for me with 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屋！