Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 05bebb6

Browse files
doboothdobooth
authored
Merge pull request #7867 from eduard13/checkout-form-improvements
Checkout form improvements
2 parents 7636bc3 + cf62809 commit 05bebb6

File tree

1 file changed

+83
-84
lines changed

1 file changed

+83
-84
lines changed

‎src/guides/v2.3/howdoi/checkout/checkout_form.md‎

Lines changed: 83 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,16 @@ It should be similar to the following:
123123
<item name="children" xsi:type="array">
124124
<item name="before-form" xsi:type="array">
125125
<item name="children" xsi:type="array">
126-
<item name="custom-form" xsi:type="array">
126+
<item name="custom-checkout-form-container" xsi:type="array">
127127
<!-- Add this item to configure your js file -->
128128
<item name="component" xsi:type="string">VendorName_ModuleName/js/view/custom-checkout-form</item>
129129
<item name="config" xsi:type="array">
130130
<!-- And this to add your html template -->
131131
<item name="template" xsi:type="string">VendorName_ModuleName/custom-checkout-form</item>
132132
</item>
133+
<item name="children" xsi:type="array">
134+
<!-- Here we will add the form fields -->
135+
</item>
133136
</item>
134137
</item>
135138
</item>
@@ -162,101 +165,97 @@ The term static refers to the forms where all the fields are already known/prede
162165

163166
The fields of static forms are not generated dynamically, so they can be defined in a layout.
164167

165-
The following code sample shows configuration of the form that contains four fields: text input, select, checkbox, and date. This form uses checkout data provider (`checkoutProvider`) that is introduced in the `Magento_Checkout` module:
168+
The following code sample shows the configuration of the `custom-checkout-form-container` form, defined in the previous step. It contains four fields: a text input, a select, a checkbox, and a date field. This form uses the checkout data provider (`checkoutProvider`) that was introduced in the `Magento_Checkout` module:
166169

