0

I needed to change the street field label on Magento checkout shipping page. According to Magento documentation, the best practice is to use LayoutProcessor Plugin.

I successfully changed the labels with the following code

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

<?php
namespace Vendor\Checkout\Plugin;

class ShippingLayoutProcessorPlugin
{
    /**
     * @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'          => false,
            'dataScope'         => 'shippingAddress.street',
            'provider'          => 'checkoutProvider',
            'sortOrder'         => 50,
            'type'              => 'group',
            'additionalClasses' => 'street',
            'children'          => [
                [
                    'label'      => __('Street Address'),
                    '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_length" => 1],
                ],
                [
                    'label'      => __('Apartment, Floor, Etc.'),
                    '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_length" => 1],
                ],
            ],
        ];

        return $jsLayout;
    }
}

app/code/Vendor/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="shipping-street-labels" type="Vendor\Checkout\Plugin\ShippingLayoutProcessorPlugin" sortOrder="10"/>
    </type>
</config>

But then, I realised there are address forms on the payment page too and the labels were not changed on the payment page. What's the best way to change the street field labels on the payment page too?

1 Answer 1

0

So far this is the solution I came up with, please, if this is not the best practice let me know.

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

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.