3

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

  • Have you tried data-bind="text: placeholder"? – Ben Crook Jun 2 '17 at 9:40
  • That wont work ben, m2 has ko bindingHandlers for placeholders. Its just determining where the placeholder is being generated, finding the Handler is key. – andy jones Jun 2 '17 at 9:44
  • Ah damn it, was worth a try :P – Ben Crook Jun 2 '17 at 13:31
9

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.

enter image description hereenter image description here

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.

  • Thanks. this will at least add the placeholder there. Still don't know how to edit the placeholder content though.. So far I've checked vendor\magento\module-checkout\Block\Cart\LayoutProcessor.php. I can actually edit the label there, but not add placeholder. – zekkai Jun 5 '17 at 3:59
  • The placeholder isn't generated by php, its done through KO - you need to be looking inside of the js – andy jones Jun 5 '17 at 7:10
  • I found this question, and then I add this $jsLayout['components']['block-summary']['children']['block-shipping'] ['children']['address-fieldsets']['children']['postcode']['placeholder'] = __('Test Placeholder'); in LayoutProcessor.php just before return $jsLayout and it actually works. – zekkai Jun 5 '17 at 8:52
  • I tried this.. in shipping address checkout I need the placeholder for all fields.. after applying this placeholder , instead of taking shippingAddress.(name) it is taking admin field form elements via ko..what to do? – SUBBULAKSHMI G Oct 18 '18 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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