Remaining Characters on Gift Message – Magento2.4.1 Guide

giftmessagemagento2magento2.4.1

I am trying to use Magento's RemainingCharacters Widget on the gift options message field. I want to limit the amount of characters in this field to 200. It doesn't even appear to be firing. What am I missing?

/app/design/frontend/THEME/default/Magento_GiftMessage/web/template/gift-message-form.html

<!-- ko if: isActive() -->
<div class="gift-message">
<div class="gift-options-title" style="display: none;">
    <span data-bind="i18n: 'Gift Message (optional)'"></span>
</div>
<div class="gift-options-content">
    <fieldset class="fieldset">
        <div class="field text" style="display: none;">
            <label for="gift-message-whole-message" class="label" style="display: none;">
                <span data-bind="i18n: 'Message:'"></span>
            </label>
            <div class="control">
                <textarea id="gift-message-whole-message"
                          class="input-text gift-message-text"
                          rows="5" cols="10"
                          data-bind="value: getObservable('message')" placeholder="Your Gift Message"
                          maxlength="200"></textarea>
                          <p class="note"><span class="character-count">200 characters remaining</span></p>
            </div>
        </div>
    </fieldset>
</div>
</div>
<!-- /ko -->

<script>
require([
    "jquery",
    "Magento_Catalog/js/product/remaining-characters",
    'domReady!'
], function ($) {
    'use strict';

    $('.gift-message-text').remainingCharacters({
        maxLength: 200,
        noteSelector: '.note',
        counterSelector: '.note .character-count'
    });
});
</script>

I tried to add the script to the text/x-magento-init tag in this file, but that also didn't seem to work.

/app/design/frontend/THEME/default/Magento_GiftMessage/templates/cart/gift_options.phtml

<div id="gift-options-cart" data-bind="scope:'giftOptionsCart'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
    {
        "#gift-options-cart": {
            "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
        },
        ".gift-message-text": {
            "Magento_Catalog/js/product/remaining-characters": {
                "maxLength":  "200",
                "noteSelector": ".note",
                "counterSelector": ".note .character-count"
            }
        }
    }
</script>
<?= /* @noEscape */ $secureRenderer->renderTag(
'script',
[],
'window.giftOptionsConfig = '. /* @noEscape */ $block->getGiftOptionsConfigJson(),
false
) ?>
</div>

Best Answer

In simple words, you should avoid using script tags in a UI component's template file (*.html). You should use mageInit data binding instead:

<!-- ko if: isActive() -->
<div class="gift-message">
<div class="gift-options-title">
    <span data-bind="i18n: 'Gift Message (optional)'"></span>
</div>
<div class="gift-options-content">
    <fieldset class="fieldset">
        <div class="field text">
            <label for="gift-message-whole-message" class="label">
                <span data-bind="i18n: 'Message:'"></span>
            </label>
            <div class="control">
                <textarea id="gift-message-whole-message"
                          class="input-text gift-message-text"
                          rows="5" cols="10"
                          data-bind="mageInit: {
                            'Magento_Catalog/js/product/remaining-characters': {
                                'maxLength': 200,
                                'noteSelector': '.note',
                                'counterSelector': '.note .character-count'
                            }
                          },
                          value: getObservable('message')"
                          placeholder="Your Gift Message"
                          maxlength="200"></textarea>
                          <p class="note"><span class="character-count">200 characters remaining</span></p>
            </div>
        </div>
    </fieldset>
</div>
</div>
<!-- /ko -->
Related Topic