如何使用Mixin重写Magento的postcodeValidation函数？

AI 小北

2026-8-21

问题

需要重写Magento中vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rates-validator.js文件内的postcodeValidation函数，已创建Mixin但不清楚修改方式，希望不通过CSV文件修改验证提示信息。当前Mixin代码如下：

define(['mage/utils/wrapper', 'mage/translate', 'jquery'],function (wrapper, $t, $){
    'use strict';

    return function (target) {

        var postcodeValidation = wrapper.wrap(target.postcodeValidation, function(originalFunction, config, element){
            originalFunction();
            warnMessage = $t('test');
        });

        target.postcodeValidation = postcodeValidation;

        return target;
    };
});

代码无法运行，提示warnMessage未定义，询问是否需要复制整个原函数。

解决方案

报错原因
warnMessage是原postcodeValidation函数内部的局部变量，外部Mixin无法直接访问和修改该变量，因此会抛出未定义的错误。
无需复制整个原函数
借助mage/utils/wrapper的wrap方法，我们可以在保留原函数逻辑的基础上，拦截并修改其返回结果，不需要复制原函数的全部代码。
正确的Mixin实现代码

define(['mage/utils/wrapper', 'mage/translate', 'jquery'], function (wrapper, $t, $) {
    'use strict';

    return function (target) {
        target.postcodeValidation = wrapper.wrap(target.postcodeValidation, function (originalFunction, config, element) {
            // 调用原函数并获取完整验证结果
            var validationResult = originalFunction(config, element);
            
            // 检查结果对象是否包含提示信息，替换为自定义文本
            if (validationResult && validationResult.message) {
                validationResult.message = $t('你的自定义邮政编码验证提示');
            }
            
            return validationResult;
        });

        return target;
    };
});

关键细节说明

调用originalFunction时必须传入config和element参数，否则原函数无法正常执行验证逻辑
原postcodeValidation函数会返回一个包含验证状态（isValid）和提示信息（message）的对象，我们直接修改该对象的message字段即可
用$t()包裹自定义文本，确保翻译机制正常生效，同时无需依赖CSV翻译文件

内容的提问来源于stack exchange，提问作者theunkownm2dev