cancel
Showing results for 
Search instead for 
Did you mean: 

Add label to street fields in checkout

Add label to street fields in checkout

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.

4 REPLIES 4

Re: Add label to street fields in checkout

+1

 

Customizing Magento 2's checkout is a nightmare.

Re: Add label to street fields in checkout

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.

Re: Add label to street fields in checkout

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

Re: Add label to street fields in checkout

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