Add a Textarea to Shipping Address in Magento 2

checkoutmagento-2.1magento2ordersshipping-address

I followed this tutorial to add a new field to checkout:
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_field.html

Problem is: as long as it is a <input type="text" /> everything works. But if I change my input field to a <textarea> it won't save.

I highly suspect Magento guys just don't know about textareas…

Well on a serious note, I found code handling textareas but couldn't find code that handles textareas in checkout. Also I didn't find any implementation of a textarea in magento.

Has anyone figured how to do it? (or if it is possible at all)

Best Answer

Yes it's possible to add textarea to the shipping address on checkout. I just added a delivery comment field which is a textarea.

In your LayoutProcessor plugin you should declare the field like this:

'delivery_comment' => [
    'component' => 'Magento_Ui/js/form/element/textarea',
    'config' => [
        'customScope' => 'shippingAddress',
        'template' => 'ui/form/field',
        'options' => [],
    ],
    'dataScope' => 'shippingAddress.delivery_comment',
    'label' => __('Delivery Comment'),
    'provider' => 'checkoutProvider',
    'visible' => true,
    'validation' => false,
    'sortOrder' => 250,
]

How do you handle the saving of this data to the quote and order models? Did you follow the tutorial?

I think that you need to observe the sales_model_service_quote_submit_before event and copy the field from quote to order object.

Related Solutions

Magento 2 – How to Modify Checkout Page

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

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 2 – How to Modify Checkout Page

Magento 2 – How to Modify Street Address in Checkout Forms

Related Topic