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: