javascript - Magento 2 自定义结账步骤导航

Question

我通过在发货和付款步骤之间添加自定义步骤以及在发货步骤中添加复选框来自定​​义 magento 2 中的结账流程。

问题

第一次进入结账页面时，我的“运输”和“自定义”步骤均被选中，如图所示。

/image/JpUR5.jpg

所以有两个问题:

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。这样，您的步骤仅在运输步骤完成后才可见。