Magento2淘汰赛呈现特定的孩子

时间:2016-11-28 15:13:02

标签: php magento knockout.js magento2 magento-2.0

我需要帮助我在magento2上工作的自定义结帐流程。我在文件magento / module-checkout / view / frontend / web / template / shipping-address / form.html(Magento 2.1.1)中找到了此代码。

<!-- ko foreach: getRegion('additional-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

据我了解,这将在结账时回应整个表格。 firstname,lastname等单个字段在checkout_index_index.xml中没有定义,我也不知道getTemplate()的含义。我认为它基本上意味着渲染所有孩子,但他们不在xml中。我想要格式化表单,例如地址在顶部,名字第二等等。但我也想做其他更改,所以问题是

如何从当前范围渲染特定子项?

我可以这样做:

<!-- ko foreach: getRegion('additional-fieldsets.address') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('additional-fieldsets.firstname') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

?谢谢。

另一个例子是文件/view/frontend/web/template/onepage.html

<div class="opc-wrapper">
    <ol class="opc" id="checkoutSteps">
        <!-- ko foreach: getRegion('steps') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </ol>
 </div>

我想做的是:

<div class="opc-wrapper">
    <ol class="opc" id="checkoutSteps">
        <li>
            <!-- ko foreach: getRegion('steps.column1') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
        <li>
            <!-- ko foreach: getRegion('steps.column2') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
        <li>
            <!-- ko foreach: getRegion('steps.column3') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
    </ol>
</div>

P.S。:我发现附加字段集不在项目名称=&#34;&#34;中,而是在displayArea中。 displayArea在这里意味着什么?

4 个答案:

答案 0 :(得分:5)

要渲染特定的孩子,请使用

<!-- ko with: getChild('my-child') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

答案 1 :(得分:0)

据我了解, displayArea 表示属性值将通过 getRegion()

来识别 getRegion()网页模板中的渲染区域

例如: 在行动布局

<item name="displayArea" xsi:type="string">flightdetails-checkout-form-fields</item>
网页模板中的

<!--<legend data-bind="i18n: 'Flight Details Form'"></legend>-->
            <!-- ko foreach: getRegion('flightdetails-checkout-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->

我正在尝试使用新表单字段向自动结帐流程添加自定义步骤和表单。到目前为止我发现的是,

1)在模块操作布局文件中,您可以定义表单元素 \应用\代码\ Ds的\结帐\视图\前端\布局\ checkout_index_index.xml

2)在你的模块中敲除js文件处理数据保存等 \应用\代码\ Ds的\结帐\视图\前端\网络\ JS \视图\结帐飞行details.js

3)在您的模块Web模板中,使用knockout js渲染动作布局定义的元素项 \应用\代码\ Ds的\结帐\视图\前端\网络\模板\结帐飞行details.html

