结帐步骤混合

Question

我根据 magento 文档在发货步骤和付款步骤之间创建了结帐步骤 Add a new checkout step

但是当我显示结帐时，步骤 1 和步骤 2 在同一视图中可见，如何才能使其先显示步骤 1，然后显示步骤 2？

我正在使用 Magento 2.1。

这是我的代码：

layout/checkout_index_index.xml

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <!-- The new step you add -->
                                            <item name="contacts" xsi:type="array">
                                                <item name="component" xsi:type="string">CloudMobile_Contacts/js/view/contacts</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">2</item>-->
                                                <item name="children" xsi:type="array">
                                                    <!--add here child component declaration for your step-->
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

web/js/view/contacts.js

    define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer',
        'jquery'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer,
        $
    ) {
        '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: 'CloudMobile_Contacts/contacts'
            },

            //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
                    'contacts',
                    //step alias
                    null,
                    //step title value
                    'Contacto',
                    //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
                );
                this.getContacts(this);
                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 () {

            },

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

            /**
             * Obtiene la lista de contactos relacionados a la cuenta
             * @param {Object} scope 
             * @returns void
             */
            getContacts: function(scope){
                var url = 'some_url';
                $.ajax({
                    url: url,
                    type: 'GET',
                    crossDomain: true,
                    jsonpCallback: 'jsonCallback',
                    dataType: 'jsonp',
                    data: {
                        accountnum: customer.customerData.custom_attributes.sfdc_id.value
                    }
                })
                .success(function(response){
                    scope.contacts = response;
                });
            },
            /**
             * Guarda en la orden al contacto que realizó el pedido
             * @param void 
             * @returns void
             */
            saveContact: function(){
                console.log($('select#contact').val());
            }
        });
    }
);

web/js/template/html.js

<li id="contacts" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Contacto'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <select name="contacto" id="contact">
                <!-- ko foreach: contacts -->
                    <option data-bind="value: Id,
                                       text: Name"></option>
                <!-- /ko -->
            </select>
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

截图：

Checkout

Answer 1

已解决！

为了避免混合步骤视图，我只是更改了这个：

isVisible: ko.observable(true)

为此：

isVisible: ko.observable(false)

结帐步骤混合

Checkout Steps Mixed

magento2