Get specific WooCommerce product data on “added_to_cart” javascript event

Question

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>

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 ) {

});

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

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

As a new user you should take the quick tour (1 mn) to see basically how StackOverFlow works. — LoicTheAztec

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-07-07T18:57:29

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.

Here is the code:

// 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
}

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

Some other related answers:

Get specific WooCommerce product data on “added_to_cart” javascript event

1 Answers