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

  • has this been resolved? – easymoden00b Mar 9 '15 at 14:52
  • nope, still waiting for a technical answer that clearly outlines a solution - thanks for the follow-up :) – SR_Magento Mar 9 '15 at 19:34
  • What's wrong with disabling the button and reenabling after the request is complete using JS? – easymoden00b Mar 9 '15 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 '15 at 19:38
  • take a look to my Q. – easymoden00b Mar 9 '15 at 19:58
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.

  • Mind elaborating a little bit? – SR_Magento Jan 22 '15 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. – DmitryR Jan 22 '15 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>

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.