6

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/

3

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.

  • 1
    It works by rewriting AttributeMerger block with a preference. Possibly with a Plugin too. From there I just overloaded the functions I needed where I saw elementTmpl. Thank you. – obscure May 5 '16 at 6:59
  • 1
    The function getMultilineFieldConfig() is protected, so a plugin won't work here :-/ – Giel Berkers May 26 '16 at 12:52
  • how you have done this ..can you share me full code – SUBBULAKSHMI G Oct 26 '18 at 10:11
16

The best solution for me was to base yourself in the same method mentioned above: (getMultilineFieldConfig)

However creating a NEW MODULE.

In your new or existing module, add Magento_Checkout in the node sequence (VendorName/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="VendorName_ModuleName" setup_version="1.0.0">
    <sequence>
        <module name="Magento_Checkout"/>
    </sequence>
</module>

Now, set dependency injection for Magento\Checkout\Block\Checkout\LayoutProcessor

(VendorName/ModuleName/etc/frontend/di.xml):

<?xml version="1.0"?>
<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\LayoutProcessor">
        <plugin name="vendorname_modulename" type="VendorName\ModuleName\Block\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

What is missing is to create the block (VendorName/ModuleName/Block/LayoutProcessor.php):

<?php
namespace VendorName\ModuleName\Block;

class LayoutProcessor
{
     /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
     public function afterProcess(
         \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
         array  $jsLayout
     ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
        'component' => 'Magento_Ui/js/form/components/group',
        'label' => __('Address'),
        'required' => true,
        'dataScope' => 'shippingAddress.street',
        'provider' => 'checkoutProvider',
        'sortOrder' => 60,
        'type' => 'group',
        'children' => [
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '0',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'additionalClasses' => 'additional',
                'label' => __('Street')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '1',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('Number')
            ],
            [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '2',
                'provider' => 'checkoutProvider',
                'validation' => true,
                'label' => __('District')
                ]
            ]

        ];

         return $jsLayout;
     }
 }

Result: enter image description here

  • How do I add field validation in these text box, becoz my default validation not working after doing this ? – Ashish Jagnani Sep 22 '16 at 9:31
  • 4
    @AshishJagnani, use 'validation' => ["required-entry"=>true,"max_text_length"=>255,"min_text_length"=>1] - worked for me – peter.gulyas Oct 20 '16 at 13:11
  • This is will solve Client side Validation. Say Max Lenth 255. Somebody Inspect & Change. What about server side validation? – Ankit Shah Dec 6 '16 at 7:58
  • Need to Put Max Length for Street Address Fields. How to do that? – Ankit Shah Dec 6 '16 at 8:24
  • 1
    is it possible to do same for the billing address ? – Dhaval Solanki Apr 3 '18 at 4:41

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.