Magento 2 自定义结帐步骤导航

Question

我正在定制 magento 2 中的结帐流程，方法是在配送和付款步骤之间添加一个自定义步骤，并在配送步骤中添加一个复选框。

问题

当我第一次去结账页面时，我的运输和自定义步骤都被选中，如图所示。

http://imgur.com/yvVhYZZ

所以有两个问题：

1. 如何让我在第一次进入结帐页面时只看到运输步骤？
2. 如果我选择了我在运输步骤中添加的复选框，我该如何做到这一点，我会跳过我的自定义步骤（直接从发货到付款），但如果我不选择复选框，我会转到我的自定义步骤？李>

到目前为止我做了什么

我已经使用 magento 团队在http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html 中提供的文档创建了自定义步骤

这是我的Vendor_CustomCheckout/view/frontend/web/js/view/step-view.js

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/form/form'
],
function (
    ko,
    Component,
_,
stepNavigator
) {
    'use strict';
    /**
     *
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of the your module directory.
     *
     */
    return Component.extend({
        defaults: {
            template: 'Vendor_CustomCheckout/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
                'custom_step',
                //step alias
                null,
                //step title value
                'Direccion de Facturacion',
                //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
         */
        navigate: function () {
            this.isVisible(false);
            this.isVisible = false;
        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customStepForm.data.validate');
            console.dir(this.isVisible);
            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customStepForm');
                // do something with form data
                console.dir(formData);
            }
            stepNavigator.next();
        }
    });
}
);

这是我的Vendor_CustomCheckout/view/frontend/layout/checkout_index_index.xml

<item name="custom-step" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_CustomCheckout/js/view/step-view</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Vendor_CustomCheckout/mystep</item>
    </item>
    <!--To display step content before shipping step "sortOrder" value should be < 1-->
    <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
    <!--To display step content after payment step "sortOrder" > 2 -->
    <item name="sortOrder" xsi:type="string">1.5</item>
    <item name="children" xsi:type="array">
    <!--add here child component declaration for your step-->
        <item name="custom-step-form-fieldset" xsi:type="array">
        <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
            <item name="component" xsi:type="string">uiComponent</item>
            <!-- the following display area is used in template (see below) -->
            <item name="displayArea" xsi:type="string">custom-step-form-fields</item>
            <item name="children" xsi:type="array">
                <item name="name" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                    <item name="config" xsi:type="array">
                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                        <item name="customScope" xsi:type="string">customStepForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customStepForm.name</item>
                    <item name="label" xsi:type="string">Nombre</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>                
        </item>
    </item>
</item>

谢谢，

A.马茨。

Answer 1

我一开始也有同样的问题。原因在于以下几行：

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

如果您将其设置为 true，它将立即显示您的步骤，因此您可以为 true 构建条件或将其设置为 false。有了这个，您的步骤应该只在运输步骤完成后可见。

Answer 2

这是对我们有用的解决方案

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

            //add here your logic to display step,
            // I have given false here so that is will no merge with other step
            // if you make it true sometime happens that is merge with shipping step.
            visible: ko.observable(quote.isVirtual())

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'newcheckoutstep',
                    //step alias
                    null,
                    //step title value
                    'New Checkout Step',
                    //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 
            */
            navigate: function () {
               self.visible(true);
            },

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

这里有更多关于这个解决方案的细节on my own blog