Magento 2 : How to add placeholder text to street fields in checkout?

Question

In back-end I've set the street address to have 3 lines.

I'd like to put a different placeholder in each field:

• Street
• Building / Apartment
• Area

This way user can enter data in a more structured way.

A similar question can be found here:

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

However the answers does not provide a solution to include placeholders in street address fields.

What I want to achieve is setting a different placeholder for each street address field.

My code:

app/code/Jsp/Placeholder/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="Jsp_Placeholder" setup_version="2.0.0" />
</config>

app/code/Jsp/Placeholder/registration.php :

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
  \Magento\Framework\Component\ComponentRegistrar::MODULE,
  'Jsp_Placeholder',
  __DIR__
);

app/code/Jsp/Placeholder/etc/di.xml :

<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="Jsp\Placeholder\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
  </type>
</config>

app/code/Jsp/Placeholder/Plugin/Checkout/Block/Checkout/AttributeMerger/Plugin.php :

<?php
namespace Jsp\Placeholder\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]['placeholder'] = __('Calle y número exterior');
      $result['street']['children'][1]['placeholder'] = __('Interior / Edificio / Depto.');
      $result['street']['children'][2]['placeholder'] = __('Colonia');
    }
    return $result;
  }
}

Answer 1

Add these file in any of your custom module :

app/code/Vendor/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="Vendor_ModuleName" setup_version="2.0.0" />
</config>

app/code/Vendor/ModuleName/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
  \Magento\Framework\Component\ComponentRegistrar::MODULE,
  'Vendor_ModuleName',
  __DIR__
);

app/code/Vendor/ModuleName/etc/di.xml

<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="Vendor\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
  </type>
</config>

Vendor\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin.php

<?php
namespace Vendor\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]['placeholder'] = __('Flat No/House No/Building No');
      $result['street']['children'][1]['placeholder'] = __('Street Address');
      $result['street']['children'][2]['placeholder'] = __('Landmark');
    }

    return $result;
  }
}

Answer 2

I would create an after Plugin for \Magento\Checkout\Block\Checkout\LayoutProcessor::process. This way it would be called only once.

The plugin would look like:

public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $subject, $result, $jsLayout)
{

    $streetLines = &$result['components']["checkout"]["children"]["steps"]["children"]["billing-step"]["children"]
                ["payment"]["children"]["afterMethods"]["children"]["billing-address-form"]["children"]
                ["form-fields"]["children"]["street"]["children"];

    $streetLines[0]['label'] = new \Magento\Framework\Phrase('Street Address'); #change if you want to
    $streetLines[0]['placeholder'] = __('Flat No/House No/Building No');
# ... and so on for $streetLines[1], 2, 3, etc

    return $result;
}

The above solution would be for the billing address, but you can change shipping address as well, by modifying it accordingly to your needs.