Magento 2 – How to Modify Checkout Page

checkoutmagento2uicomponent

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

Best Answer

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

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

Related Solutions

Magento – Magento 2 – Custom UI Component on checkout page

Magento 2 documentation has now been updated to answer your question, they cover more areas which may help too:

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_overview.html

However, they have a section specifically on adding a form (where you can gleam how to add a field using the same method).

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html

The most pressing issue that you first must understand is that the methodology for adding the component or input depends upon whether the form is static or generated dynamically. The address fields in checkout are generated dynamically whereas the above link (adding a form) shows how to add a static form (or fields) by adding your uiComponents with the xml layout.

Adding a field to a dynamically generated form will mean a plugin on the checkout layout processor* and modifying an array through at least ten keys for some reason. More details in link below:

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_field.html

Layout Processor: \Magento\Checkout\Block\Checkout\LayoutProcessor

Magento 2 – How to Modify Street Address in Checkout Forms

For street address,you need do some coding.

At checkout, the fields are rendered from Magento\Checkout\Block\Checkout\AttributeMerger.

As for showing placeholder for street , go to the function getMultilineFieldConfig, and paste:

if($attributeCode=='street') {
    $line['label'] = $attributeConfig['label'];
}

After

if ($isFirstLine && isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
        $line['value'] = $attributeConfig['default'];
}

And see that magic. I have already tried it with a magento 2 instance, and it is working.

Best Answer

Related Solutions

Magento – Magento 2 – Custom UI Component on checkout page

Magento 2 – How to Modify Street Address in Checkout Forms

Related Topic