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

Question

I'm trying to set a placeholder on street address fields on shipping address form in checkout. Followed this example: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html I've modified my modules checkout_index_index.xml.

Most of the fields have now a placeholder in checkout by defining:

<item name="telephone" xsi:type="array">
  <item name="config" xsi:type="array">
    <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
  </item>
</item>

Telephone works. The input template is used.

The street address is a group, see magento-ui/view/frontend/view/frontend/templates/group/group.html And it contains 2 input elements.

Can't affect these elements template from layout checkout_index_index.xml.

Last I tryed this, without success:

<item name="street" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="0" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
        <item name="1" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/my-input</item>
            </item>
        </item>
    </item>
</item>

The keys 0 and 1 seem to be correct. I see them in the big JSON in the checkout page source, on the street group:

<script type="text/x-magento-init">
{
  "#checkout":
    "Magento_Ui/js/core/app":  { ... }
}
</script>

Anyone knows how street address input fields can be affected?

PS: Input placeholder can be enabled editing the input HTML template like here: https://stackoverflow.com/questions/35406440/magento2-checkout-form-how-to-display-placeholder-attribute-value-in-fields/

Answer 1

For street address,you need do some coding.

At checkout, the fields are rendered from Magento\Checkout\Block\Checkout\AttributeMerger.

As for showing placeholder for street , go to the function getMultilineFieldConfig, and paste:

if($attributeCode=='street') {
    $line['label'] = $attributeConfig['label'];
}

After

if ($isFirstLine && isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
        $line['value'] = $attributeConfig['default'];
}

And see that magic. I have already tried it with a magento 2 instance, and it is working.

Answer 2

The best solution for me was to base yourself in the same method mentioned above: (getMultilineFieldConfig)

However creating a NEW MODULE.

In your new or existing module, add Magento_Checkout in the node sequence (VendorName/ModuleName/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="VendorName_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Now, set dependency injection for Magento\Checkout\Block\Checkout\LayoutProcessor

(VendorName/ModuleName/etc/frontend/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="vendorname_modulename" type="VendorName\ModuleName\Block\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

What is missing is to create the block (VendorName/ModuleName/Block/LayoutProcessor.php):

<?php
namespace VendorName\ModuleName\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' => __('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' => true,
                'additionalClasses' => 'additional',
                'label' => __('Street')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '1',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('Number')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '2',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('District')
                ]
            ]
            
        ];

         return $jsLayout;
     }
 }

Result: