knockout.js Magento2去底色渲染特定子对象

uqxowvwt  于 2022-11-10  发布在  其他
关注(0)|答案(4)|浏览(85)

我需要帮助与自定义结帐过程,我在magento 2工作。我发现这个代码在文件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-->

正如我所理解的,这将在checkout中显示整个表单。checkout_index_index. xml中没有定义像firstname、lastname这样的单个字段,我也不知道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.:我发现additional-fieldsets不在item name=""中,而是在displayArea中。这里的displayArea是什么意思?

3wabscal

3wabscal1#

若要呈现特定子级,请使用

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

ddhy6vgd2#

退房-航班-详细信息.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);
                });
            }
        }

    });
}

);

checkout 航班详细信息.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>
ar7v8xwq

ar7v8xwq3#

据我所知,displayArea意味着属性值将通过getRegion()标识Web模板中的呈现区域,该呈现区域通过getTemplate()
例如:实际布局

<item name="displayArea" xsi:type="string">flightdetails-checkout-form-fields</item>

在Web模板中

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

我正在为结帐过程添加自定义步骤和表单,并添加新表单域到目前为止,我发现是,
1)在模块操作布局文件中,您可以定义表单元素\app\code\Ds\Checkout\view\前端\layout\checkout_index_index. xml
2)在您的模块敲除js文件中处理数据保存etc\app\code\Ds\Checkout\view\frontend\web\js\view\checkout-flight-details.js
3)在您的模块Web模板中,使用knockout js\app\code\Ds\Checkout\view\frontend\web\template\checkout-flight-details.html呈现动作布局定义的元素项

checkout 索引.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>

由于注解限制,以下代码为其他代码:

lawou6xi

lawou6xi4#

我尝试了@Vinai的方法,但没有成功,因为我不知道如何使用他的sniplet。我找到了一个完整的用例。
下面的代码在我的送货地址定制中运行得非常好。

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

相关问题