How To Get WooCommerce Product Data with Jquery?

Forums WoocommerceHow To Get WooCommerce Product Data with Jquery?
Staff asked 3 years ago

Answers (1)

Add Answer
Het Patel Marked As Accepted
Staff answered 3 years ago
// 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
}

Subscribe

Select Categories