Magento2 – Fix Error: Cannot Call Methods on PriceBox Prior to Initialization

configurable-productconfigurable-product-optionsjavascriptmagento2PHP

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.

Best Answer

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>
Related Topic