Magento2 - Modify Checkout page

Question

I'm currently developing an extension that modifies the fields of the checkout page in Magento2. I followed this tutorial: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_customize.html but cannot get it to work the way I want.

What I want to do is:

• Remove some fields (for example the region, and the second line of the street address)
• Add custom fields, for example VAT-number, comment field
• Change the order of some fields
• Create validation for the custom fields

What I did so far:

• Created extension (with sequence Magento_Checkout)
• Added frontend/layout/checkout_index_index.xml

The extension itself is working properly. When I copy the fields from shipping-address-fieldset and I modify the description for telephone, I see it works. My new description is shown at the checkout page. But when I try to add a new field, or remove a field nothing happens.

Does anyone have experience with this? Please point me in the right direction.

Thanks

Answer 1

1. To remove/disable field (for example region) you should change the configuration to

   <item name="region_id" xsi:type="array">
       <item name="visible" xsi:type="boolean">false</item>
   </item>
   

   To disable second address line you can use Stores -> Configuration. Go to Store -> Configuration -> CUSTOMERS -> Customer Configuration -> Name and Address Options. Set Number of Lines in a Street Address = 1

2. Change the order of some fields.

   You can change order of some fields on shipping address form by modifying value of node sortOrder node.

   <item name="country_id" xsi:type="array">
        <item name="sortOrder" xsi:type="string">10</item>
   </item>
   

3. Create validation for the custom fields.

   To create validation for you field you need to add such configuration to your field.

   <item name="your_field" xsi:type="array">
       <item name="validation" xsi:type="array">
           <item name="min_text_length" xsi:type="number">0</item>
       </item>
   </item>
   

Possible validation rules collected in Magento/Ui/view/base/web/js/lib/validation/rules.js

Answer 2

Maybe you'll finde a solution in this tutorial: https://sohelrana09.wordpress.com/2015/11/28/how-to-add-custom-field-to-shipping-address-form-in-magento-2-onepage-checkout/

Answer 3

Follow this for custom fields in address section

http://excellencemagentoblog.com/blog/2011/11/29/magento-adding-custom-field-to-customer-address/