Magento2 checkout form: How to display placeholder

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

Answer 1

Change placeholder: placeholder to placeholder: label

Answer 2

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/

Answer 3

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>

Answer 4

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
}" />

Answer 5

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.