在 WooCommerce 单一产品页面上获取“added_to_cart”JS 事件的产品属性

Question

我正在学习如何使用 ' added_to_cart' javascript 事件，以便我可以通过 javascript 警报（例如 SweetAlert2）显示添加的产品信息。

我在我的 WooCommerce 测试网站中使用 Get specific WooCommerce product data on "added_to_cart" javascript event 答案代码（刚刚从 jQuery 中删除了 bianoTrack() 函数），设置了 3 个产品（即 2 个简单和 1 个变体）。

在我的 Chrome 开发者 JS 控制台中，我得到了以下信息：

我没有看到任何产品信息。

有谁知道为什么“added_to_cart”javascript 事件无法获取产品信息？

我已为“添加到购物车”按钮启用 AJAX。

Answer 1

这不适用于单个产品页面正常添加到购物车。它用于 Ajax 在产品循环中添加到购物车，例如商店页面、存档页面、相关产品……

请注意，通过 Ajax 添加到购物车的产品不会重新加载页面。

该代码在上一个 WooCommerce 版本上仍然可以完美运行：

这是一个“甜蜜警报 2”示例，在 ajax 添加到购物车上显示产品名称：

// Add some product data to "add to cart" button for 'added_to_cart' js event
add_action( 'woocommerce_loop_add_to_cart_link', 'filter_wc_loop_add_to_cart_link', 10, 3 );
function filter_wc_loop_add_to_cart_link( $button_html, $product, $args ) {
    if( $product->supports( 'ajax_add_to_cart' ) ) {
        $search_string  = 'data-product_sku';

        // Insert custom product data as data tags
        $replace_string = sprintf(
            'data-product_name="%s" data-product_price="%s" data-currency="%s" %s',
            $product->get_name(), // product name
            wc_get_price_to_display( $product ), // Displayed price
            get_woocommerce_currency(), // currency
            $search_string
        );

        $button_html = str_replace($search_string, $replace_string, $button_html);
    }
    return $button_html;
}

// The jQuery code that will handle the event getting the required  product data
add_action( 'wp_footer', 'added_to_cart_js_event' );
function added_to_cart_js_event(){
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    (function($){
        $(document.body).on('added_to_cart', function( event, fragments, cart_hash, button ) {
            var product_id    = button.data('product_id'),   // Get the product id
                product_qty   = button.data('quantity'),     // Get the quantity
                product_sku   = button.data('product_sku'),  // Get the product sku
                product_name  = button.data('product_name'), // Get the product name
                product_price = button.data('product_price'), // Get the product price
                currency      = button.data('currency');     // Get the currency

            // For testing: View all product available data on console log (to be removed)
            console.log( button.data() );

            const toast = swal.mixin({
                toast: true,
                showConfirmButton: false,
                timer: 10000
            });
            toast({
                type: 'success',
                title: 'Product "'+product_name+'" added to Cart'
            });
        });
    })(jQuery);
    </script>
    <?php
}

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试并且可以工作。