php - Get product id, name and quantity on WooCommerce Ajax added to cart to display a notice ← (PHP, JavaScript, JQuery)

Browsed a load of similar questions with no success so far.

I want to display a WC notice naming the last item added to the cart on a regular page.

Notification is up and running, however, so far I was not able to identify the ID of last item added to the cart.

I've tried this

    $items = WC()->cart->get_cart();
    $ids = array();
    foreach($items as $item => $values) {
        $_product = $values['data']->post;
        $ids[] = $_product->ID;
    }
    $last_product_id = end($ids);
    $added_product = wc_get_product( $last_product_id );
    $added_product_name = $added_product->get_title();

But as I've learned cart content does not get updated during AJAX calls. The easiest way to obtain the product ID should be the AJAX parameter containing it, but it cannot be read via $_GET.

Does anyone know of a way to retrieve the product ID of the last item added via WC hook/jQuery?

Solution:

For Ajax added_to_cart delegated event.

Using jQuery you can get easily the product ID, the product name, and the quantity of a product that has been added to cart with Ajax.

Here in this code example using Sweet Alert component (SWAL 2), when a product is added to cart, we display a message lightbox, with the product name (and its ID):

// Add the product name as data argument to Ajax add to cart buttons
add_filter( "woocommerce_loop_add_to_cart_args", "filter_wc_loop_add_to_cart_args", 20, 2 );
function filter_wc_loop_add_to_cart_args( $args, $product ) {
    if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) {
        $args['attributes']['data-product_name'] = $product->get_name();
    }
    return $args;
}

// On Ajax added to cart, shows a lightbox with the product name (and the product id)
add_action( 'wp_footer', 'ajax_added_to_cart_popup_script' );
function ajax_added_to_cart_popup_script() {
    ?>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <script type="text/javascript">
    jQuery( function($){
        // On "added_to_cart" live event
        $(document.body).on('added_to_cart', function( a, b, c, d ) {
            var prod_id   = d.data('product_id'), // Get the product name
                prod_qty  = d.data('quantity'), // Get the quantity
                prod_name = d.data('product_name'); // Get the product name

            Swal.fire({
                title: '<?php _e("Added to cart!"); ?>',
                text: prod_name+' ('+prod_id+')',
                showCancelButton: true,
                confirmButtonColor: '#000',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '<?php _e("View-cart"); ?>',
                cancelButtonText:  '<?php _e("Continue shopping"); ?>'
            }).then((result) => {
                if (result.value) {
                    window.location.href = '<?php echo wc_get_cart_url(); ?>';
                }
            });
        });
    });
    </script>
    <?php
}

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

• Display a sweet alert on ajax add to cart for a specific Woocommerce cart item count
• Woocommerce: custom jquery event after added to cart