Magento 2 添加 checkout 步骤

PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！

翻译：https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_new_step.html

• 配送信息
• 核对订单信息和付款信息

第一步：创建下单步骤组件的 view 部分

1. 添加一个模块目录（本篇不包含，详情查看）。搜友的自定义文件应该放在这个目录下。为了自定义的 checkout 能正确应用，你的自定义模块应该依赖 Magento_Checkout 这个模块。不要用 Ui 命名自定义模块，因为 %Vendor%_Ui 符号（在指定路径用的）可能会导致一些问题；
2. 新建 view 模块的js 文件；
3. 新建 component 的 html 文件。

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * mystep - is the name of the component's .html template,
        * _  - is the name of the your module directory.
        *
        */
        return Component.extend({
            defaults: {
                template: '_/mystep'
            },

            //add here your logic to display step,
            isVisible: ko.observable(true),

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'step_code',
                    //step alias
                    null,
                    //step title value
                    'Step Title',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                    * sort order value
                    * 'sort order value' < 10: step displays before shipping step;
                    * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                    * 'sort order value' > 20 : step displays after payment step
                    */
                    15
                );

                return this;
            },

            /**
	    * The navigate() method is responsible for navigation between checkout step
	    * during checkout. You can add custom logic, for example some conditions
	    * for switching to your custom step
	    * When the user navigates to the custom step via url anchor or back button we_must show step manually here
	    */
            navigate: function () {

                this.isVisible(true);
            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    });

添加一个 html template