Limiting Add to Cart to One Click Per Item in Magento

addtocart

I've noticed that some visitors will click the "Add to cart" button multiple times. This results in the product being added multiple times.

I thought it was my theme, but I've reproduced this on the default Magento theme. Every click until the cart page is recorded, not very good when you have a small window to convince a visitor to buy from you.

enter image description here

How can I limit the "Add to Cart" button to just 1 item on multiple clicks?

EDIT: NEED A TECHNICAL ANSWER / SOLUTION

Best Answer

This is what we do:

When a user clicks 'add to cart' the button is disabled and the box is greyed out. A ' loading.gif ' is displayed onto the page during an Ajax request. When this Ajax request is over the button is re-enabled and the ' loading.gif ' is once again hidden. The cart on the page is then updated and a 'successfully added to cart' message is displayed to the user.

This way the user gets feedback about their actions -- and the consequence of that exact action.

Below is an example of a javascript function that will disable it's own button, display a "loading .gif" for the user, submit the form, and reenable itself once it's execution is complete:

<script type="text/javascript">
    productAddToCartForm.submit = function (button, url) {
                var data = jQuery('#product_addtocart_form').serialize();
                data += '&isAjax=1';

                //this shows a small .gif that tells the user a process is taking place
                jQuery('#ajax_loader').show();

                //this disables the add to cart button
                jQuery('#buttonAddToCart').prop("disabled", true);

                try {
                    jQuery.ajax({
                        url: url,
                        dataType: 'json',
                        type: 'post',
                        data: data,
                        success: function (data) {

                            //this hides the processing .gif
                            jQuery('#ajax_loader').hide();

                            //this removes the 'disable' on the add to cart button
                            jQuery('#buttonAddToCart').prop('disabled', false);
                        }
                    });
                } catch (e) {
                }
                this.form.action = oldUrl;
            }
        }
    }
</script>
Related Topic