Magento 2 – How to Modify Street Address in Checkout Forms

checkoutformslayoutmagento2

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/

Best Answer

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.

Related Topic