0

When clicking on "Add to Cart", my M2 website loads for 4 seconds and then redirects to the cart. Some visitors tend to click "Add to Cart" again after waiting 2 seconds. This causes the item to be added to the cart multiple times.

I'm looking for a way to automatically disable the "Add to Cart" button after button click, eventually with a loading indicator, so that the visitor knows the page is processing. I don't think this is a default M2 feature. Does anybody know how I can accomplish this?

I've seen a similar question/solution for M1 before (Limiting "Add to cart" to just 1 click / item), but not for M2.

I know I should focus on increasing the load speed. I will. I just really need this as a temporary solution first.

Jason
  • 180
  • 11

1 Answers1

1

By default Magento 2 has this functionality maybe your theme haven't implemented correctly the add to cart in the frontend. here is the addtocart.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var $block \Magento\Catalog\Block\Product\View /
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = ('Add to Cart'); ?>
<?php if ($_product->isSaleable()) :?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()) :?>
        <div class="field qty">
            <label class="label" for="qty"><span><?= $block->escapeHtml(('Qty')) ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       min="0"
                       value="<?= $block->getProductDefaultQty()  1 ?>"
                       title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
                       class="input-text qty"
                       data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
                    class="action primary tocart"
                    id="product-addtocart-button" disabled>
                <span><?= $block->escapeHtml($buttonTitle) ?></span>
            </button>
            <?= $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>

The script part makes the validation

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>
Vyacheslav Shmal
  • 461
  • 3
  • 8
  • Ah, that makes sense. From what I remember, my theme has a custom addtocart.phtml, so they have probably for some reason gotten rid of that validation. I'll confirm tomorrow, thank you so far! – Jason Apr 05 '21 at 12:26
  • Hi once again Vyacheslav. You're completely right. Appears the authors of my theme had forgotten to add it. I've added the validation script and things work great. – Jason Apr 06 '21 at 13:53
  • Glad helping :) – Vyacheslav Shmal Apr 06 '21 at 14:05