Get product properties on "added_to_cart" JS events on WooCommerce single product page

Question

I am learning how to use the 'added_to_cart' javascript event so that I can display added product information through javascript alert (e.g. SweetAlert2).

I am using Get specific WooCommerce product data on "added_to_cart" javascript event answer code (just removed from jQuery the bianoTrack() function) in my WooCommerce test website, setup with 3 products (i.e. 2 simple and 1 variation).

In my Chrome developer JS console, here is what I get:

I don't see any product information.

Does anyone know why the 'added_to_cart' javascript event is not able to pickup the product information?

I have enabled AJAX for Add to Cart button.

Answer 1

This is not for single product page normal add to cart. It's for Ajax add to cart on product loops as shop pages, archive pages, related products…

Note that products added via Ajax add to cart doesn't reload the page.

The code still works perfectly on last WooCommerce version:

Here is an example with a "Sweet Alert 2" displaying the product name on ajax add to cart:

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

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