Magento 2: Add to Cart JS Override works on product page but not on category page

Question

I override magento\vendor\magento\module-catalog\view\frontend\web\js\catalog-add-to-cart.js

as I need to change the text from "Add to Cart" to "Buy Now"

magento\app\code\Custom\Module\view\frontend\requirejs-config.js

var config = {
  "map": {
    "*": {
      "Magento_Catalog/js/catalog-add-to-cart": "Custom_Module/js/catalog-add-to-cart"
    }
  }
};

It works fine on Product Page, but on Category page it still goes to Main File not override file.

Why?

Answer 1

You can override add to cart js via mixin.

1 : In your magento\app\code\Custom\Module\view\frontend\requirejs-config.js

Add following code.

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Custom_Module/js/catalog-add-to-cart-mixin': true
            },
        }
    }
};

2 : Put your add to cart file with named catalog-add-to-cart-mixin.js under app\code\Custom\Module\view\frontend\web\js\

define([
    'jquery',
    'mage/translate',
    'jquery/ui',
], function ($, $t,alert) {
    'use strict';

    return function (widget) {
      console.log('catalog-add-to-cart-mixin');

    $.widget('mage.catalogAddToCart', widget, {

    });

    return $.mage.catalogAddToCart;
  }
});

Answer 2

I had the same issue and I resolved the issue by this code.

1 => In your app\code\Custom\Module\view\frontend\requirejs-config.js

Add following code.

var config = {
    map: {
        '*': {
         'Magento_Catalog/js/catalog-add-to-cart':'Custom_Module/js/catalog-add-to-cart',
         catalogAddToCart:'Custom_Module/js/catalog-add-to-cart'
        }
    }
};

2 => Put your add to cart file in app\code\Custom\Module\view\frontend\web\js path with name catalog-add-to-cart.js

Now you can copy paste the parent file code in the overridden file and make your changes.

Above code will override the file and also replace the parent file

Answer 3

After Following Zed: Further if you want to modify any function you need to add it in side $.wiget block: Like in my case I want to preserve my buttons text to "Pre Order" what I do is:

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function($, $t) {
    "use strict";

    return function (widget) {

        $.widget('mage.catalogAddToCart', widget, {

            disableAddToCartButton: function(form) {
                this.options.addToCartButtonTextDefault = $(form).find(this.options.addToCartButtonSelector).find('span').text();
                this._super(form); // parent call
            }
        });

        return $.mage.catalogAddToCart;
    }
});

You can override function the same way.

Answer 4

Step 1: Lets try rename catalog-add-to-cart from Custom_Module/js/catalog-add-to-cart to Custom_Module/js/catalog-add-to-cartt ( double T )

File magento\app\code\Custom\Module\view\frontend\requirejs-config.js

var config = {


"map": {
"*": {
  "Magento_Catalog/js/catalog-add-to-cart": "Custom_Module/js/catalog-add-to-cartt"
     }
  }
};

Step 2:

/bin/magento setup:static-content:deploy -f

and

/bin/magento c:f`

Step 3:

change catalog-add-to-cartt in requirejs-config.js file to catalog-add-to-cart.

And change name catalog-add-to-cartt.js to catalog-add-to-cart.js

/bin/magento setup:static-content:deploy -f

and

/bin/magento c:f

It's working for me