在"added_to_cart"上获取特定的WooCommerce产品数据.javascript事件 [英] Get specific WooCommerce product data on "added_to_cart" javascript event

问题描述

在WooCommerce上，当客户使用Ajax添加到购物车时，我想实现以下事件跟踪脚本:

On WooCommerce, I would like to implement the following event tracking script when customer use the Ajax add to cart:

<script>
bianoTrack('track', 'add_to_cart', {
id: 'PRODUCT-1234',
quantity: 10,
unit_price: 123.45,
currency: 'CZK',
});
</script>

我知道我可以使用"added_to_cart"这样的事件:

I know that I can use "added_to_cart" event this way:

jQuery( 'body' ).on( 'added_to_cart', function( e, fragments, cart_hash, this_button ) {
​
});

但我不知道如何获取产品数据，例如 sku ，数量，价格 ...

But I have no idea how to get the product data like sku, quantity, price…

如何在"added_to_cart"上获取特定的WooCommerce产品数据?javascript事件?

How can I get specific WooCommerce product data on "added_to_cart" javascript event?

推荐答案

首先，并不是所有有关默认WooCommerce added_to_cart Javascript事件的数据都可以，但是您可以在其中添加任意数量的数据.一种自定义的方式.这样就很容易获得这些数据.

First, there is not all required the data on default WooCommerce added_to_cart Javascript event, but you can add as many as you want in a custom way. Then it will be easy to get that data.

这是代码:

// 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 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
            
            
            bianoTrack('track', 'add_to_cart', {
                id: 'PRODUCT-'+product_id,
                quantity: product_qty,
                unit_price: product_price,
                currency: currency,
            });

            // For testing: View all product available data on console log (to be removed)
            console.log( button.data() );
        });
    })(jQuery);
    </script>
    <?php
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

其他一些相关答案:

• Woocommerce:添加到购物车后的自定义jquery事件
• 查看全文