JS Third party with breezy bundle

[gkopec]

Can you help me prepare the breeze_default.xml for this RequireJS setup?"

var config = {
    map: {
        '*': {
            'inPostPaczkomaty' : 'Smartmage_Inpost/js/inpost-paczkomaty',
        }
    },
    paths: {
        'inPostSdk': [
            'https://geowidget.inpost.pl/inpost-geowidget'
        ],
    },
};

inpost-paczkomaty component loads inPostSdk (https://geowidget.inpost.pl/inpost-geowidget.js) like this:

define([
    ...
    'inPostSdk',
], function () {
    'use strict';

    return {

There is also another component defined in checkout_index_index.xml

....
<item name="shippingAddress" xsi:type="array">
   <item name="children" xsi:type="array">
       <item name="inpostlocker_standard" xsi:type="array">
           <item name="component" xsi:type="string">Smartmage_Inpost/js/inpost-event</item>
           <item name="displayArea" xsi:type="string">inpostlocker_standard</item>
       </item>
....

What I've got is this:

        <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="inPostSdk" xsi:type="array">
                                <item name="path" xsi:type="string">https://geowidget.inpost.pl/inpost-geowidget</item>
                            </item>
                            <item name="Smartmage_Inpost/js/inpost-paczkomaty" xsi:type="array">
                                <item name="path" xsi:type="string">Smartmage_Inpost/js/inpost-paczkomaty</item>
                            </item>
                            <item name="Smartmage_Inpost/js/inpost-event" xsi:type="array">
                                <item name="path" xsi:type="string">Smartmage_Inpost/js/inpost-event</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

I also try with bundle called checkout:

<argument name="bundles" xsi:type="array">
                    <item name="checkout" xsi:type="array">

I think I am missing something because none of these js components seems to be loaded.

[vovayatsyuk]

Try loading the page with the ?breeze=1 parameter and check the console output. Breeze should report which components were found on the page but doesn’t know what to load.

I thinks you need to use inPostPaczkomaty alias in your xml:

<item name="inPostPaczkomaty" xsi:type="array">
    <item name="path" xsi:type="string">Smartmage_Inpost/js/inpost-paczkomaty</item>
</item>

Also, I recommend to start with dynamic bundle because it's working very similar to require js logic and you can even do this:

<referenceBlock name="breeze.js">
    <arguments>
        <argument name="bundles" xsi:type="array">
            <item name="dynamic" xsi:type="array">
                <item name="items" xsi:type="array">
                    <item name="inPostSdk" xsi:type="array">
                        <item name="path" xsi:type="string">https://geowidget.inpost.pl/inpost-geowidget</item>
                    </item>
                    <item name="inPostPaczkomaty" xsi:type="array">
                        <item name="path" xsi:type="string">Smartmage_Inpost/js/inpost-paczkomaty</item>
                    </item>
                    <item name="Smartmage_Inpost/*" xsi:type="array">
                        <item name="path" xsi:type="string">Smartmage_Inpost/*</item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

Smartmage_Inpost/* will automatically register all other files (if any)

[vovayatsyuk]

Sorry, I didn't notice that you told about checkout_index_index. Breeze is disabled on the checkout page, so you don't need to integrate checkout modules. It's hard to say what is going on, can you please contacts our support with ssh access details?

https://swissuplabs.com/contacts/

[vovayatsyuk]

1. Do not add ?breeze=1 on checkout page.
2. If your module for checkout, you don't need to integrate js part at all.

[gkopec]

Thank you @vovayatsyuk you helped me a lot! Just to be sure if breezy is disabled on the checkout page is it mean that Third-party view/frontend/web/css/source/_module.less will be working properly?

[vovayatsyuk]

Unfortunately styles are not included in Breeze Themes automatically becuase of high chance of getting the errors. The easiest way to include them is to use @import.

Here is how I did that for Magento Payments module: https://github.com/breezefront/module-breeze-magento-payment-services/blob/master/view/frontend/web/css/breeze/_checkout.less#L8-L9

If these styles are not for the checkout only, then use _default.less file.

p.s. Importing Luma styles in Breeze Theme will probably cause some errors about missing variables. For example, I added these variables to be able to import Magento_PaymentServicesPaypal::css/source/_module.less: https://github.com/breezefront/module-breeze-magento-payment-services/blob/master/view/frontend/web/css/breeze/_checkout.less#L1-L3

[gkopec]

I like the @import idea! Thank you so much for your effort!