Magento 2结账页添加自定义步骤时多步骤同时激活问题

我来帮你搞定这个问题！当购物车是虚拟商品时，配送步骤会被自动隐藏，Checkout的步骤导航器会直接尝试激活下一个可用步骤，而你现在把自定义步骤的isVisible固定设为true，同时支付步骤的显示条件也已满足，自然就会出现两个步骤同时显示的冲突情况。

下面是具体的修复方案，一步一步来：

1. 调整自定义步骤的可见性逻辑 #

我们需要动态控制自定义步骤的显示，不能让它一直处于可见状态，同时还要修复代码里的小bug（比如self未定义的问题）。

修改ST/Employees/view/frontend/web/js/view/login.js的代码如下：

define([
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/quote' // 新增依赖，用来判断商品是否为虚拟类型
], function (ko, Component, _, stepNavigator, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'ST_Employees/login'
        },
        // 把固定的isVisible改成计算属性，动态判断是否显示
        isVisible: ko.computed(function() {
            // 判断购物车所有商品是否都是虚拟商品
            const allVirtual = _.every(quote.getItems(), item => item.product_type === 'virtual');
            // 只有当自定义步骤未处理，且当前激活的不是支付步骤时才显示
            return allVirtual && !stepNavigator.isProcessed('login') && stepNavigator.getActiveStep() !== 'payment';
        }),

        initialize: function () {
            this._super();
            // 注册步骤时，alias不要用null，改成和code一致的'login'，避免状态判断混乱
            stepNavigator.registerStep(
                'login',          
                'login',          
                'Collection Point',
                this.isVisible,
                _.bind(this.navigate, this),
                0                 
            );
            return this;
        },

        // 修复navigate方法里的self未定义问题，改用this（已通过bind绑定上下文）
        navigate: function () {
            this.isVisible(false);
        },

        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
});

2. 关键修复点说明 #

• 新增quote依赖：用来检测购物车商品类型，确保我们的逻辑只在虚拟商品场景下生效。
• 动态计算isVisible：通过计算属性精准控制显示时机——只有当自定义步骤未完成，且当前没在支付步骤时才显示，彻底避免和支付步骤重叠。
• 修正步骤注册的alias参数：原来的null会导致步骤导航器的状态判断异常，改成和code一致的login就能解决这个隐患。
• 修复navigate方法的上下文问题：原来用self但未定义，现在用this（已通过_.bind绑定上下文），能正确隐藏当前步骤。

3. 模板验证 #

别忘了检查你的自定义步骤模板ST_Employees/view/frontend/web/template/login.html，确保正确绑定了isVisible，示例如下：

<div id="checkout-step-login" data-bind="visible: isVisible, stepNavigatorAnchor: 'login'">
    <!-- 这里放置你的自定义步骤内容 -->
    <button type="button" data-bind="click: navigateToNextStep">Continue to Payment</button>
</div>

这样修改之后，当购物车是虚拟商品时，只会先显示你的自定义步骤，点击「Continue to Payment」后才会切换到支付步骤，不会再出现两个步骤同时显示的情况啦！

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