如何修改Magento 2.2自定义配送模块中结账地址邮编字段的事件？

我之前也碰到过类似的场景——把邮编改成自动完成后，默认的输入事件会频繁触发配送方式估算请求，打断用户的自动选择流程。下面是两种实用的解决方案，你可以根据自己的自动完成组件情况来选：

方法1：修改UI组件的事件触发时机（最简单） #

Magento地址表单的字段默认通过updateOn属性指定触发数据更新的事件，邮编字段默认是keyup（输入时就触发）。你可以通过自定义模块修改这个配置，改成仅在用户确认输入后才触发请求：

1. 在你的自定义模块中创建view/frontend/ui_component/checkout_index_index.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="shipping-address-fieldset">
        <field name="postcode">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <!-- 改成change事件：字段值改变且失去焦点时触发 -->
                    <item name="updateOn" xsi:type="string">change</item>
                    <!-- 或者改成blur：仅当字段失去焦点时触发 -->
                    <!-- <item name="updateOn" xsi:type="string">blur</item> -->
                </item>
            </argument>
        </field>
    </fieldset>
</form>

2. 清理缓存并刷新页面：

bin/magento cache:clean
bin/magento setup:static-content:deploy -f

如果你的自动完成组件在选中选项时会触发change事件，这个方法就能完美解决问题——只有用户选好邮编后才会发起配送请求。

方法2：手动控制事件触发（更灵活，适配自定义组件） #

如果你的自动完成组件有自定义的选中事件，或者需要更精细的控制逻辑，可以通过扩展JS来阻止默认事件，只在用户选中自动建议后手动触发请求：

步骤1：创建自定义JS处理器 #

在app/code/YourVendor/YourModule/view/frontend/web/js/shipping-postcode-handler.js中添加代码：

define([
    'jquery',
    'Magento_Checkout/js/model/shipping-rate-processor/new-address',
    'Magento_Checkout/js/model/shipping-rate-registry'
], function ($, shippingRateProcessor, shippingRateRegistry) {
    'use strict';

    return function () {
        // 阻止邮编字段的keyup事件触发默认配送请求
        $('body').on('keyup', 'input[name="postcode"]', function (e) {
            // 仅当用户还未选中自动完成项时阻止
            if (!$(this).data('autocompleted')) {
                e.stopImmediatePropagation();
            }
        });

        // 监听自动完成组件的选中事件（请替换成你组件实际触发的事件，比如select、chosen等）
        $('body').on('autocompleteselect', 'input[name="postcode"]', function (event, ui) {
            // 标记已完成自动选择
            $(this).data('autocompleted', true);
            
            // 获取当前购物车ID（兼容访客和登录用户）
            const cartId = window.checkoutConfig.cartId;
            // 序列化当前配送地址表单数据
            const addressFormData = $('form[data-role="shipping-address-form"]').serializeArray();
            const address = {};
            
            $.each(addressFormData, (index, field) => {
                address[field.name] = field.value;
            });

            // 手动触发配送方式估算请求
            shippingRateProcessor.getRates(cartId, address);

            // 重置标记，以便下次输入时继续阻止默认事件
            setTimeout(() => {
                $(this).data('autocompleted', false);
            }, 100);
        });
    };
});

步骤2：在结账页面加载这个JS #

创建app/code/YourVendor/YourModule/view/frontend/layout/checkout_index_index.xml：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="shipping.postcode.handler" template="YourVendor_YourModule::js.phtml"/>
        </referenceContainer>
    </body>
</page>

步骤3：创建模板文件加载JS #

创建app/code/YourVendor/YourModule/view/frontend/templates/js.phtml：

<script type="text/x-magento-init">
{
    "*": {
        "YourVendor_YourModule/js/shipping-postcode-handler": {}
    }
}
</script>

步骤4：清理缓存测试 #

执行命令清理缓存后刷新页面，现在用户输入邮编时不会触发请求，只有选中自动建议项时才会发起配送方式估算。

注意事项 #

• 请根据你使用的自动完成组件，替换代码中的autocompleteselect事件为组件实际触发的事件名称。
• 确保自定义模块的命名空间、路径与代码中的一致，并且已正确启用。

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