Magento – Add placeholder text to One Page Checkout street address

checkoutlayoutmagento2onepage-checkout

How do you add a placeholder input attribute to the Street Address Line 1?

In the checkout_index_index page I have the below (where I can change the visibility of all the children, so I know I'm in the right part…), however I can't work out how to access the children on the street element – I've scoured the Internet for an hour or two and can't find any info.

<item name="children" xsi:type="array">
    <item name="shipping-step" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="shippingAddress" xsi:type="array">
                <item name="children" xsi:type="array">
                    <item name="shipping-address-fieldset" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="street" xsi:type="array">
                                <item name="visible" xsi:type="boolean">true</item>
                                ...
                                ...
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

Best Answer

Since modifying core Magento files is not a recommended way, you need to create a custom module for it.

Step 1: Create app/code/Stack/ModuleName/etc/module.xml and paste below code

<?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="Stack_ModuleName" setup_version="2.0.0" />
</config>

Step 2: Create app/code/Stack/ModuleName/registration.php and paste below code

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

Step 3: Define custom plugin (app/code/Stack/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="Stack\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
  </type>
</config>

Final step: Create plugin class (Stack\ModuleName\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin.php)

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

    return $result;
  }
}

Please let me know if you find any problem.

Related Topic