Add label to street fields in checkout

[svossen]

I'd like to add labels to each field of the street customer attribute. The input type of this attribute is multiple line and by raising the Lines Count I can use multiple fields for the address attribute.

The group.html template and field.html templates are used to build the form. The element.label value is used in the group.html template to set the fieldsets legend. The `element.label` value is empty in the field.html template so no label is added.

I can't add a value to each field form the backend. I've tried adding alternative labels by using the element.dataScope as the label's value but I didn't manage to translate this value to a more human readable text.

[nlscrw80]

+1

Customizing Magento 2's checkout is a nightmare.

[svossen]

I've solved it by creating a new custom module and passing label values to the children of street. This is described at http://diweirich.com/magento-2-using-placeholders-in-form-fields/ . Not an ideal solution when working with a lot of different locales though.

[EduardoDias]

You need to create an module, and on di.xml rewrite street on di.xml:

...
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="rewrite-street" type="Vendor\ModuelName\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
</type>
...

And create LayoutProcessorPlugin:

<?php
namespace Vendor\ModuleName\Model\Checkout;

class LayoutProcessorPlugin
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
            'component' => 'Magento_Ui/js/form/components/group',
            //'label' => __('Street Address'), I removed main label
            'required' => false, //turn false because I removed main label
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 0,
            'type' => 'group',
            'additionalClasses' => 'street',
            'children' => [
                [
                    'label' => __('Label 1'),
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '0',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],
                ],
                [
                    'label' => __('Label 2'),
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '1',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],
                ],
                [
                    'label' => __('Label 3'),
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '2',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],
                ],
                [
                    'label' => __('Label 4'),
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '3',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => false, "min_text_len‌​gth" => 1, "max_text_length" => 255],
                ],
            ]
        ];
        return $jsLayout;
    }
}

[Mohammad Aquil Tanveer]

Just in case if anyone wants to update
shipping address street mutiple fields and
billing address street field labels
please check below
Note - tested on Magento 2.
```

<?php

namespace Vendor\Module\Plugin\Block;

/**
* This is plugin which returns collection
*
* @author Tanveer Mohammad <akhil.tanveer@gmail.com>
* @since 1.0 First time this was introduced.
* @copyright 1948-2020 akhil
**/
class LayoutProcessor
{
/**
* Get checkout layout content
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param \Closure $proceed
* @param array $jsLayout
*/
public function aroundProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
\Closure $proceed,
array $jsLayout
) {
$jsLayoutResult = $proceed($jsLayout);

$shippingAddress = &$jsLayoutResult['components']['checkout']
['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']
['shipping-address-fieldset']['children'];

unset($shippingAddress['street']['label']);

// Shipping fields street labels
$shippingAddress['street']['children']['0']['label'] = __('Address (street and number)');
$shippingAddress['street']['children']['1']['label'] = __('Floor, door or other');
$shippingAddress['street']['children']['2']['label'] = __('Address street 3');

return $jsLayoutResult;
}

public function afterProcess( \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout)
{
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']))
{

$billingAddress = &$jsLayout['components']['checkout']['children']['steps']
['children']['billing-step']['children']['payment']['children']
['afterMethods']['children']['billing-address-form']['children']
['form-fields']
['children'];
unset($billingAddress['street']['children']['0']['label']);
unset($billingAddress['street']['children']['1']['label']);
unset($billingAddress['street']['children']['2']['label']);

$billingAddress['street']['children']['0']['label']['0'] = __('Address (street and number)');
$billingAddress['street']['children']['1']['label']['0'] = __('Floor, door or other');
$billingAddress['street']['children']['2']['label']['0'] = __('Address street 3');

}

return $jsLayout;
}
}
```