Magento2 - How to add placeholder to knockoutjs field?

Question

I'm editing app\design\frontend\Vendor\theme\Magento_Checkout\web\template\cart\shipping-estimation.html which handles the shipping and tax estimation in shopping cart page. Here is the code:

<form method="post" id="shipping-zip-form" class="shipping-zip-form">
<fieldset class="fieldset estimate">
    <p class="field note" data-bind="text: isVirtual ? $t('Enter your billing address to get a tax estimate.') : $t('Enter your destination to get a shipping estimate.')"></p>
    <!-- ko foreach: getRegion('address-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</fieldset>

from there, I know that it's being generated by knockout.js, so I searched around and found vendor\magento\module-ui\view\frontend\web\templates\form\element\input.html

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

and I also looked at this file

vendor\magento\module-ui\view\frontend\web\templates\form\field.html

which has this code

    <label class="label" data-bind="attr: { for: element.uid }">
        <!-- ko if: element.label -->
        <span data-bind="text: element.label"></span>
        <!-- /ko -->
    </label>

So from those 2 files, I assume the placeholder must be inserted to the 'element', and then in vendor\magento\module-checkout\view\frontend\layout\checkout_cart_index.xml , I tried this:

<item name="postcode" xsi:type="array">
    <!-- post-code field has custom UI component -->
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
    <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
    <item name="sortOrder" xsi:type="string">114</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="placeholder" xsi:type="string">testPlaceholder</item>
</item>

and I added this in vendor\magento\module-ui\view\frontend\web\templates\form\field.html

provider: -<span data-bind="text: element.provider"></span>-
placeholder: -<span data-bind="text: element.placeholder"></span>-

which outputs:

provider: -checkoutProvider- placeholder: --

Placeholder doesn't show up in front end. So, any idea how to add the placeholder there? Thanks

Answer 1

This is a bit of a shot in the dark, as I've only looked at it for around 15 minutes. But it looks as thought the placeholder is coming from the Abstract.js this file is located

Vender\Theme\Magento_Ui\web\js\form\element\abstract.js

This is the core location for it.

If you look at line 27 you'll see:

placeholder: ' ',

I am assuming this is the main Element that is extended. I dumped some data into this, I used the label:

placeholder: '${ $.label }',

This will take the parent label and drop it as a placeholder into any input with a label.

However what I think M2 want you to do is extend this Element again and build upon it, but I could be wrong. If anyone has more info on this please feel free to share.

Answer 2

You just need to wrap your placholder item in the config item.

<item name="config" xsi:type="array">

Add it like this below

<item name="postcode" xsi:type="array">
     <!-- post-code field has custom UI component -->
     <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
     <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
     <item name="sortOrder" xsi:type="string">114</item>
     <item name="provider" xsi:type="string">checkoutProvider</item>
     <item name="config" xsi:type="array">
         <item name="placeholder" xsi:type="string">Enter Postcode</item>
     </item>
</item>

You can add this code in your local checkout_cart_index.xml /app/design/frontend/{your_theme}/default/Magento_Checkout/layout/

this is an example for the shipping estimator in the cart page, this will add the placeholder text "Enter Postcode"

<?xml version="1.0" ?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
 <referenceBlock name="checkout.cart.shipping">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="block-summary" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="block-shipping" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="address-fieldsets" xsi:type="array">
                                        <item name="children" xsi:type="array"> 
                                            <item name="postcode" xsi:type="array">
                                                <!-- post-code field has custom UI component -->
                                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
                                                <item name="sortOrder" xsi:type="string">114</item>
                                                <item name="provider" xsi:type="string">checkoutProvider</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="placeholder" xsi:type="string">Enter Postcode</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
     </referenceBlock>
    </body>
</page>