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

Posted 2023-02-24

【中文标题】Woocommerce：添加到购物车后的自定义 jquery 事件

【英文标题】：Woocommerce: custom jquery event after added to cart

【发布时间】：2018-05-07 20:00:34

【问题描述】：

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

第二个代码不适合我：

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

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

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

【问题讨论】：

您的问题需要更详细。对不起，但有点难以理解你想说什么。请更好地解释你自己。

我正在尝试在将某些产品添加到购物车后处理事件，我想抓住那个时刻并在导航菜单中更新我的迷你购物车的“产品总数”。

【参考方案1】：

更新 （与你的jQuery脚本有关）

在 Wordpress for jQuery 中，您首先需要使用 jQuery 而不是别名 $，并且您需要指定“就绪”状态以允许之前要完全加载的 DOM。我已经测试了下面的代码，一旦将产品添加到购物车，它就会在浏览器控制台中触发“add_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”委托事件，你也可以使用wc_fragment_refresh或wc_fragments_refreshed，因为它们是cart相关的事件。

【讨论】：

感谢代码，但我只需要处理基于 jquery 的事件“add_to_cart”

@Vital 你的问题不太清楚......我们不知道你是如何设置这个 jQuery 代码（挂钩、模板或注册）以及在哪里（如果它在单个产品页面或商店档案中（或其他地方（带有产品短代码））......所以请尝试澄清并提供更多细节。谢谢

添加图片。一切都在商店档案中。

@Vital 更新了我的答案并让它发挥作用……请检查详细信息。 （截图很丑，但是很明确） :) …

好的，现在可以工作了，但是....因为当你的代码像你在functions.php中写的那样放置时，它会放在add-to-cart.min.js文件之前并且它可以工作...... :)这是一个魔法或者这个事件'add_to_cart'被覆盖了？跨度>