Creating a compatibility module for Bss_ConfiguableGridView

[pabodah]

I have to implement Bss_ConfiguableGridView in breeze theme.

There is a requirejs-config.js added which has
map: { '*': { "custompricebox":'Bss_ConfiguableGridView/js/custompricebox', 'bss/swatch': 'Bss_ConfiguableGridView/js/swatch', 'bss/configurable': 'Bss_ConfiguableGridView/js/swatch/configurable' } },

Bss_ConfiguableGridView/js/swatch/configurable is not loading in the frontend.
So I added <item name="Bss_ConfiguableGridView/js/swatch/configurable" xsi:type="string">Bss_ConfiguableGridView/js/breeze/swatch/configurable</item> in breeze_default.xml and also added Bss_ConfiguableGridView/js/swatch/configurable in /Bss_ConfiguableGridView/web/js/breeze/swatch/configurable.js

The configurable.js has a return function.

How can I get to load the file in the frontend and fire the methods?
Please help. Thank you

[vovayatsyuk]

The "name" part should be the component's name used in the template. For example, if you have this HTML:

<div data-mage-init='{"menu": {}}'></div>

Then you have to use the "menu":

<item name="menu" xsi:type="string">Vendor_Module/js/breeze/menu</item>

Source: https://breezefront.com/docs/components

p.s. You can also pass multiple "names". See the full featured example: https://breezefront.com/docs/components#component-registration

[pabodah]

They have added the following in the .phtml file

<script type="text/x-magento-init"> { "*": { "Bss_ConfiguableGridView/js/swatch/configurable": { "configuable_qty_price_array": <?php echo json_encode($array, JSON_FORCE_OBJECT); ?>, "jsonSwatchConfig": <?php /* @escapeNotVerified */

So I guess Bss_ConfiguableGridView/js/breeze/swatch/configurable is correct to be used as in
<item name="Bss_ConfiguableGridView/js/swatch/configurable" xsi:type="string">Bss_ConfiguableGridView/js/breeze/swatch/configurable</item>

But yet the JS file functions are not being called.

[vovayatsyuk]

XML instruction is only responsible for adding the js file in the head section.

Is Bss_ConfiguableGridView/js/breeze/swatch/configurable file included in the head?

If yes, then check if component: 'Bss_ConfiguableGridView/js/swatch/configurable', is added to the component.

Source: https://breezefront.com/docs/components#component-declaration

[pabodah]

I have added the following

        <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="Bss_ConfiguableGridView/js/swatch/configurable" xsi:type="string">Bss_ConfiguableGridView/js/breeze/swatch/configurable</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

The file, Bss_ConfiguableGridView/js/swatch/configurable loads in the frontend.

The above JS has a return function such as...

define(
    [
        'jquery',
        'mage/url',
        'mage/translate',
        'mage/template',
        'underscore'
    ],
    function ($, urlBuilder, $t, mageTemplate, _) {
        'use strict';
        return function (config) {
            debugger
            window.configuable_qty_price_array = config.configuable_qty_price_array;
            window.old_configuable_qty_price_array = config.configuable_qty_price_array;
            window.bss_optionAmount = '';
            window.bss_configurablegridview_timer = '';
            var jsonSwatchConfig = config.jsonSwatchConfig,
                jsonAttrLabelConfig = config.jsonAttrLabelConfig,
                isDisplayBothPrices = parseInt(config.isDisplayBothPrices) == true;
            var messageTierPrice = config.messageTierPrice,
                dataProduct = config.dataProduct,
                configATPrice = config.configATPrice,
                configTableTP = config.configTableTP,
                urlAjax = config.urlAjax;
            var optionPrice = 0;

            $('.item-info .bss-swatch').swatch(
                {
                    jsonConfig: config.jsonConfig,
                    jsonSwatchConfig: jsonSwatchConfig,
                    mediaCallback: config.mediaCallback,
                    onlyMainImg: config.mediaCallback,
                    magentoVersion: config.magentoVersion,
                }
            );
        };

    }
);

The debugger doesn't get executed. Does this mean I cannot use the return function?

[pabodah]

Issue was resolved...

[vovayatsyuk]

Breeze doesn't support the automatic initialization of returned functions: https://breezefront.com/docs/integration-tips#migrate-functions

Could you please share your solution for other users?