13

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;
  }
}
2
  • 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 ? Sep 28 '16 at 5:42
  • These code is perfectly working with default checkout address form in magento 2. Sep 28 '16 at 6:27
20

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;
  }
}
12
  • Where should I add the di.xml file? I don't have any custom modules Sep 23 '16 at 19:37
  • Pl check my updated answer. 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? Sep 26 '16 at 19:58
  • Write your exact code of all files of module in your question what you have tried. Sep 27 '16 at 5:38
  • I just updated my question with the code I tried Sep 27 '16 at 16:40
0

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.

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.