Magento2 结帐表单:如何在字段中显示占位符属性值?
Magento2 checkout form: How to display placeholder attribute value in fields?
早上好 Whosebug,
我正在自定义 Magento 2 中的结帐单页。现在我试图在收货地址表单中显示占位符而不是标签,但直到现在都没有成功。希望有人能帮帮我
干杯,豪尔赫
更新:
在控制台中,我可以看到一个变量正在赋予元素输入的属性占位符。
<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">
现在我想知道是否有办法通过后端修改这个变量,这样我就可以在占位符属性中显示标签名称。
See screenshot
抱歉我的英语不好
将placeholder: placeholder
更改为placeholder: label
如果这对您有用,该元素的定义位于:
/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
它将输入定义为:
<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
}" />
标准方式,
从vendor/magento/module-ui/view/frontend/web/templates/form/element/
复制所有html个文件
在
app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/form/element/
然后将所有 placeholder: placeholder
更改为 placeholder: label
,如 Akis Verillis 所述。
现在您需要通过以下代码部署静态文件:
php bin/magento setup:static-content:deploy
看看魔术。
注意: 如果您从 github 结帐,请尝试从
复制
/app/code/Magento/Ui/view/base/web/templates/form/element/
答案现在在 Magneto 2 文档中:
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_edit_form.html
模板是前面答案中提到的模板。
来自 magento-ui 模块的模板用于结帐以外的其他地方。
在您的自定义模块目录中,创建一个新的 /view/frontend/layout/checkout_index_index.xml 文件。在此文件中,添加类似以下内容:
...
<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%
路径是[你的主题目录]/Vendor_Module/web/template/form/element/your_template.html
在旁边也清除浏览器缓存:
删除 pub/static/frontend 和 var/view_preprocessing 目录中的所有文件。
您可以将 placeholder
项添加到您的字段的 layout.xml 文件中。就像这样:
<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>
早上好 Whosebug,
我正在自定义 Magento 2 中的结帐单页。现在我试图在收货地址表单中显示占位符而不是标签,但直到现在都没有成功。希望有人能帮帮我
干杯,豪尔赫
更新:
在控制台中,我可以看到一个变量正在赋予元素输入的属性占位符。
<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">
现在我想知道是否有办法通过后端修改这个变量,这样我就可以在占位符属性中显示标签名称。 See screenshot
抱歉我的英语不好
将placeholder: placeholder
更改为placeholder: label
如果这对您有用,该元素的定义位于:
/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
它将输入定义为:
<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
}" />
标准方式,
从vendor/magento/module-ui/view/frontend/web/templates/form/element/
复制所有html个文件
在
app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/form/element/
然后将所有 placeholder: placeholder
更改为 placeholder: label
,如 Akis Verillis 所述。
现在您需要通过以下代码部署静态文件:
php bin/magento setup:static-content:deploy
看看魔术。
注意: 如果您从 github 结帐,请尝试从
复制/app/code/Magento/Ui/view/base/web/templates/form/element/
答案现在在 Magneto 2 文档中: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_edit_form.html 模板是前面答案中提到的模板。 来自 magento-ui 模块的模板用于结帐以外的其他地方。
在您的自定义模块目录中,创建一个新的 /view/frontend/layout/checkout_index_index.xml 文件。在此文件中,添加类似以下内容:
...
<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%
路径是[你的主题目录]/Vendor_Module/web/template/form/element/your_template.html
在旁边也清除浏览器缓存: 删除 pub/static/frontend 和 var/view_preprocessing 目录中的所有文件。
您可以将 placeholder
项添加到您的字段的 layout.xml 文件中。就像这样:
<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>