我需要帮助我在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在这里意味着什么？
答案 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">-->
<!--<!–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/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-->