10

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;
  }
}
  • After adding this module have you did these step : 1. enable module : sudo bin/magento module:enable Jsp_Placeholder 2. upgrade setup : sudo bin/magento setup:upgrade 3. compile setup : sudo bin/magento setup:di:compile Have you did all these ? – Ashish Jagnani Sep 28 '16 at 5:42
  • These code is perfectly working with default checkout address form in magento 2. – Ashish Jagnani Sep 28 '16 at 6:27
13

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;
  }
}
  • Where should I add the di.xml file? I don't have any custom modules – Luis Garcia Sep 23 '16 at 19:37
  • Pl check my updated answer. – Ashish Jagnani Sep 24 '16 at 4:36
  • Thanks, I've created the module following your instructions but the placeholders don't show up yet. The module is enabled, I clean cache, and run setup:upgrade. Have any idea what could be wrong? – Luis Garcia Sep 26 '16 at 19:58
  • Write your exact code of all files of module in your question what you have tried. – Ashish Jagnani Sep 27 '16 at 5:38
  • I just updated my question with the code I tried – Luis Garcia Sep 27 '16 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.