<强> 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">
                                    <!-- Add checkout-flight-details step -->
                                    <item name="flight-details-step" xsi:type="array">
                                        <item name="component" xsi:type="string">Ds_checkout/js/view/checkout-flight-details</item>
                                        <item name="sortOrder" xsi:type="string">1</item>
                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                        <item name="config" xsi:type="array">
                                            <item name="template" xsi:type="string">Ds_Checkout/checkout-flight-details</item>
                                        </item>
                                        <!-- add child component declaration for flight details step -->
                                        <item name="children" xsi:type="array">
                                            <item name="flightdetails-checkout-form-fields" 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">flightdetails-checkout-form-fields</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="arrival_flight_no" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.arrival_flight_no</item>
                                                        <item name="label" xsi:type="string">Arrival Flight No:</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 name="origin_city" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.origin_city</item>
                                                        <item name="label" xsi:type="string">City (Origin):</item>
                                                        <item name="sortOrder" xsi:type="string">2</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                    </item>
                                                    <item name="arrival_in" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</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">flightdetailsCheckoutForm</item>
                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                        </item>
                                                        <item name="options" xsi:type="array">
                                                            <item name="0" xsi:type="array">
                                                                <item name="label" xsi:type="string">Dubai International / DXB</item>
                                                                <item name="value" xsi:type="string">dxb</item>
                                                            </item>
                                                        </item>
                                                        <!-- value element allows to specify default value of the form field -->
                                                        <item name="value" xsi:type="string">dxb</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        <item name="dataScope" xsi:type="string">flightdetailsCheckoutForm.arrival_in</item>
                                                        <item name="label" xsi:type="string">Arrival In:</item>
                                                        <item name="sortOrder" xsi:type="string">3</item>
                                                    </item>
                                                    <item name="arrival_date" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</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">flightdetailsCheckoutForm</item>
                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
                                                        </item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        <item name="dataScope" xsi:type="string">flightdetailsCheckoutForm.arrival_date</item>
                                                        <item name="label" xsi:type="string">Arrival Date:</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                        <item name="sortOrder" xsi:type="string">4</item>
                                                    </item>
                                                    <item name="arrival_time" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.arrival_time</item>
                                                        <item name="label" xsi:type="string">Arrival Time (24H Format):</item>
                                                        <item name="sortOrder" xsi:type="string">5</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                    </item>
                                                    <item name="departure_from" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</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">flightdetailsCheckoutForm</item>
                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                        </item>
                                                        <item name="options" xsi:type="array">
                                                            <item name="0" xsi:type="array">
                                                                <item name="label" xsi:type="string">Dubai International / DXB</item>
                                                                <item name="value" xsi:type="string">dxb</item>
                                                            </item>
                                                        </item>
                                                        <!-- value element allows to specify default value of the form field -->
                                                        <item name="value" xsi:type="string">dxb</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        <item name="dataScope" xsi:type="string">flightdetailsCheckoutForm.departure_from</item>
                                                        <item name="label" xsi:type="string">Departure From:</item>
                                                        <item name="sortOrder" xsi:type="string">6</item>
                                                    </item>

                                                    <item name="departure_flight_no" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.departure_flight_no</item>
                                                        <item name="label" xsi:type="string">Departure Flight No:</item>
                                                        <item name="sortOrder" xsi:type="string">7</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                    </item>
                                                    <item name="destination_city" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.destination_city</item>
                                                        <item name="label" xsi:type="string">City (Destination):</item>
                                                        <item name="sortOrder" xsi:type="string">8</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                    </item>
                                                    <item name="departure_date" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</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">flightdetailsCheckoutForm</item>
                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
                                                        </item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        <item name="dataScope" xsi:type="string">flightdetailsCheckoutForm.departure_date</item>
                                                        <item name="label" xsi:type="string">Departure Date:</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                        <item name="sortOrder" xsi:type="string">9</item>
                                                    </item>
                                                    <item name="departure_time" 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">flightdetailsCheckoutForm</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">flightdetailsCheckoutForm.departure_time</item>
                                                        <item name="label" xsi:type="string">Departure Time (24H Format):</item>
                                                        <item name="sortOrder" xsi:type="string">10</item>
                                                        <item name="validation" xsi:type="array">
                                                            <item name="required-entry" xsi:type="string">true</item>
                                                        </item>
                                                    </item>
                                                    <!--<item name="checkbox_field" xsi:type="array">-->
                                                        <!--<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>-->
                                                        <!--<item name="config" xsi:type="array">-->
                                                            <!--&lt;!&ndash;customScope is used to group elements within a single form (e.g. they can be validated separately)&ndash;&gt;-->
                                                            <!--<item name="customScope" xsi:type="string">flightdetailsCheckoutForm</item>-->
                                                            <!--<item name="template" xsi:type="string">ui/form/field</item>-->
                                                            <!--<item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>-->
                                                        <!--</item>-->
                                                        <!--<item name="provider" xsi:type="string">checkoutProvider</item>-->
                                                        <!--<item name="dataScope" xsi:type="string">flightdetailsCheckoutForm.checkbox_field</item>-->
                                                        <!--<item name="label" xsi:type="string">Checkbox Field</item>-->
                                                        <!--<item name="sortOrder" xsi:type="string">3</item>-->
                                                    <!--</item>-->

                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

由于评论限制,下面有其他代码,

答案 2 :(得分:0)

<强>结帐飞行details.js:

