Magento 2 Checkout – How to Set Max Length on Billing Address

billing-addresscheckoutcustomer-addressmagento2validation

I have achieved for Shipping Address Magento 2: How to set Max Length for Street Address?

Struggling with Billing Address on domain.com/checkout/#payment

My Payment Method is Bank Transfer. I have tried below code, but seems not working.

magento\app\code\Custom\Checkout\Block\LayoutProcessor.php

    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payments-list']['children']['banktransfer-form']['children']['form-fields']['children']['street'] = [
        'component' => 'Magento_Ui/js/form/components/group',
        'label' => __('Street Address'),
        'required' => true,
        'dataScope' => 'banktransfer-form.street',
        //'displayArea' => 'billing-address-form-banktransfer',
        //'deps' => 'checkoutProvider',
        //'dataScopePrefix' => 'billingAddressbanktransfer',
        'provider' => 'checkoutProvider',
        'sortOrder' => 60,
        'type' => 'group',
        'children' => [
                [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'banktransfer-form',
                    '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" => 50],
            ],
                [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'banktransfer-form',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '1',
                'provider' => 'checkoutProvider',
                'validation' => ['required-entry' => false, "min_text_len‌gth" => 1, "max_text_length" => 50],
            ]
        ]
    ];

//        echo "<pre>";
//        print_r($jsLayout);
//        exit;

Best Answer

You have issue regarding not getting form-fields,

So you have to just keep below code in your plugin file using if condition,

if ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']) {
    foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        ['payment']['children']['payments-list']['children'] as $key => $value
    ) {
        if($value['component'] == 'Magento_Checkout/js/view/billing-address') {
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payments-list']['children']['banktransfer-form']['children']['form-fields']['children']['street'] = [ 'your customization' ]
        }
    }
}

Where your customization in above code you have to keep your code for override.

Related Solutions

Checkout – jQuery Returning Undefined for Value in Billing Step

Looking at your site there seems to be something weird happening when you're using // in your ID selector.

Try the following code instead, you'll need to update all instances of elements with a colon.

jQuery('[id="billing:aitoc_checkout_967 "]')

From your site it seems to find the element successfully.

Magento 2 – How to Set Max Length for Street Address

Finally I Got Solution by creating new Module :)

Referce Post: Magento 2 - How to affect street address in checkout forms with layout xml/ui arguments

magento\app\code\Custom\Checkout\registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Custom_Checkout', __DIR__
);

magento\app\code\Custom\Checkout\etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Checkout" setup_version="1.0.0" />
</config>

magento\app\code\Custom\Checkout\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\LayoutProcessor">
        <plugin name="Custom_Checkout" type="Custom\Checkout\Block\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

magento\app\code\Custom\Checkout\Block\LayoutProcessor.php

namespace Custom\Checkout\Block;

class LayoutProcessor {

    /**
     * @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'),
            'required' => true,
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 60,
            'type' => 'group',
            'children' => [
                    [
                    '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" => 50],
                ],
                    [
                    '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' => false, "min_text_len‌gth" => 1, "max_text_length" => 50],
                ]
            ]
        ];
        return $jsLayout;
    }

}

Thanks :)

Best Answer

Related Solutions

Checkout – jQuery Returning Undefined for Value in Billing Step

Magento 2 – How to Set Max Length for Street Address

Related Topic