magento 2.3.6 - Error: cannot call methods on priceBox prior to initialization

Question

I try to add configurable options in a custom modal page (quick view). But when I open that modal I have the following error:

Error: cannot call methods on priceBox prior to initialization

and the configurable options dropdown is empty:

enter image description here

this is my custom - form.phtml

<div class="product-add-form">
 <form action="<?php /* @escapeNotVerified */ echo $block->getSubmitUrl($_product) ?>" method="post"
 id="product_addtocart_form_quickview"<?php if ($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
 <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
 <input type="hidden" name="selected_configurable_option" value="" />
 <input type="hidden" name="related_product" id="related-products-field" value="" />
 <?php echo $block->getBlockHtml('formkey')?>
 <?php echo $block->getChildHtml('form_top'); ?>
 <?php if (!$block->hasOptions()):?>
 <?php echo $block->getChildHtml('product_info_form_content'); ?>
 <?php else:?>
 <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
 <?php echo $block->getChildChildHtml('options_container') ?>
 <?php endif;?>
 <?php endif; ?>
 <?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
 <?php echo $block->getChildChildHtml('options_container') ?>
 <?php endif;?>
 <?php echo $block->getChildHtml('form_bottom'); ?>
 </form>
</div>
<script>
 require([
 'jquery',
 'priceBox'
 ], function($){
 var dataPriceBoxSelector = '[data-role=priceBox]',
 dataProductIdSelector = '[data-product-id=<?php echo $block->escapeHtml($_product->getId())?>]',
 priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
 priceBoxes = priceBoxes.filter(function(index, elem){
 return !$(elem).find('.price-from').length;
 });
 priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>});
 });
</script>

Is very strange because in the product view page I have the dropdown working fine, all the options are in place ....

Anyone have any idea what is strange or how I can made that dropdown to display the options?

Thank you in advance.

Answer 1

It sounds like the PriceBox jQuery widget hasn't been initialised yet.

From looking through the code it appears this is how it is initialised on the product page:

<script type="text/x-magento-init">
 {
 "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($_product->getId()) ?>]": {
 "priceBox": {
 "priceConfig": <?= /* @noEscape */ $block->getJsonConfig() ?>
 }
 }
 }
</script>

So I imagine you'll need to do something similar.

Another example taken from the listing page:

<script type="text/x-magento-init">
 {
 "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($productId) ?>]": {
 "priceBox": {
 "priceConfig": {
 "priceFormat": <?= /* @noEscape */ $block->getPriceFormatJson(); ?>,
 "prices": <?= /* @noEscape */ $block->getPricesJson(); ?>
 }
 }
 }
 }
</script>

• Robert: Hi Ben, I put your code and now I have other something like this: domain.co.uk/quickview/product/quickview/id/9754/…, can you check the error here: shorturl.at/ksR89 , you need to put the mouse over product and the quick view with the problem is the first eye icon, not the second ... thank you very much in advance