0

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.

enter image description here

The field attributes:

enter image description here

Thanks!

2 Answers 2

1

The field name should be universal, just like the condition in the template. Do not create conditions based on the name "document_type".

Add the image, imageSrc to your component (e.g. after 'label' key) in LayoutProcessor like this:

app/code/Vendor/Module/Plugin/Checkout/Model/Checkout/LayoutProcessor.php

$shippingFieldsetChildren['document_type'] = [
     ...
     'label' => __('Document Type'),
     'image' => true, //if you want to display image in template, false if not
     'imageSrc' => "imageSrc.jpg",
     ...
 ];

...then go to template and use like this:

app/design/frontend/Vendor/default/Magento_Ui/web/templates/form/field.html

<!-- ko if: element.image -->
    <img data-bind="attr: { src: element.image, alt: "..." }" >
<!-- /ko -->

Remember that you are editing the global template. If you only want to change the template in one place, you can copy it, modify it and assign it to this component.

If my answer helped you - mark it. Thanks

1
  • 1
    Thanks! this works like a charm, I will be careful because as you mention it is a global template and the checkout uses this template to render the form :). Thank you Aug 24, 2023 at 15:41
1

You can add image in html like:

<img data-bind="attr: { src: require.toUrl('images/img.jpg') }" />

image path should be:

app/design/frontend/{Package}/{theme}/web/images

Reference: Add a credit card logo next to Pay By Card in Payment page

1
  • Thanks to @GieDe I have been able to add the property in component, also the condition and html image tag in template. With your help I have been able to add the static image url. thank you Aug 24, 2023 at 15:54

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.