1

In Magento 2.4.2 "Add to Cart" button is disabled in template and is being enabled using js post initialization

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

<button type="submit" 
    title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>" 
    class="action tocart primary" 
    disabled>
    <span><?= $escaper->escapeHtml(__('Add to Cart')) ?></span>
</button>

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

_create: function () {
    if (this.options.bindSubmit) {
        this._bindSubmit();
    }
    $(this.options.addToCartButtonSelector).attr('disabled', false);
}

Can anyone help me with reason behind this approach? It wasn't there in Magento 2.4.1. Thanks in advance.

1
  • here is the commit with the change to the product list template and js. Issue was MC-36548: Invalid Form Key error when adding to cart before page full… github.com/magento/magento2/commit/…
    – paj
    Mar 15, 2021 at 11:21

2 Answers 2

1

It appears there was an issue with invalid form key errors when add to cart was clicked before the page was fully loaded.

The change ensures that the add to cart button is enabled only when the page is fully loaded and catalog-add-to-cart.js has been processed.

The commit from August 2020 can be seen here https://github.com/magento/magento2/commit/95859dc036a6076423f30409f224a6b5d6f5ac84

This change will cause problems if you are extending catalog-add-to-cart.js in your custom theme or modules. You should update your custom/extended js to activate the add to cart button.

$(this.options.addToCartButtonSelector).attr('disabled', false);
0

Go to this file path

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Click ctrl+F and search for action tocart primary

<button type="submit" title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"class="action tocart primary">
<span><?= $escaper->escapeHtml(__('Add to Cart')) ?>
</span></button>

Just replace button tag with this code and run (As you mentioned in comments disabled is there just remove or replace the button tag with above code)

For ubuntu

sudo rm -rf generated/* var/* && sudo bin/magento cache:flush

For windows

rm -rf generated/* var/* && php bin/magento cache:flush
1
  • There is a reason why they have changed this in 2.4.2 - probably best not to simply change the button...
    – paj
    Mar 15, 2021 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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