Replace "added to cart" notice with JS Sweet Alert on WooCommerce

Question

I've removed the standard "Added to cart" message given by WooCommerce. I have then added the code below which is using the Sweet Alert. The idea is to remove all "added to cart" messages and to only use the sweet alert.

Based on "JS alert on ajax add to cart for specific product category count in Woocommerce" answer code by @LoicTheAztec, my code works for the first product added, but not for the following ones. So it works fine when the cart is empty and when adding the first product.

Here's the code I'm using:

// remove add to cart woocommerce message
add_filter('wc_add_to_cart_message_html', '__return_null');

// Wordpress Ajax PHP
add_action('wp_ajax_nopriv_checking_items', 'atc_sweet_message');
add_action('wp_ajax_checking_items', 'atc_sweet_message');

function atc_sweet_message() {
    if (isset($_POST['id']) && $_POST['id'] > 0) {
        $count = 0;
        $product_id = $_POST['id'];
        foreach(WC()-> cart-> get_cart() as $cart_item) {
            $count += $cart_item['quantity'];
        }
    }
    echo $count;
    die();
}

// jQuery Ajax
add_action('wp_footer', 'item_count_check');
function item_count_check() {
    if (is_checkout())
        return; 
    ?> 
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    jQuery( function($) {
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) {
            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    'action': 'checking_items',
                    'id'    : $button.data( 'product_id' )
                },
                success: function (response) {
                    if(response == 1 ){
                        const toast = swal.mixin({
                            toast: true,
                            showConfirmButton: false,
                            timer: 3000
                        });
                        toast({
                            type: 'success',
                            title: 'Product Added To Cart'
                        })
                    }
                }
            });
        });
    });
    </script>
    <?php
}

I tried removing if(response == 1 ){ without success. Any input on this is appreciated.

Answer 1

There was little mistakes in your code on the function for Wordpress Ajax PHP. Try the following:

// remove add to cart woocommerce message
add_filter('wc_add_to_cart_message_html', '__return_null');

// Wordpress Ajax PHP
add_action('wp_ajax_nopriv_item_added', 'addedtocart_sweet_message');
add_action('wp_ajax_item_added', 'addedtocart_sweet_message');
function addedtocart_sweet_message() {
    echo isset($_POST['id']) && $_POST['id'] > 0 ? (int) esc_attr($_POST['id']) : false;
    die();
}

// jQuery Ajax
add_action('wp_footer', 'item_count_check');
function item_count_check() {
    if (is_checkout())
        return;
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    jQuery( function($) {
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) {
            var $pid = $button.data('product_id');

            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    'action': 'item_added',
                    'id'    : $pid
                },
                success: function (response) {
                    if(response == $pid){
                        const toast = swal.mixin({
                            toast: true,
                            showConfirmButton: false,
                            timer: 3000
                        });
                        toast({
                            type: 'success',
                            title: 'Product Added To Cart'
                        })
                    }
                }
            });
        });
    });
    </script>
    <?php
}

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

It works now for all ajax added to cart items (and not just the first one).