magento 2 Error: cannot call methods on priceBox prior to initialization; attempted to call method 'option'

Question

I am having an issue on my website

the issue

Error: cannot call methods on priceBox prior to initialization;
attempted to call method 'option'

My website https://www.cartaroo.com.cy/?SID=5fe6b01812786b8145c48eaa0fde65ad

When I click on homepage product icon a view popup and due to js issue it won't allow me to select drop down. screenshot http://prntscr.com/h33mg9

Please help

Answer 1

Solution: /app/design/frontend/Alpha/test/Magento_ConfigurableProduct/web/js/configurable.js:82

Old code:

        _initializeOptions: function () {
            var options = this.options,
                gallery = $(options.mediaGallerySelector),
                priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option').priceConfig || null;

New code:

        _initializeOptions: function () {
            var options = this.options,
                gallery = $(options.mediaGallerySelector);
            var priceBoxOptions = null;

            try {
                var priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option').priceConfig;
            }
            catch(err) {
                console.log('catch => '+err);
            }

This will not break others PDP js code. Thanks,

Answer 2

I have also faced this problem after migrating from Magento 2.1.6 to 2.2.5.

Issue was due to the theme file phtml with scripts

Old File : app/design/frontend/Mytheme/theme/Magento_Catalog/templates/product/view/form.phtml

<script>
  require([
    'jquery',
    'Magento_Catalog/js/price-box'
], function($){
    var priceBoxes = $('.product-info-price [data-role=priceBox]');

    priceBoxes = priceBoxes.filter(function(index, elem){
        return !$(elem).find('.price-from').length;
    });

    priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>});
});
</script>

Copy script from new vendor file in your theme:

New Code: vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

<script>
    require([
        'jquery',
        'priceBox'
    ], function($){
        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($_product->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length;
        });

        priceBoxes.priceBox({'priceConfig': <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>});
    });
</script>

Answer 3

I had the same problem with error

 cannot call methods on priceBox prior to initialization; attempted to call method 'option'

I was try to create price-box-mixin.js to extend mage.priceBox widget.

So it's the shame but that was my mistake. In the top of mixin I forgot to remove line 'Magento_Catalog/js/price-box'. At the beginning I was try to extend the widget mage.priceBox and I needed this line in section

define([
    'jquery',
    'Magento_Catalog/js/price-utils',
    'underscore',
    'mage/template',
    'jquery/ui',
    'Magento_Catalog/js/price-box'
], function ($, utils, _, mageTemplate) {

But after updating the script when I transform this script to mixin I needed to remove this line. So it became:

define([
    'jquery',
    'Magento_Catalog/js/price-utils',
    'underscore',
    'mage/template',
    'jquery/ui'
], function ($, utils, _, mageTemplate) {

I hope this helps someone to save time.

Answer 4

We ran into this error with a theme that allowed putting products in the top navigation menu. (It was a module called "Mega Nav".) When we added a product to the Mega Nav it broke all of our product pages that contained a dropdown with the error described above. Removing the product fixed the issue. We had a guess that loading the product for the purpose of putting it in the nav loaded some javascript too early.

Hope that helps someone fix this issue without going into code.

Answer 5

I had same issues and after days of brainstorming i discovered that solution does not require any code writing.

Goto your "Mega Menu" Disable any product menu item on the menu list and issue is resolved. See here - https://prnt.sc/n18cq5

Answer 6

You can make this fix by overriding the function _initializeOptions

in your module

Vendor_ModuleName/view/frontend/requirejs-config.js

var config = {
"map": {
    '*': {
        configurable: 'Vendor_ModuleName/js/configurable'
    },
} 
}

Vendor_ModuleName/view/frontend/js/configurable.js

define([
 'jquery',
 'jquery/ui',
 'Magento_ConfigurableProduct/js/configurable'
], function($){

 $.widget('test.configurable', $.mage.configurable, {
    _initializeOptions: function () {
      var dataProductIdSelector = '[data-product-id="' + this.options.spConfig.productId + '"]';
       priceBoxOptions = $(this.options.priceHolderSelector + dataProductIdSelector).priceBox('option').priceConfig || null;

        // rest of the code here....
    }
 });

 return $.test.configurable;
});