4

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?

  • Did you change in templates also? – Khoa TruongDinh Mar 9 '17 at 13:31
  • Yes I have applied changes in Templates as well @KhoaTruongDinh – Ankit Shah Mar 10 '17 at 1:22
  • @AnkitShah Same issue i have found. Is there any solution you have found? – Irfan Momin Oct 9 '17 at 4:03
  • @AnkitShah Please check my answer. I had the same issue and I've resolved that. – Bhavin Shah Jun 14 '18 at 7:08
3

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

2

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;
  }
});
  • actually good answer! I will add one more answer for those who unable to get hint from above answer to override function. – Hassan Ali Shahzad Dec 4 '18 at 8:27
1

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.

0

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

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.