Question

在结算步骤和付款步骤之间创建了一个结帐步骤

但是当我显示结帐时，步骤1和步骤2在同一视图中是可见的，我怎样才能让它先显示第1步和第2步？

我正在使用Magento 2.1。

这是我的代码：

布局/ checkout_index_index.xml

to_datetime

网/ JS /视图/ contacts.js

    <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>

网/ JS /模板/ html.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());
            }
        });
    }
);

截图：

Checkout

Answer 1

解决！

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

isVisible: ko.observable(true)

为此：

isVisible: ko.observable(false)

结帐步骤混合

1 个答案: