在 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

不要忘記刷新緩存。