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:

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>