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

Commit b628c14

Browse files
committed
Improving the checkout form adding topic
1 parent c07cf82 commit b628c14

File tree

1 file changed

+9
-10
lines changed

1 file changed

+9
-10
lines changed

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

Lines changed: 9 additions & 10 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,17 +165,12 @@ 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 configuration of the `custom-checkout-form-container` form that was defined in the previous step, 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:
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>
171+
...
172+
<item name="custom-checkout-form-container" xsi:type="array">
173+
...
176174
<item name="children" xsi:type="array">
177175
<item name="custom-checkout-form-fieldset" xsi:type="array">
178176
<!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
@@ -257,6 +255,7 @@ The following code sample shows configuration of the form that contains four fie
257255
</item>
258256
</item>
259257
</item>
258+
...
260259
```
261260

262261
### Dynamically defined forms {#dynamic_form}

0 commit comments

Comments
 (0)