Magento Question posted in
The official documentation can be found here.

Override js file in the Magento2 checkout

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.

Tags:

3

Answers


  1. 0

    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..
    `

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search