Zend certified PHP/Magento developer

magento 2.4 js console error “order.toggleCustomPrice is not a function”

on Magento backend admin can create a new order on behalf of the customer. Admin can also set a custom price for each item by clicking on the “custom price” checkbox right under the price.

I’m trying to recreate the same feature for the cart quote instead of an order, so that admin can be able to create a quote on behalf of the customer, then the customer logs into his/her account and proceed to payment.

The problem: I am able to create a new quote for the customer but I cannot set a custom price. This is my relevant phtml:

<?php if ($block->canApplyCustomPrice($_item)): ?>

 <div class="custom-price-block">
  <input type="checkbox" class="admin__control-checkbox" id="item_use_custom_price_<?= (int) $_item->getId() ?>"<?php if ($_isCustomPrice): ?> checked="checked"<?php endif; ?> />
  <label class="normal admin__field-label" for="item_use_custom_price_<?= (int) $_item->getId() ?>">
   <span><?= $block->escapeHtml(__('Custom Price')) ?>*</span>
  </label>
  <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
    'onclick',
    "order.toggleCustomPrice(this, 'item_custom_price_" . (int) $_item->getId() . "', 
     'item_tier_block_" . (int) $_item->getId() . "');",
     'input#item_use_custom_price_' . (int) $_item->getId()
    ) ?>
 </div>

 <?php endif; ?>

<input id="item_custom_price_<?= (int) $_item->getId() ?>" name="item[<?= (int) $_item->getId() ?>][custom_price]" value="<?= /* @noEscape */ sprintf("%.2f", $block->getOriginalEditablePrice($_item)) ?>" class="input-text item-price admin__control-text" <?php if (!$_isCustomPrice): ?> disabled="disabled" <?php endif; ?> />

<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display:none", 'input#item_custom_price_' . (int) $_item->getId() )?>

As you can see, it’s the same code from Magento::Salesordercreateitemsgrid.phtml, I simply copied what I needed in my custom template. Here, renderStyleAsTag() works fine but renderEventListenerAsTag() does not. When I click on the checkbox, the onclick event gets triggered but js console gives error. If I leave the code as it is, the error is “order. toggleCustomPrice is not defined” which makes sense because I haven’t loaded the scripts from the order create page on my custom page. But when when I try to call a custom js function that I wrote on my template file, I get the same error “toggleCustomPrice is not defined” or “this.toggleCustomPrice is not defined”.

So my question is:

  • either how can I load the original order.toggleCustomPrice() in my custom template
  • or how can I call my custom function in the renderEventListenerAsTag() method
    ?