Skip to content

Remaining Characters on Product Configure in Admin

I’d like to add a remaining character count to the configure product screen when an order is created through the Admin.

enter image description here

Like it does on the customer-facing side.

enter image description here

I have created a new module. I’d like to use the Remaining Characters widget that Magento has. I’ve copied that widget file into my module because I wasn’t sure …

Files from my module:

/app/code/Vendor/Module/view/adminhtml/layout/CATALOG_PRODUCT_COMPOSITE_CONFIGURE.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
<body>
    <referenceBlock name="product.composite.fieldset.options.text">
        <action method="setTemplate">
            <argument name="template" translate="true" xsi:type="string">Vendor_Module::catalog/product/composite/fieldset/options/type/text.phtml</argument>
        </action>
    </referenceBlock>
</body>
</layout>

/app/code/Vendor/Module/view/adminhtml/templates/catalog/product/composite/fieldset/options/type/text.phtml

In this file I’ve tried a few different things, but none of them seem to work.

<?php /* @var $block MagentoCatalogBlockProductViewOptionsTypeText */ ?>
<?php $_option = $block->getOption(); ?>
<div class="field admin__field<?= $_option->getIsRequire() ? ' required _required' : '' ?>">
<label class="admin__field-label label">
    <?= $block->escapeHtml($_option->getTitle()) ?>
    <?= /* @noEscape */ $block->getFormattedPrice() ?>
</label>
<div class="control admin__field-control">
    <?php if ($_option->getType() == MagentoCatalogApiDataProductCustomOptionInterface::OPTION_TYPE_FIELD) :?>
        <input type="text"
               id="options_<?= $block->escapeHtmlAttr($_option->getId()) ?>_text"
               class="input-text admin__control-text <?= $_option->getIsRequire() ? ' required-entry' : '' ?> <?= $_option->getMaxCharacters() ? ' validate-length maximum-length-' . (int) $_option->getMaxCharacters() : '' ?> product-custom-option"
               name="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
               data-selector="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
               value="<?= $block->escapeHtmlAttr($block->getDefaultValue()) ?>"
               price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>" />
    <?php elseif ($_option->getType() == MagentoCatalogApiDataProductCustomOptionInterface::OPTION_TYPE_AREA) :?>
        <textarea id="options_<?= $block->escapeHtmlAttr($_option->getId()) ?>_text"
                  class="admin__control-textarea <?= $_option->getIsRequire() ? ' required-entry' : '' ?> <?= $_option->getMaxCharacters() ? ' validate-length maximum-length-' . (int) $_option->getMaxCharacters() : '' ?> product-custom-option"
                  name="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                  data-selector="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                  rows="5"
                  cols="25"
                  price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>"><?= $block->escapeHtml($block->getDefaultValue()) ?></textarea>
    <?php endif;?>

    <?php if ($_option->getMaxCharacters()) :?>
        <p class="note amprot-note_<?= $block->escapeHtmlAttr($_option->getId()) ?>">
            <?= $block->escapeHtml(__('Maximum number of characters:')) ?> <strong><?= (int) $_option->getMaxCharacters() ?></strong>
            <span class="amprot-character-counter no-display"></span>
        </p>
    <?php endif; ?>
</div>
</div>
<?php if ($_option->getMaxCharacters()): ?>
<?php $scriptString = <<<script

require(['jquery',
'remainingCharacters'], function(jQuery){

'use strict';

    jQuery("#remaining-characters").remainingCharacters({
        maxLength: 5,
        noteSelector: '.note',
        counterSelector: '.note .character-counter'
    });

});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<?php endif; ?>

/app/code/Vendor/Module/view/adminhtml/requirejs-config.js

var config = {
paths: {
'remainingCharacters': 'Vendor_Module/js/remaining-characters'
},
shim: {
'remainingCharacters': {
  deps: ['jquery']
}
}
};

/app/code/Vendor/Module/view/adminhtml/web/js/remaining-characters.js

This is just a duplicate of /vendor/magento/module-catalog/view/frontend/web/js/product/remaining-characters.js