Magento 2自定义结帐步骤导航

我在magento 2中自定义结帐过程，在Shipping和Payment步骤之间添加一个自定义步骤，并在Shipping步骤中添加一个复选框。

当第一次进入结帐页面时，我的Shipping和Custom步骤都被选中，如图所示。

https://i.stack.imgur.com/JpUR5.jpg

所以有两个问题:

1. 当我第一次进入结帐页面时，我如何才能使只有Shipping步骤可见?
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>

谢谢,

。Martz .

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

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();
            }
        });
    }
);