How to add label on all lines of street fields in checkout and turn then required?

Question

Magento has a feature to define between 1 and 4 fields, how much we will want to use in the street field. I've activated 4 lines and would like to add labels line by line. I did this on the user registration and address in my account as you can see in the image below:

I do it just editing phtml and layout (XML) files. And I extend \Magento\Customer\Model\ResourceModel\AddressRepository\AddressRepository to turn required lines 2 and 3.

But on checkout I have it:

How can I add labels and turn lines 2 and 3 required on checkout?

Answer 1

I solved rewriting 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 my LayoutProcessorPlugin.php:

<?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;
    }
}

Answer 2

you can also use magento's array manager:

    $streetPaths = $this->arrayManager->findPaths('street', $jsLayout);
    foreach ($streetPaths as $streetPath)
    {
        $jsLayout = $this->arrayManager->remove($streetPath . '/label', $jsLayout);
        $jsLayout = $this->arrayManager->set($streetPath . '/children/0/label', $jsLayout, __('Street'));
        $jsLayout = $this->arrayManager->set($streetPath . '/children/1/label', $jsLayout, __('Street Number'));
    }

    return $jsLayout;

Answer 3

All these answers above seem to mis the changing of the billing fields. So i decided to add my answer as well.

Add the class to your di like this. Or create one in etc/frontend/di.xml.

<?xml version="1.0"?>

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="street_labels" type="Vendor\YourModuleName\Plugin\Block\LayoutProcessor" sortOrder="1"/>
</type>

Then add the file which contains your php class:

Vendor\YourModuleName\Plugin\Block\LayoutProcessor.php

<?php

namespace Vendor\YourModuleName\Plugin\Block;

class LayoutProcessor
{
    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'] = __('Street name');
        $shippingAddress['street']['children']['1']['label'] = __('House number');
        $shippingAddress['street']['children']['2']['label'] = __('Addition');

        return $jsLayoutResult;
    }

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

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )
    {

        // Change billing field labels for every payment method
        $paymentForms = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];

        foreach ($paymentForms as $paymentMethodForm => $paymentMethodValue) {

            $paymentMethodCode = str_replace('-form', '', $paymentMethodForm);

            $billingAddress = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children'];

            if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form'])) {
                continue;
            }

            $billingAddress['street']['children'][0]['label'] = __('Street name');
            $billingAddress['street']['children'][1]['label'] = __('House number');
            $billingAddress['street']['children'][2]['label'] = __('Addition');
        }

        return $jsLayout;
    }
}

Replace Vendor\YourModuleName with your module ofcourse. The billing address field labels can only be changed in the 'after' plugin.

If the label for the second street field is there after this but hiding behind the other input field then you might want to add the following css:

   #checkout .field.street .field.additional .label {
            position: static;
        }

Answer 4

in below plugin no need to write all set of array for label change

you can do

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['label'] = __('TEST'); 

Answer 5

One little thing that may help someone in the future, the Eduardo's answer it's the one that worked for me but to change the template on street fields I haved to add a field fieldTemplate on the parent element that point to my template, only this worked for change the field template on the street fields the field template on the children does not seem to affect at all.

the father element that worked for change the field template:

'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',
        'fieldTemplate'=>'Vendor_ModuleName/template'//<-this is the fild to change the field template
        'sortOrder' => 0,
        'type' => 'group',
        'additionalClasses' => 'street',