0

I'm trying to add placeholder to email input box.
For that I prepared layout overwrite in my custom theme in Magento_Checkout/layout/checkout_index_index.xml

                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">

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

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

                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">

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

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

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

                                                    <item name="customer-email" xsi:type="array">
                                                        <item name="config" xsi:type="array">
                                                            <item name="placeholder" xsi:type="string" translate="true">Please enter your valid email address</item>
                                                        </item>
                                                    </item>

Email is controlled by Amazon_Payment module, so I created in my theme
web/template/form/element/email.html

<form class="form form-login" data-role="email-with-possible-login"
      data-bind="submit:login"
      method="post">
    <fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
        <div class="field required">
            <label class="label" for="customer-email">
                <span data-bind="i18n: 'Email Address ohoho'"></span>
            </label>
            <div class="control _with-tooltip">
                <input class="input-text"
                       type="email"
                       data-bind="
                            placeholder: placeholder,
                            textInput: email,
                            hasFocus: emailFocused"
                       name="username"
                       
                       data-validate="{required:true, 'validate-email':true}"
                       id="customer-email" />
                <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
                <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
            </div>
        </div>  .........

Crucial line is in data-bind where I'v put placeholder and value for it.
In chrome dev tools I can see placeholder value (with knockout extension) but that value is not set in input.
https://prnt.sc/v4ia2p

How do I add custom text to email placeholder on checkout page (shipping)?

PS. label is edited correctly..added "ohohoh" to it and it shows

1 Answer 1

0

There is no custom binding for placeholder, you will have to use a different notation:

attr: {placeholder: placeholder}

Like this:

 <input class="input-text"
                       type="email"
                       data-bind="
                            textInput: email,
                            hasFocus: emailFocused,
                            attr: {placeholder: placeholder}"
                       name="username"
                       data-validate="{required:true, 'validate-email':true}"
                       id="customer-email" />
1
  • thank you, works fine now
    – psNoob
    Oct 22, 2020 at 12:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.