Magento – How to divide street address into 3 lines with label for each line and update them in checkout form for billing address

billing-addresscheckoutmagento2

I have referred to below solution for dividing the street address into 3 lines.

For shipping form in checkout .

I have made changes for billing address below referring the above link.

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

class LayoutProcessorPlugin
{
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
            ['children']['street'] = [
                'component' => 'Magento_Ui/js/form/components/group',
                'required' => false, //turn false because I removed main label
                'dataScope' => 'billing-address-form.street',
                'provider' => 'checkoutProvider',
                'sortOrder' => 52,
                'type' => 'group',
                'additionalClasses' => 'street',
                'children' => [
                    [
                        'label' => __('Flat, House no., Building, Company, Apartment: '),
                        'component' => 'Magento_Ui/js/form/element/abstract',
                        'config' => [
                            'customScope' => 'billing-address-form.street',
                            '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' => __('Area, Colony, Street, Sector, Village: '),
                        'component' => 'Magento_Ui/js/form/element/abstract',
                        'config' => [
                            'customScope' => 'billing-address-form.street',
                            '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' => __('Landmark e.g. near apollo hospital: '),
                        'component' => 'Magento_Ui/js/form/element/abstract',
                        'config' => [
                            'customScope' => 'billing-address-form.street',
                            '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],
                    ],
                ]
            ];
        }

        return $jsLayout;
    }
}

The street field gets divided into three lines with label for each but when saved the fields are not getting saved.

How can I make this working for Billing address in checkout.

Best Answer

Create Plugin via di.xml Under : VendorName\ModuleName\etc\di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\AttributeMerger">
      <plugin name="shippingAddress" type="VendorName\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
    </type>
</config>

Create Plugin File Under : VendorName\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin.php

<?php 
namespace VendorName\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger;

class Plugin
{
  public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
  {
    if (array_key_exists('street', $result)) {
      $result['street']['children'][0]['label'] = __('Street Address Line 1');
       $result['street']['children'][1]['label'] = __('Street Address line 2');
       $result['street']['children'][2]['label'] = __('Street Address line 3');

    }
    return $result;
  }
}
Related Topic