5

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?

10

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;
    }
}
  • 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
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'); 
1

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;
  • 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
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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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