define(
[
    'jquery',
    'Magento_Ui/js/form/form',
    'underscore',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/checkout-data',
],
function (
    $,
    Component,
    _,
    ko,
    customer,
    quote,
    stepNavigator,
    checkoutData
) {
    'use strict';

    return Component.extend({
        //add here your logic to display step,
        isVisible: ko.observable(true),
        //this template set in layout config
        //defaults: {
        //    template: 'Ds_Checkout/checkout-flight-details'
        //},

        /**
         * @return {exports}
         */
        initialize: function () {

            this._super();

            //add checkout steps
            stepNavigator.registerStep(
                // li id mention as step code
                'booking-step',
                null,
                'Search & Booking',
                this.isVisible,
                _.bind(this.navigate, this),
                1
            );

            stepNavigator.registerStep(
                // li id mention as step code
                'flightdetails-step',
                null,
                'Flight Details',
                this.isVisible,
                _.bind(this.navigate, this),
                3
            );

            stepNavigator.registerStep(
                // li id mention as step code
                'customerdetails-step',
                null,
                'Customer Details',
                this.isVisible,
                _.bind(this.navigate, this),
                4
            );

            stepNavigator.registerStep(
                // li id mention as step code
                'confirmation-step',
                null,
                'Confirmation',
                this.isVisible,
                _.bind(this.navigate, this),
                30
            );

            return this;
        },

        /**
         * enable and disable the checkout steps
         */
        renderedHandler: function(){

            //add checkout steps indexes
            setTimeout(function(){
                $('.opc-progress-bar li').each(function(inx, e){
                    var stepclass = 'checkout-step-'+inx;
                    $(this).addClass(stepclass);
                    if(inx != 0){
                        $('.'+stepclass).removeClass('_active');
                    }
                });
            },1000*10);
        },

        /**
         * Load data from server for shipping step
         */
        navigate: function () {
            var self = this;
            self.isVisible(true);
            //once flight details saved navigate to next step
        },

        /**
         * @return {*}
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        },

        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        onSubmit: function() {
            alert('submit');
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('flightdetailsCheckoutForm.data.validate');

            // 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('flightdetailsCheckoutForm');
                // do something with form data
                console.dir(formData);

                //save data in db
                var actionUrl = 'Ds_Checkout/Onepage/SaveFlightDetails';
                $.ajax({
                    showLoader: true,
                    url: actionUrl,
                    data: formData,
                    type: "POST",
                    dataType: 'json'
                }).done(function (data) {
                    console.log('request compelted');
                    console.dir(data);
                });
            }
        }

    });
}

);

<强>结帐飞行details.html:

<li id="flightdetails-step" class="checkout-flight-details">
<div style="margin-bottom: 20px;" class="step-title" data-bind="i18n: 'Flight Details:'" data-role="title"></div>
<div id="checkout-step-flightdetails" class="step-content" data-role="content">

    <form id="flightdetails-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset" data-bind="afterRender: renderedHandler">
            <!--<legend data-bind="i18n: 'Flight Details Form'"></legend>-->
            <!-- ko foreach: getRegion('flightdetails-checkout-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </fieldset>
        <button type="reset">
            <span data-bind="i18n: 'Reset'"></span>
        </button>
        <button type="button" data-bind="click: onSubmit" class="button action continue primary">
            <span data-bind="i18n: 'Next'"></span>
        </button>
    </form>

</div>
<div class="step-title" data-bind="i18n: 'Customer Details:'" data-role="title"></div>

答案 3 :(得分:0)

我尝试@Vinai的方法没有成功,因为我不知道如何使用他的片段。我在此question找到了完整的用例。

以下代码在我的收货地址自定义中效果很好。

<!-- ko foreach: getRegion('additional-fieldsets') -->
<div class="row">
    <div class="col-sm-6">
        <!-- ko with: getChild('firstname') -->
        <!-- ko template: {name: getTemplate(), data: $data, as: 'element'} --><!-- /ko -->
        <!-- /ko -->
    </div>
    <div class="col-sm-6">
        <!-- ko with: getChild('lastname') -->
        <!-- ko template: {name: getTemplate(), data: $data, as: 'element'} --><!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!--/ko-->