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>

1 Answer 1

1

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 -->
1
  • Thank you! I am still new to M2 and the whole knockout JS thing.
    – cbartell
    Nov 17, 2021 at 17:23

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.