CODEWITHSUNDEEP
javascriptjquerywordpresswoocommerce
Brett
Brett

Reputation: 20079

Disabling WooCommerce add to cart button after first click prevents submit

I'm trying to disable the WooCommerce Add to cart button when the user clicks it for two reasons..

I used this code:

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    /* Disable button on add to bag click if button is active */

    add_cart_button.on('click', function(e) {

        if (!$(this).hasClass('disabled')) {
            $(this).prop('disabled', true); // Prevent multi adds
            $(this).addClass('disabled');
        }

    });

}

Whilst this works, it also seems to disable the button even working, the adding of the product doesn't work as the form submit seems to not fire at all.

Why is this happening and what do I need to change here?

Upvotes: 2

Views: 1448

Answers (2)

bluish
bluish

Reputation: 27390

Brett's solution was not enough, so I found another way:

var atc_button = $("button.single_add_to_cart_button");

//prevent multiple clicks on add-to-cart
$("form.cart").submit(function() {
    //disable subsequent submits
    $(this).submit(function() {
        return false;
    });
    //show button as disabled
    if (!atc_button.hasClass('disabled')) {
        atc_button.addClass('disabled');
    }
    return true;
});

Upvotes: 0

Brett
Brett

Reputation: 20079

Fixed it by doing it with the submit event instead...

Since the form doesn't have a name attribute I had to target it another way:

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    add_cart_button.closest('form').on('submit', function(e) {

        var cur_atc_button = $(this).find('.single_add_to_cart_button');

        if (!cur_atc_button.hasClass('disabled')) {
            cur_atc_button.addClass('disabled');
        }

    });

}

Edit: I removed the below disabling of the button (using addClass instead) as it seems for some item types it failed to add the item to the cart if you did this:

cur_atc_button.prop('disabled', true); // Prevent multi adds

If anyone knows why, please let me know.

Upvotes: 2

Related Questions