8

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:

enter image description here

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: enter image description here

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

3
  • Hi @Eduardo Could you please tell me which files you have edited to add the labels to all lines of street fields? I am trying to add labels to the street field but I am unable to find the file. Please see this link- [magento.stackexchange.com/questions/297425/… – vartika sharma Dec 3 '19 at 6:17
  • I created a module for this issue, if anyone have interest. packagist.org/packages/i9/streetlabel – Douglas Ianitsky Jun 30 '20 at 14:23
  • I would like to put addtional street labels ABOVE street additional fields Tried to do it by CSS but I just manage to put it below, not above. How to do it? – Luiz Santos Nov 11 '20 at 22:42
15

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;
    }
}
7
  • This works as expected, but it comes first in order, I tried changing the sort order but didnt work, is there any way to change the order of this street address? – Nausif Dec 6 '18 at 9:57
  • Did you tried to change the dataScope or add sortOrder on children fields? – Eduardo Dec 6 '18 at 17:36
  • Sorry for a late reply, sorting worked, at first I was giving irrelevant sorting orders, my bad :( – Nausif Dec 20 '18 at 12:00
  • 1
    How can I apply the same for billing address form? – Nausif Dec 26 '18 at 7:37
  • @Nausif here's an example: github.com/eduardoddias/… – Eduardo Dec 26 '18 at 9:59
3

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;
2
  • Your solution is good it worked for me But, first time i thought it is notworking but when i printed $jsLayout array I found that lable is updated, but it was not showing because of Position:absolute css applied on lable. I removed that and worked fine for me – Dhaval Solanki Apr 5 '18 at 11:45
  • where i need to insert this rows? – Alessandro Gnola Oct 14 '20 at 13:41
2

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

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'); 
0

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',

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.