BUG :: $.breeze.url helper is not working since latest breeze release

[sandipansaha]

Hi @vovayatsyuk

We have noticed that $.breeze.url helper is not working since the latest breeze updates.

Also, we have noticed that the it works when the JS merge is enabled, BUT does not work when JS merge is disabled.
Could it be possibly due to Swissup_Breeze/js/common/url being loaded dynamically?

How can we overcome this or something fundamental has been change?
You can check it here - https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/

Thanks

[vovayatsyuk]

Yes, this js was moved to dynamic. You need to update your code similar to Luma:

define(['mage/url'], (url) => {
    // not you can use url.build
    url.build()
    // p.s. $.breeze.url will be available here too
});

[vovayatsyuk]

I found one more issue. You need to add import statement for all components. Otherwise Breeze can't properly load dependencies in correct order. In your case you need define imports for both Magento_ProductRecommendationsLayout/js/abstractRenderer and Swissup_BreezeMagentoEnterprise/js/product-recommendations/layoutRenderer

Do you use our integration module? I will update it shortly because it's not updated according latest breeze requirements.

[sandipansaha]

Hi @vovayatsyuk
Thank you for the information.

Yes, I am using the Swissup_BreezeMagentoEnterprise module. I have used the import the way it is defined in Swissup_BreezeMagentoEnterprise.
My XML -

        <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="Magento_ProductRecommendationsLayout/js/layoutRenderer" xsi:type="array">
                                <item name="import" xsi:type="array">
                                    <item name="Magento_ProductRecommendationsLayout/js/layoutRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/layoutRendererMixin</item>
                                    <item name="abstractRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                </item>
                            </item>
                            <item name="Magento_PageBuilderProductRecommendations/js/pageBuilderRenderer" xsi:type="array">
                                <item name="import" xsi:type="array">
                                    <item name="Magento_ProductRecommendationsLayout/js/pageBuilderRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/pageBuilderRendererMixin</item>
                                    <item name="abstractRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

Also, I have tried to define the new mixin in the way. In that case it gets the layoutRenderer mixin but the abstractRenderer mixin does not work. Probably abstractRenderer is defined as import but not as individual component or I am doing something wrong?
Please let me know.

I tried this codes -

        <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="abstractRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="abstractRenderer" xsi:type="string">Magento_ProductRecommendationsLayout/js/abstractRenderer</item>
                                </item>
                            </item>
                            <item name="layoutRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/layoutRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="layoutRenderer" xsi:type="string">Magento_ProductRecommendationsLayout/js/layoutRenderer</item>
                                </item>
                            </item>
                            <item name="pageBuilderRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/pageBuilderRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="pageBuilderRenderer" xsi:type="string">Magento_PageBuilderProductRecommendations/js/pageBuilderRenderer</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

[vovayatsyuk]

Just made a fix in integration module. Can you try if it helps?

[sandipansaha]

Thanks @vovayatsyuk

It seems to be working now.

However, I believe, you may have forgotten to remove the abstractRenderer-register from the pageBuilderRenderer section.

Its not available in composer yet. Please let me know when it is pushed. Will wait for that.
Thank you again.

[vovayatsyuk]

Thanks! Yes, I forgot to remove that one 👍

[JDavidVR]

Hi @vovayatsyuk

I'm still confused, below is the script I've created for leafleatjs, but not sure how to inject 'define(['mage/url'], (url) => {' ?

FilePath: app/code/LeafletJs/LeafletJs/view/frontend/web/js/script.js
ScriptContent:

(function () {
    'use strict';

    $.widget('leafleat', {
        component: 'LeafletJs_LeafletJs/js/leaflet',
        create: function () {
        
        $.ajax({
                url: $.breeze.url.build('map/data/source'),
                method: 'get',
                success: (data, response) => {
                   // marker logic
                },
                complete: (response) => {
                },
                error: (response, error) => {
                    console.log(error);
                },
            });
    });
})();       

[vovayatsyuk]

In recent breeze versions you can write js just like in Luma:

define(['mage/url'], (url) => {
    'use strict';

    $.widget('leafleat', {
        component: 'LeafletJs_LeafletJs/js/leaflet',
        create: function () {
            $.ajax({
                url: url.build('map/data/source'),
                method: 'get',
                success: (data, response) => {
                   // marker logic
                },
                complete: (response) => {
                },
                error: (response, error) => {
                    console.log(error);
                },
            });
        }
    });
});