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

Answer 1

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 2

Change placeholder: placeholder to placeholder: label

Answer 3

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.

Answer 4

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 5

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