0

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 \Magento\Catalog\Block\Product\View\Options\Type\Text */ ?>
<?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() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::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() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::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

Improve this question

1 Answer 1

Reset to default
0

You've pointed to documentation and just copied example of use but you didn't update selectors in your code

It should be something like:

<?php $scriptString = <<<script

require(['jquery', 'remainingCharacters'], function($){
    'use strict';

    $("#options_{$block->escapeHtmlAttr($_option->getId())}_text").remainingCharacters({
        maxLength: {$_option->getMaxCharacters()},
        noteSelector: '.amprot-note_{$block->escapeHtmlAttr($_option->getId())}',
        counterSelector: '.amprot-note_{$block->escapeHtmlAttr($_option->getId())} .amprot-character-counter'
    });
});
script;
?>
Improve this answer
1
  • I swear I got to that point last week, updating the selectors and it still wasn't working. It is working now. Thank you!
    – cjochum
    Jun 13, 2022 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.