Magento2结账页禁用非指定国家收货地址及Knockout重写方法

需求实现目标 #

在结账的收货地址列表中，仅显示符合以下条件的地址：

• 当店铺ID为4时，仅显示美国（US）地址
• 当店铺ID不为4时，仅显示非美国地址
  不符合条件的地址将不渲染显示，用户无法选择，自然无法继续结账流程。

实现步骤：重写Knockout组件 #

我们需要重写Magento_Checkout/js/view/shipping-address/list核心组件，替换原有地址渲染逻辑：

1. 模块文件结构 #

在自定义模块中创建以下文件：

app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js
app/code/[Vendor]/[Module]/view/frontend/web/js/view/shipping-address/list.js

2. 配置RequireJS映射 #

在requirejs-config.js中添加重写映射：

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/view/shipping-address/list': '[Vendor]_[Module]/js/view/shipping-address/list'
        }
    }
};

3. 重写后的组件代码 #

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'underscore',
    'ko',
    'mageUtils',
    'uiComponent',
    'uiLayout',
    'Magento_Customer/js/model/address-list',
    'Magento_Customer/js/model/customer'
], function (_, ko, utils, Component, layout, addressList, customer) {
    'use strict';

    var defaultRendererTemplate = {
        parent: '${ $.$data.parentName }',
        name: '${ $.$data.name }',
        component: 'Magento_Checkout/js/view/shipping-address/address-renderer/default',
        provider: 'checkoutProvider'
    };

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping-address/list',
            visible: addressList().length > 0,
            rendererTemplates: []
        },

        /** @inheritdoc */
        initialize: function () {
            this._super()
                .initChildren();

            var self = this;
            // 监听地址列表变化，动态处理新添加的地址
            addressList.subscribe(function (changes) {
                changes.forEach(function (change) {
                    if (change.status === 'added') {
                        if (self.shouldRenderAddress(change.value)) {
                            self.createRendererComponent(change.value, change.index);
                        }
                    }
                });
            }, this, 'arrayChange');

            return this;
        },

        /** @inheritdoc */
        initConfig: function () {
            this._super();
            // 初始化地址渲染组件列表
            this.rendererComponents = [];

            return this;
        },

        /** @inheritdoc */
        initChildren: function () {
            var self = this;
            // 遍历现有地址，只渲染符合条件的地址
            _.each(addressList(), function (address, index) {
                if (self.shouldRenderAddress(address)) {
                    self.createRendererComponent(address, index);
                }
            });

            return this;
        },

        /**
         * 判断地址是否需要渲染显示
         * 
         * @param {Object} address 地址对象
         * @returns {boolean} 是否渲染
         */
        shouldRenderAddress: function (address) {
            // 核心条件判断
            if ((address.countryId === 'US' && window.checkout.storeId == 4) ||
                (address.countryId !== 'US' && window.checkout.storeId != 4)) {
                return true;
            }

            // 默认不渲染不符合条件的地址
            return false;
        },

        /**
         * 创建地址渲染组件
         *
         * @param {Object} address 地址对象
         * @param {*} index 地址索引
         */
        createRendererComponent: function (address, index) {
            var rendererTemplate, templateData, rendererComponent;

            // 使用默认地址渲染模板
            rendererTemplate = _.extend({}, defaultRendererTemplate);

            // 填充模板数据
            templateData = {
                parentName: this.name,
                name: index
            };

            // 创建渲染组件
            rendererComponent = utils.template(rendererTemplate, templateData);
            _.extend(rendererComponent, {
                address: ko.observable(address)
            });
            layout([rendererComponent]);
            this.rendererComponents[index] = rendererComponent;
        }
    });
});

代码关键解析 #

• 核心过滤逻辑：shouldRenderAddress方法是核心，根据店铺ID和地址国家ID判断是否渲染地址
• 动态监听地址变化：通过addressList.subscribe监听地址列表的新增操作，确保新添加的地址也会被过滤
• 不渲染而非禁用：直接不渲染不符合条件的地址，完全避免用户看到和选择，比单纯禁用单选按钮更彻底

额外注意事项 #

1. 替换代码中的[Vendor]和[Module]为你的实际模块名称
2. 确保window.checkout.storeId能正确获取到当前店铺ID，若获取方式不同，需调整此处逻辑
3. 部署静态资源：执行bin/magento setup:static-content:deploy命令
4. 清理缓存：执行bin/magento cache:clean和bin/magento cache:flush命令

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