Override js file in the Magento2 checkout

Question

I try to override a js file in the magento2 checkout.

I want to override /vendor/magento/module-checkout/view/frontend/web/js/view/form/element/email.js .

So I copied the file in my module to: /app/code/Myself/Test/view/frontend/web/js/view/form/element/email.js

I did a small change in /app/code/Myself/Test/view/frontend/web/js/view/form/element/email.js :

        /**
     * Callback on changing email property
     */
    emailHasChanged: function () {
        var self = this;

        clearTimeout(this.emailCheckTimeout);

        if (self.validateEmail()) {
            quote.guestEmail = self.email();
            checkoutData.setValidatedEmailValue(self.email());
            $.cookie("checkoutemail", self.email()); // <--- this is the change
        }
        this.emailCheckTimeout = setTimeout(function () {
            if (self.validateEmail()) {
                self.checkEmailAvailability();
            } else {
                self.isPasswordVisible(false);
            }
        }, self.checkDelay);

        checkoutData.setInputFieldEmailValue(self.email());
    },

The other parts of the file are unchanged.

Then I created the /app/code/Myself/Test/view/frontend/requirejs-config.js :

var config = {
    map: {
        '*':
            {
                'Magento_Checkout/js/view/form/element/email.js':'Myself_Test/js/view/form/element/email.js'
            }
    }
};

In this requirejs-config.js I'm not sure, where the paths begin. So I also tried it like this: 'Magento_Checkout/web/js/view/form/element/email.js':'Myself_Test/web/js/view/form/element/email.js' .

But the override don't work. The original email.js is loaded in the checkout.

I did run the setup:upgrade command after changes and my Magento2 Shop is in developer mode, uses the Luma Theme and has only the example data and my Module installed.

Answer 1

I see you are adding file extension to the path. Remove it and it should work.

var config = {
  map: {
    '*': {                   
      'Magento_Checkout/js/view/form/element/email': 'Myself_Test/js/view/form/element/email'
     }
  }
};

This was the answer for the question. Below alternative solution.

Instead of overriding whole file you can extend it and just change part of it. This way if you will update Magento 2 and there will be change in some other methods that the one you modified you won't need to update your custom file.

How to extend javascript files? In this case uiComponent

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html#examples

Answer 2

Change your path from

/app/code/Myself/Test/web/js/view/form/element/email.js

to

/app/code/Myself/Test/view/frontend/web/js/view/form/element/email.js

Then clear cache run content deploy and try again.. `

Answer 3

The issue is in the path you are using to do the override.

Change the file location to the path given below and it will work for you.

/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js

Don't forget to flush the cache.