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.

2 Answers 2

3

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;
  }
}
9
  • With the help of this you will get labels in both Shipping as well as billing address forms. Commented Dec 24, 2018 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
    Commented Dec 24, 2018 at 9:49
  • Do you want to save labels too? Commented Dec 24, 2018 at 9:51
  • No,the data in the address fields is to saved
    – Nisith
    Commented Dec 24, 2018 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
    Commented Dec 24, 2018 at 9:56
0

This example will change the labels on the payment page for all the payment/billing forms (moneris, stripe, braintree etc.).

I'm posting an example of how to change street field labels on the payment page. But you can target any field by replacing the [street] value.

Please, if this is not the best practice let me know. I didn't manage to find many examples or documentation about this, so I kind of did this myself.

app/code/Vendor/Checkout/Plugin/LayoutProccessorPluginPayment.php

<?php
namespace Vendor\Checkout\Plugin;

class LayoutProccessorPluginPayment
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array                                            $jsLayout
     *
     * @return array
     */

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array                                            $jsLayout
    ) {
        $paymentForms = $jsLayout['components']['checkout']['children']['steps']['children']
                        ['billing-step']['children']['payment']['children']
                        ['payments-list']['children'];

        // Change billing field labels for every payment method
        foreach ($paymentForms as $paymentMethodForm => $paymentMethodValue) {

            $paymentMethodCode = str_replace('-form', '', $paymentMethodForm);

            //Checks if billing step available.
            if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form'])) {
                continue;
            }
            $jsLayout['components']['checkout']['children']['steps']['children']
            ['billing-step']['children']['payment']['children']
            ['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children']['street'] = [
                'component'         => 'Magento_Ui/js/form/components/group',
                'label'             => __('Street Address'),
                'required'          => false,
                'dataScope'         => 'billingAddress.street',
                'provider'          => 'checkoutProvider',
                'sortOrder'         => 50,
                'type'              => 'group',
                'additionalClasses' => 'street',
                'children'          => [
                    [
                        'label'      => __('Label1'),
                        'component'  => 'Magento_Ui/js/form/element/abstract',
                        'config'     => [
                            'customScope' => 'billingAddress',
                            'template'    => 'ui/form/field',
                            'elementTmpl' => 'ui/form/element/input',
                        ],
                        'dataScope'  => '0',
                        'provider'   => 'checkoutProvider',
                        'validation' => ['required-entry' => true, "min_text_length" => 1],
                    ],
                    [
                        'label'      => __('Label2'),
                        'component'  => 'Magento_Ui/js/form/element/abstract',
                        'config'     => [
                            'customScope' => 'billingAddress',
                            'template'    => 'ui/form/field',
                            'elementTmpl' => 'ui/form/element/input',
                        ],
                        'dataScope'  => '1',
                        'provider'   => 'checkoutProvider',
                        'validation' => ['required-entry' => false, "min_text_length" => 1],
                    ],
                ],
            ];
        }

        return $jsLayout;
    }
}

And then add the plugin in app/code/Vendor/Checkout/etc/di.xml

    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="billing-street-labels" type="Vendor\Checkout\Plugin\LayoutProccessorPluginPayment" sortOrder="10"/>
    </type>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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