Woocommerce：添加到购物车后的自定义 jquery 事件

Question

我正在尝试（在存档中）处理某些产品添加到购物车后的事件（图片上的 1 个动作），我想抓住那一刻并更新我的“产品总数”（图片上的 3 个动作）导航菜单中的迷你购物车。（有动作2就可以了）

第二个代码对我不起作用：

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

我的自定义代码在加载 woocommerce js 文件后启动。

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

Answer 1

更新 （与您的 jQuery 脚本相关）

在 jQuery 的 Wordpress 中，您首先需要使用 jQuery 而不是别名 $ 并且您应该需要指定 "ready" 状态以允许 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"……所以它就像您期望的那样工作。

原回答：

迷你购物车 update/refresh 并不真正需要 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因为它们是 购物车 相关事件。

Woocommerce：添加到购物车后的自定义 jquery 事件

Woocommerce: custom jquery event after added to cart

php

wordpress

jquery

cart

woocommerce