Breeze Luma and Mageworx Advanced Product Options + Integration errors on ProductPage

[magewiz]

Hi there,

I have installed Breeze on my Luma theme, I have Mageworx Advanced Product Options + Integration

When deployed the website I get console error logs:

The most interesting part is that the errors are present (and the website is not working) when the devtools console is open. When closed, the website works fine (acts like the errors are not present)

Locally I don't have these errors in the console log.

Any ideas how to resolve this?

P.S

I have the latest Mageworx, latest Swissup modules, latest Magento 2.4.8-p2 and PHP 8.3

[vovayatsyuk]

1. Can you check if MageWorx JS files are loaded without errors?
2. Please provide a URL to your page. It's not possible to check what is wrong without the actual page.

[magewiz]

Hello @vovayatsyuk , thanks for your reply.

The MageWorx JS is loaded.
Please check https://m2.stitchylizard.com/64000-gildan-softstyler-t-shirt-100-ring-spun-cotton.html the optimizations / JS bundling is turned off. The website is in developer mode so the debugging goes much easier.

[vovayatsyuk]

Sorry for the delay.

Some of the integration modules are activated product bundle. We no longer support these bundles to be initially active due to performance optimizations. (I think we also should disallow activating them manually to prevent these kinds of issues)

Look for this code and remove <item name="active" xsi:type="boolean">true</item>:

...
<argument name="bundles" xsi:type="array">
    ...
    <item name="product" xsi:type="array">
        <item name="active" xsi:type="boolean">true</item>
        ...
    </item>
</argument>

In the latest Breeze version, these bundles are initially active only: main, run, knockout, core

[magewiz]

Thanks @vovayatsyuk that worked.

I've loaded the JS as

<referenceBlock name="breeze.js">
        <arguments>
            <argument name="bundles" xsi:type="array">
                <item name="product" xsi:type="array">
                    <item name="active" xsi:type="boolean">true</item>
                    <item name="items" xsi:type="array">
                        <item name="priceFormulaBreeze" xsi:type="array">
                            <item name="path" xsi:type="string">Bointsoft_PriceFormula/js/price-options-breeze</item>
                            <item name="import" xsi:type="array">
                                <item name="priceOptions" xsi:type="string">priceOptions</item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock> 

And I had to replace it with

<referenceBlock name="breeze.js">
    <arguments>
        <argument name="assets" xsi:type="array">
            <item name="priceFormula" xsi:type="string">Bointsoft_PriceFormula::js/price-options-breeze.js</item>
        </argument>
    </arguments>
 </referenceBlock>

Please let me know if I did it right. Thanks again

[vovayatsyuk]

Glad it helped!

Using <argument name="assets" xsi:type="array">, you've moved your script to the head. It's not a good practice because the more scripts contain the head, the more time the browser will spend on parsing these scripts before firing DOMContentLoaded event.

If you want to include your scripts on all pages, I recommend placing them in the default bundle.

Since this is not a real component that we usually call later in the HTML code, but a plain script that you want to execute on domload event, you also need to add the autoload parameter:

<referenceBlock name="breeze.js">
    <arguments>
        <argument name="bundles" xsi:type="array">
            <item name="default" xsi:type="array">
                <item name="items" xsi:type="array">
                    <item name="priceFormulaBreeze" xsi:type="array">
                        <item name="path" xsi:type="string">Bointsoft_PriceFormula/js/price-options-breeze</item>
                        <item name="autoload" xsi:type="boolean">true</item>
                        <item name="import" xsi:type="array">
                            <item name="priceOptions" xsi:type="string">priceOptions</item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>