how to override magento customer module JS files in magento 2

Question

I need to override the following file

vendor/magento/module-customer/view/frontend/web/js/model/customer-addresses.js

define([
    'jquery',
    'ko',
    './customer/address'
], function ($, ko, Address) {
    'use strict';
var isLoggedIn = ko.observable(window.isCustomerLoggedIn);

return {
    /**
     * @return {Array}
     */
    getAddressItems: function () {
        var items = [],
            customerData = window.customerData;

if (isLoggedIn()) {
            if (Object.keys(customerData).length) {
                $.each(customerData.addresses, function (key, item) {
                     items.push(new Address(item));
                });
            }
        }

return items;
    }
};
});

I need to replace items.push(new Address(item)); with

if (item.region.region_code.toLowerCase() === window.getStoreName.toLowerCase()){
 items.push(new Address(item));
}

That's to fetch customer addresses based on current store in checkout page.

Ezequiel Alba · Answer

First of all, you are not looking to override a Core JavaScript file from Magento. You are trying to override a JavaScript file from a Module, in specific, Customer Module from Vendor. The methodology is the same as any other frontend inheritance from the Magento 2 Development process.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/templates/template-override.html

For JS files within KO file structure, is the same way. If you keep the path but within your same frontend/theme, you are going to be fine. Re-deploy and your file should be there.

PS. The conditional you are trying to put there seems kind of a weird, not the best, fix. But if you are looking for a hotfix, that's ok.

Dhiren Vasoya · Answer

To overide that file you need to do this things.

create requirejs-config.js at following location.

appcodeVendorExtensionviewfrontendrequirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Customer/js/model/customer-addresses.js':
                'Vendor_Extension/js/model/customer-addresses.js'
        },

}
};

Now copy this file

'Magento_Customer/js/model/customer-addresses.js':

at following location.

'Vendor_Extension/view/frontend/web/js/model/customer-addresses.js'

and now change it according to your requirement.

Anas Mansuri · Answer

Please check with below method to override core js file.

Step 1: Create a RequireJS configuration file requirejs-config.js

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};

Where the following notation is used:

: the name of the default component you replace

: the name of the custom component

Example, if you want to use custom navigation-menu.js script instead of the default menu widgets, your requirejs-config.js should contain the following:

var config = {
  "map": {
    "*": {
      "menu": "/js/navigation-menu",
      "mage/backend/menu": "js/navigation-menu",
    }
  }
};

Step 2:

Place your requirejs-config.js file in one of the following directories (it depends on the location of your custom script):

Your theme files: Your module view files: <module_dir>/view/frontend</code> The 2 steps I mention above is the shortest process for you to Override Magento JS Core in Magento 2. With this guide, you can manage the Magento JS Core in Magento 2 easily.

https://www.magestore.com/magento-2-tutorial/how-to-override-magento-js-core-in-magento-2/

how to override magento customer module JS files in magento 2

3 Answers

Add your own answers!

Ask a Question