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
-
I am also facing same issue for configurable product with Preorder. we have used VES Theme. if you find any help then please share with us– Pramod KharadeFeb 14, 2018 at 9:27
-
Please check below link if it helps : community.magento.com/t5/Technical-Issues/…– Himmat PaliwalMar 26, 2018 at 9:52
-
github.com/magento/magento2/issues/14211 This fixes the issue. Not sure why magento is not keen to apply this.– Adarsh KhatriFeb 13, 2021 at 6:27
6 Answers
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,
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>
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.
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.
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
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;
});