0

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.

1 Answer 1

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>
1
  • 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
    – Robert
    Sep 22, 2021 at 9:18

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.