4

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

5
  • has this been resolved? Mar 9, 2015 at 14:52
  • nope, still waiting for a technical answer that clearly outlines a solution - thanks for the follow-up :)
    – SR_Magento
    Mar 9, 2015 at 19:34
  • What's wrong with disabling the button and reenabling after the request is complete using JS? Mar 9, 2015 at 19:36
  • Nothing, but it's not a technical answer that will help others, it is a theoretical with no example. I could answer many questions with theory.
    – SR_Magento
    Mar 9, 2015 at 19:38
  • take a look to my Q. Mar 9, 2015 at 19:58

3 Answers 3

6

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>
2

As an option, you can disable add to cart button after first click with JavaScript.

2
  • Mind elaborating a little bit?
    – SR_Magento
    Jan 22, 2015 at 13:48
  • If you're having 'Add to cart' buttons which are represented by such kind of code: <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://... -removed-');"><span><span>Add to Cart</span></span></button>, you can add 'this.disabled=true' right after 'setLocation(...);'. This should be enough to prevent addtional clicks.
    – Dmytro
    Jan 22, 2015 at 16:03
0

found this online.

<script type="text/javascript">
        //<![CDATA[
            var productAddToCartForm = new VarienForm('product_addtocart_form');
            productAddToCartForm.submit = function(button, url) {
                if (this.validator.validate()) {
                    var form = this.form;
                    var oldUrl = form.action;

                    if (url) {
                       form.action = url;
                    }
                    var e = null;
                    try {
                        this.form.submit();
                    } catch (e) {
                    }
                    this.form.action = oldUrl;
                    if (e) {
                        throw e;
                    }

                    if (button && button != 'undefined') {
                        button.disabled = true;
                    }
                }
            }.bind(productAddToCartForm);

            productAddToCartForm.submitLight = function(button, url){
                if(this.validator) {
                    var nv = Validation.methods;
                    delete Validation.methods['required-entry'];
                    delete Validation.methods['validate-one-required'];
                    delete Validation.methods['validate-one-required-by-name'];
                    // Remove custom datetime validators
                    for (var methodName in Validation.methods) {
                        if (methodName.match(/^validate-datetime-.*/i)) {
                            delete Validation.methods[methodName];
                        }
                    }

                    if (this.validator.validate()) {
                        if (url) {
                            this.form.action = url;
                        }
                        this.form.submit();
                    }
                    Object.extend(Validation.methods, nv);
                }
            }.bind(productAddToCartForm);
        //]]>
        </script>

then on html, adjust button tag to look like this:

 <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.