Magento2 checkout form: How to display placeholder attribute value in fields?

Question

Goodmorning Stackoverflow,

I'm customizing the checkout onepage in Magento 2. Now I'm trying to display placeholders instead of labels in the shipping-address form, but no success till now. I hope someone can help me out

Cheers, Jorge

UPDATE:

In the console i can see a variable is giving to the attribute placeholder of the element input.

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder, // <<<< right here
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" name="street[0]" placeholder="" aria-describedby="notice-BVWUCFN" id="BVWUCFN">

Now i would like to know if theres is a way to modify this variable via the backend, so i can display label name in the placeholder attr. See screenshot

Apoligies for my bad english

You need to be more specific and show us some code of your attempts so we can help you. — James, Feb 15 '16 at 10:11

score 8 · Accepted Answer · edited May 23 '17 at 12:09

8

Standard way,

Copy all html files from vendor/magento/module-ui/view/frontend/web/templates/form/element/ at app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/form/element/

Then change all Change placeholder: placeholder to placeholder: label as mention by Akis Verillis.

Now you need to deploy the static files by below code:

 php bin/magento setup:static-content:deploy

And see the magic.

Note: If you have checkout from github then try copy from

/app/code/Magento/Ui/view/base/web/templates/form/element/

edited May 23 '17 at 12:09

Community

1
1

answered Apr 05 '16 at 07:34

Amit Bera

7,581
7
31
57

Thank you very much @Amit. I already did that. it works like a charm. I couldnt vote on your answer cause not enough earn-points – Jorge Fernandez Apr 06 '16 at 09:09
Can we remove the overlapping label field too? I wish I could meet and give the Front End Developer of Checkout on M2 some words... – TheBlackBenzKid Jan 31 '17 at 08:48
how can we add different worl like label is 'name' and placeholder is 'insert your name'? – Ketan Borada Apr 25 '18 at 11:44

score 3 · Answer 2 · edited Apr 05 '16 at 07:24

3

Change placeholder: placeholder to placeholder: label

edited Apr 05 '16 at 07:24

Amit Bera

7,581
7
31
57

answered Feb 26 '16 at 10:04

Akis Verillis

31
1

Daniel Ifrim · Answer 3 · 2016-05-01T20:07:13.823

The answer is in Magneto 2 documentation now: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_edit_form.html The templates are the ones mentioned in previous answers. The templates from magento-ui module are used in other places than checkout.

In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add content similar to the following:

...
<referenceBlock name="checkout.root">
<arguments>
    <argument name="jsLayout" xsi:type="array">
        ...
        <item name="shippingAddress" xsi:type="array">
            <item name="children" xsi:type="array">
                <!-- The name of the form the field belongs to -->
                <item name="shipping-address-fieldset" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <!-- the field you are customizing -->
                        <item name="telephone" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <!-- Assigning a new template -->
                                <item name="elementTmpl" xsi:type="string">%Vendor_Module%/form/element/%your_template%</item>

%Vendor_Module%/form/element/%your_template% path is [your theme dir]/Vendor_Module/web/template/form/element/your_template.html

Clear browser cache too beside: Delete all files in the pub/static/frontend and var/view_preprocessing directories.

To customize billing address you need to extend Magneto/Checkout/Block/Checkout/LayoutProcessor.php because in my version (2.1.5) all values are hardcoded. Hope this info will help you — Macas, Apr 25 '17 at 11:40

score 1 · Answer 4 · edited Apr 05 '16 at 07:24

If this is useful for you, the definition of that element is in: /app/code/Magento/Ui/view/base/web/templates/form/element/input.html It defines an input as:

<input
class="admin__control-text"
type="text"
data-bind="
    value: value,
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
}" />

score 1 · Answer 5 · answered May 21 '20 at 08:06

You can add placeholder item to a layout.xml file for your field. Just like this:

<item name="address" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
   <item name="customScope" xsi:type="string">contactForm</item>
   <item name="template" xsi:type="string">ui/form/field</item>
   <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
<item name="placeholder" xsi:type="string">Address</item>
<item name="dataScope" xsi:type="string">address</item>
<item name="label" xsi:type="string">Address</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="validation" xsi:type="array">
  <item name="required-entry" xsi:type="string">true</item>
</item>

Magento2 checkout form: How to display placeholder attribute value in fields?

5 Answers5