在 Magento2 结帐中覆盖 js 文件

Question

我尝试覆盖 magento2 结帐中的 js 文件。

我想覆盖/vendor/magento/module-checkout/view/frontend/web/js/view/form/element/email.js 。

所以我将模块中的文件复制到： /app/code/Myself/Test/view/frontend/web/js/view/form/element/email.js

我在/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());
    },

文件的其他部分不变。

然后我创建了/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'
            }
    }
};

在这个requirejs-config.js我不确定路径从哪里开始。 所以我也这样尝试： 'Magento_Checkout/web/js/view/form/element/email.js':'Myself_Test/web/js/view/form/element/email.js' 。

但是覆盖不起作用。 原始 email.js 在结帐中加载。

我确实在更改后运行了setup:upgrade命令，并且我的 Magento2 商店处于开发人员模式，使用 Luma 主题并且只安装了示例数据和我的模块。

Answer 1

我看到您正在向路径添加文件扩展名。 删除它，它应该可以工作。

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

这就是问题的答案。 下面的替代解决方案。

您可以扩展它并只更改其中的一部分，而不是覆盖整个文件。 这样，如果您将更新 Magento 2，并且您修改的其他一些方法将发生变化，您将不需要更新您的自定义文件。

如何扩展javascript文件？ 在这种情况下 uiComponent

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

Answer 2

改变你的路径

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

到

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

然后清除缓存运行内容部署并重试..`

Answer 3

问题出在您用来进行覆盖的路径中。

将文件位置更改为下面给出的路径，它将为您工作。

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

不要忘记刷新缓存。