1

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.

1

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;
  }
}
  • With the help of this you will get labels in both Shipping as well as billing address forms. – Nauman m. Mansuri Dec 24 '18 at 9:44
  • Thanks nauman for the revert..I am getting the labels but the issue is when saved the street address in not getting saved in billing address – Nisith Dec 24 '18 at 9:49
  • Do you want to save labels too? – Nauman m. Mansuri Dec 24 '18 at 9:51
  • No,the data in the address fields is to saved – Nisith Dec 24 '18 at 9:52
  • I have provided the link in the question which i posted through which I am getting the labels in both shipping and billing(have used billing address form layout components). But in shipping address form the address fields are getting saved but not in billing address – Nisith Dec 24 '18 at 9:56

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.