0

Is anyone using Magento 2.4.2 version?.

In list page,list.phtml file Add to Cart button is disabled.

How we can enable the Add to Cart button. Kindly confirm.

Thanks.

7
  • I cannot see this problem on a default Magento 2.4.2 installation. Can you provide more information, Have you upgraded to 2.4.2 or is it a new installation? Are you using a custom theme? Have you checked your log files for errors? – paj Feb 25 at 12:56
  • I have upgraded 2.3.4 to 2.4.2 . Yes am using custom theme. If am opening the venodr/magento/module-catalog/product/list.phtml file .there <button type="submit" title="Add to Cart" class="action tocart primary" disabled> <span>Add to Cart</span> </button> – Priya Feb 25 at 13:37
  • 1
    @priya in your custom theme you overwrite catalog-add-to-cart.js? if yes then compare default js file. Magento 2.4.2 added "$(this.options.addToCartButtonSelector).attr('disabled', false);" in _create function. – Jigar Patel Feb 27 at 6:31
  • Can confirm we have the same issue regardless of theme selected on our Magento ver. 2.4.2 store – freestate Mar 12 at 17:27
  • Check if the products are not OUT OF STOCK – M Shoaib Qureshi Mar 15 at 6:52
2
+50

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/web/js/catalog-add-to-cart.js

in _create function

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

You need to debug if it is overridden in custom theme or in any third party plugin you are using, because it works as expected on fresh Magento 2.4.2 installation. This change is added in Magento 2.4.2, it wasn't there in Magento 2.4.1.

2
  • Weird thing is the same behaviour is observed on the product page, but the button successfully enables on those pages – freestate Mar 18 at 13:10
  • 1
    Yes, because different js is responsible to enable button on product page which is located at vendor/magento/module-catalog/view/frontend/web/js/validate-product.js _create function. – Rahul Barot Mar 18 at 13:48
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
0

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

Just upgraded from 2.4.1 to 2.4.2, got the same problem. The "add to cart" is grey in the product listing page. I have a very simple theme installed, no 3rd party addons. Even if changed back to original Luma theme, still same problem.

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.