I want to add html tags to the notice of a specific field, I tried in LayoutProcessor but it does not interpret the image tags, I know it is possible from the field.html file, but it did not work for me, the knockout js condition do not work, this is my code:
app/code/Vendor/Module/Plugin/Checkout/Model/Checkout/LayoutProcessor.php
$shippingFieldsetChildren['document_type'] = [
'component' => 'Magento_Ui/js/form/element/select',
'additionalClasses' => 'document_type',
'config' => [
'customScope' => 'shippingAddress.custom_attributes',
'customEntry' => null,
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/select'
],
'dataScopePrefix' => 'shippingAddress',
'dataScope' => 'shippingAddress.custom_attributes.document_type',
'label' => __('Document Type'),
'provider' => 'checkoutProvider',
'sortOrder' => 40,
'validation' => [
'required-entry' => true
],
'options' => $this->documentTypes->toOptionArray(),
'filterBy' => null,
'customEntry' => null,
'visible' => true,
'notice' => __('Validaremos tu documento para el descuento por ser suscriptor de El Tiempo.'),
];
app/design/frontend/Vendor/default/Magento_Ui/web/templates/form/field.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
<label class="label" data-bind="attr: { for: element.uid }">
<!-- ko if: element.label -->
<span translate="element.label"></span>
<!-- /ko -->
</label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() -->
<div class="control-addon">
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- ko if: element.addbefore -->
<label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
<!-- /ko -->
<!-- ko if: element.addafter -->
<label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: element.tooltip -->
<!-- ko template: element.tooltipTpl --><!-- /ko -->
<!-- /ko -->
<!-- ko if: element.notice -->
<div class="field-note" data-bind="attr: { id: element.noticeId }">
<!-- ko if: element.name === 'shippingAddress.custom_attributes.document_type' -->
<img src="" alt="">
<!-- /ko -->
<span data-bind="text: element.notice"/>
</div>
<!-- /ko -->
<!-- ko if: element.error() -->
<div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
<span data-bind="text: element.error"/>
</div>
<!-- /ko -->
<!-- ko if: element.warn() -->
<div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
<span data-bind="text: element.warn"/>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
I tried with:
<!-- ko if: element.name === 'shippingAddress.custom_attributes.document_type' -->
<img src="" alt="">
<!-- /ko -->
The img tag not display in document_type custom field.
The field attributes:
Thanks!