167170
```xml
168-
<item name="custom-checkout-form-container" xsi:type="array">
169-
<!-- Your JS file previously created -->
170-
<item name="component" xsi:type="string">%your_module_dir%/js/view/custom-checkout-form</item>
171-
<item name="provider" xsi:type="string">checkoutProvider</item>
172-
<item name="config" xsi:type="array">
173-
<!-- Your HTML file previously created -->
174-
<item name="template" xsi:type="string">%your_module_dir%/custom-checkout-form</item>
175-
</item>
176-
<item name="children" xsi:type="array">
177-
<item name="custom-checkout-form-fieldset" xsi:type="array">
178-
<!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
179-
<item name="component" xsi:type="string">uiComponent</item>
180-
<!-- the following display area is used in template (see below) -->
181-
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
182-
<item name="children" xsi:type="array">
183-
<item name="text_field" xsi:type="array">
184-
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
185-
<item name="config" xsi:type="array">
186-
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
187-
<item name="customScope" xsi:type="string">customCheckoutForm</item>
188-
<item name="template" xsi:type="string">ui/form/field</item>
189-
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
190-
</item>
191-
<item name="provider" xsi:type="string">checkoutProvider</item>
192-
<item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
193-
<item name="label" xsi:type="string" translate="true">Text Field</item>
194-
<item name="sortOrder" xsi:type="string">1</item>
195-
<item name="validation" xsi:type="array">
196-
<item name="required-entry" xsi:type="string">true</item>
197-
</item>
198-
</item>
199-
<item name="checkbox_field" xsi:type="array">
200-
<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
201-
<item name="config" xsi:type="array">
202-
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
203-
<item name="customScope" xsi:type="string">customCheckoutForm</item>
204-
<item name="template" xsi:type="string">ui/form/field</item>
205-
<item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
206-
</item>
207-
<item name="provider" xsi:type="string">checkoutProvider</item>
208-
<item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
209-
<item name="label" xsi:type="string" translate="true">Checkbox Field</item>
210-
<item name="sortOrder" xsi:type="string">3</item>
211-
</item>
212-
<item name="select_field" xsi:type="array">
213-
<item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
214-
<item name="config" xsi:type="array">
215-
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
216-
<item name="customScope" xsi:type="string">customCheckoutForm</item>
217-
<item name="template" xsi:type="string">ui/form/field</item>
218-
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
219-
</item>
220-
<item name="options" xsi:type="array">
221-
<item name="0" xsi:type="array">
222-
<item name="label" xsi:type="string" translate="true">Please select value</item>
223-
<item name="value" xsi:type="string"></item>
171+
...
172+
<item name="custom-checkout-form-container" xsi:type="array">
173+
...
174+
<item name="children" xsi:type="array">
175+
<item name="custom-checkout-form-fieldset" xsi:type="array">
176+
<!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
177+
<item name="component" xsi:type="string">uiComponent</item>
178+
<!-- the following display area is used in template (see below) -->
179+
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
180+
<item name="children" xsi:type="array">
181+
<item name="text_field" xsi:type="array">
182+
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
183+
<item name="config" xsi:type="array">
184+
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
185+
<item name="customScope" xsi:type="string">customCheckoutForm</item>
186+
<item name="template" xsi:type="string">ui/form/field</item>
187+
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
224188
</item>
225-
<item name="1" xsi:type="array">
226-
<item name="label" xsi:type="string" translate="true">Value 1</item>
227-
<item name="value" xsi:type="string">value_1</item>
189+
<item name="provider" xsi:type="string">checkoutProvider</item>
190+
<item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
191+
<item name="label" xsi:type="string" translate="true">Text Field</item>
192+
<item name="sortOrder" xsi:type="string">1</item>
193+
<item name="validation" xsi:type="array">
194+
<item name="required-entry" xsi:type="string">true</item>
228195
</item>
229-
<item name="2" xsi:type="array">
230-
<item name="label" xsi:type="string" translate="true">Value 2</item>
231-
<item name="value" xsi:type="string">value_2</item>
196+
</item>
197+
<item name="checkbox_field" xsi:type="array">
198+
<item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
199+
<item name="config" xsi:type="array">
200+
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
201+
<item name="customScope" xsi:type="string">customCheckoutForm</item>
202+
<item name="template" xsi:type="string">ui/form/field</item>
203+
<item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
232204
</item>
205+
<item name="provider" xsi:type="string">checkoutProvider</item>
206+
<item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
207+
<item name="label" xsi:type="string" translate="true">Checkbox Field</item>
208+
<item name="sortOrder" xsi:type="string">3</item>
233209
</item>
234-
<!-- value element allows to specify default value of the form field -->
235-
<item name="value" xsi:type="string">value_2</item>
236-
<item name="provider" xsi:type="string">checkoutProvider</item>
237-
<item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
238-
<item name="label" xsi:type="string" translate="true">Select Field</item>
239-
<item name="sortOrder" xsi:type="string">2</item>
240-
</item>
241-
<item name="date_field" xsi:type="array">
242-
<item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
243-
<item name="config" xsi:type="array">
244-
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
245-
<item name="customScope" xsi:type="string">customCheckoutForm</item>
246-
<item name="template" xsi:type="string">ui/form/field</item>
247-
<item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
210+
<item name="select_field" xsi:type="array">
211+
<item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
212+
<item name="config" xsi:type="array">
213+
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
214+
<item name="customScope" xsi:type="string">customCheckoutForm</item>
215+
<item name="template" xsi:type="string">ui/form/field</item>
216+
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
217+
</item>
218+
<item name="options" xsi:type="array">
219+
<item name="0" xsi:type="array">
220+
<item name="label" xsi:type="string" translate="true">Please select value</item>
221+
<item name="value" xsi:type="string"></item>
222+
</item>
223+
<item name="1" xsi:type="array">
224+
<item name="label" xsi:type="string" translate="true">Value 1</item>
225+
<item name="value" xsi:type="string">value_1</item>
226+
</item>
227+
<item name="2" xsi:type="array">
228+
<item name="label" xsi:type="string" translate="true">Value 2</item>
229+
<item name="value" xsi:type="string">value_2</item>
230+
</item>
231+
</item>
232+
<!-- value element allows to specify default value of the form field -->
233+
<item name="value" xsi:type="string">value_2</item>
234+
<item name="provider" xsi:type="string">checkoutProvider</item>
235+
<item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
236+
<item name="label" xsi:type="string" translate="true">Select Field</item>
237+
<item name="sortOrder" xsi:type="string">2</item>
248238
</item>
249-
<item name="provider" xsi:type="string">checkoutProvider</item>
250-
<item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
251-
<item name="label" xsi:type="string" translate="true">Date Field</item>
252-
<item name="validation" xsi:type="array">
253-
<item name="required-entry" xsi:type="string">true</item>
239+
<item name="date_field" xsi:type="array">
240+
<item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
241+
<item name="config" xsi:type="array">
242+
<!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
243+
<item name="customScope" xsi:type="string">customCheckoutForm</item>
244+
<item name="template" xsi:type="string">ui/form/field</item>
245+
<item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
246+
</item>
247+
<item name="provider" xsi:type="string">checkoutProvider</item>
248+
<item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
249+
<item name="label" xsi:type="string" translate="true">Date Field</item>
250+
<item name="validation" xsi:type="array">
251+
<item name="required-entry" xsi:type="string">true</item>
252+
</item>
254253
</item>
255254
</item>
256255
</item>
257256
</item>
258257
</item>
259-
</item>
258+
...
260259
```
261260

262261
### Dynamically defined forms {#dynamic_form}

0 commit comments

Comments
 (0)