Amasty MegaMenu

[yasser-moudouani]

Hi team,

I'm working on compatibily of menu Amasty_MegaMenuLite (and Amasty_MegaMenu) and i do something like this to import the JS on bundles and fire the execution of code but it's seems imports and deps not triggered as a result

define([
    'jquery',
    'uiComponent',
    'ammenu_helpers',
    'uiRegistry'
], function ($, Component, helpers, registry) {
    'use strict';

    Component.register('Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu');
    $.mixin('Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu', {
        defaults: {
            templates: {
                itemsAccordion: 'Amasty_MegaMenuLite/sidebar_menu/accordion/items/wrapper'
            },
            components: [
                'index = ammenu_wrapper'
            ],
            imports: {
                hamburger_animation: 'index = ammenu_wrapper:hamburger_animation',
                animation_time: 'index = ammenu_wrapper:animation_time',
                root_templates: 'index = ammenu_wrapper:templates',
                color_settings: 'index = ammenu_wrapper:color_settings',
                settings: 'index = ammenu_wrapper:settings',
                is_hamburger: 'index = ammenu_wrapper:is_hamburger',
                icons: 'index = ammenu_wrapper:icons',
                is_icons_available: 'index = ammenu_wrapper:is_icons_available',
                mobile_class: 'index = ammenu_wrapper:mobile_class',
                isOpen: 'index = ammenu_hamburger_toggle:isOpen',
                activeTab: 'index = ammenu_tabs_wrapper:activeTab',
                hide_view_all_link: 'index = ammenu_wrapper:hide_view_all_link'
            }
        },
        initialize: function (parent) {
            this.source = registry.get('index = ammenu_wrapper');
            parent();

            return this;
        },

My point here it's when this component is loaded by uiLayout => layout([componentDefinition]); deps or imports are ignored the "code" was not interpreted for example in the code I add manually a uiRegistry in the code to force source to be populated.

I force populate this.source by adding this this.source = registry.get('index = ammenu_wrapper');

The code of the component previously showed is called like this

define([
    'jquery',
    'uiComponent',
    'ammenu_template_loader'
], function ($, Component, templateLoader) {
    'use strict';

    Component.register('Amasty_MegaMenuLite/js/wrapper');

    $.mixin('Amasty_MegaMenuLite/js/wrapper', {
        defaults: {
            components: {
                ammenu_sidebar_menu_wrapper: {
                    name: 'ammenu_sidebar_menu_wrapper',
                    component: 'Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu',
                    template: 'Amasty_MegaMenuLite/sidebar_menu/sidebar_menu',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                },

And here how i can declare the component in the breeze_default.xml

<item name="Amasty_MegaMenuLite/js/wrapper" xsi:type="array">
                                <item name="path" xsi:type="string">MyVendor_MegaMenu/js/breeze/wrapper-mixin</item>
                                <item name="import" xsi:type="array">
                                    <item name="ammenu_template_loader" xsi:type="string">ammenu_template_loader</item>
                                    <item name="ammenu_helpers" xsi:type="string">ammenu_helpers</item>
                                    <item name="ammenu_color_helper" xsi:type="string">ammenu_color_helper</item>
                                    <item name="parent" xsi:type="string">Amasty_MegaMenuLite/js/wrapper</item>
                                </item>
                            </item>

Do you have any tips since I see there some module for amasty vendor ?

Regards,
Yasser

[yasser-moudouani]

After searching in other topics I found this https://github.com/orgs/breezefront/discussions/384#discussioncomment-13625611
It's tell that breeze doesn't support links, imports, and exports keywords so I tried to use the js file mentionned but I don't really how I can fire the code on loading components collection

$.breezemap.uiLayout = (nodes) => {
        $(document).one('breeze:load', () => {
            nodes.forEach(node => {
                node.index = node.ns = node.name;
                if (node.parent) {
                    // eslint-disable-next-line max-nested-callbacks
                    $.breezemap.uiRegistry.get(node.parent, parent => {
                        parent.insertChild(parent.mount(node));
                    });
                } else {
                    node.__scope = node.name;
                    mountView(node.name, node);
                }
            });
        });
    };

How i can adapt the uiLayout in order to is there is imports on sub component definition loaded it

[vovayatsyuk]

The latest Breeze module supports exports/imports.

I recommend starting integration with single xml file and better compatibility instruction: https://breezefront.com/docs/integration-example#better-compatibility

In your case it would look like (Make sure module is called Amasty_MegaMenu):

<argument name="better_compatibility" xsi:type="array">
  <item name="Amasty_MegaMenu" xsi:type="boolean">true</item>
</argument>

In many cases this gives very good results.

[yasser-moudouani]

I tried also with better_compatibility but it's not working
it's look like components list are read but not "import"

An other issue is I don't understand why this not fired

data-bind="
        scope: 'ammenu_topmenu_item_1',
        mageInit: {
            'Magento_Ui/js/core/app': {
                components: {
                    'ammenu_topmenu_item_1': {
                        component: 'Amasty_MegaMenuLite/js/top_menu/item',
                        elemIndex: 1,
                        id: 'category-node-3843'
                    }
                }
            }
        }"

I understand that we should add a component in the js but I tried several ways based on documentation but there is something that I don't get

item.js

I joined the file that I want to see loaded. For this file I tried to put directly on my theme folder the file with

define([
    'ko',
    'uiComponent',
    'uiRegistry',
    'underscore',
    'ammenu_helpers'
], function (ko, Component, registry, _, helpers) {
    'use strict';

    return Component.extend({
        component: 'Amasty_MegaMenuLite/js/top_menu/item',
        defaults: {
            imports: {

But it's not loaded

[vovayatsyuk]

Can you please send the module to vova.yatsyuk@gmail.com so I could look why it's not working out of the box with the compatibility mode?

[yasser-moudouani]

Hi sure I can do that

What I see at the moment is modules load by the first
These sub components will not loaded if I don't add the

return Component.extend({
        defaults: {
            components: {
                ammenu_sidebar_menu_wrapper: {
                    name: 'ammenu_sidebar_menu_wrapper',
                    component: 'Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu',
                    template: 'Amasty_MegaMenuLite/sidebar_menu/sidebar_menu',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                },
                ammenu_submenu_wrapper: {
                    name: 'ammenu_submenu_wrapper',
                    component: 'uiComponent',
                    template: 'Amasty_MegaMenuLite/submenu/wrapper',
                    deps: ['index = ammenu_wrapper'],
                    imports: {
                        animation_time: 'index = ammenu_wrapper:animation_time',
                        color_settings: 'index = ammenu_wrapper:color_settings'
                    },
                    enable_condition: function () {
                        return !this.isMobile();
                    }
                },
                ammenu_submenu_simple: {
                    name: 'ammenu_submenu_simple',
                    component: 'Amasty_MegaMenuLite/js/submenu/simple',
                    template: 'Amasty_MegaMenuLite/submenu/simple/wrapper',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return !this.isMobile();
                    }
                },
                ammenu_hamburger_wrapper: {
                    name: 'ammenu_hamburger_wrapper',
                    component: 'Amasty_MegaMenuLite/js/hamburger_menu/hamburger_menu',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return !this.isMobile() && this.is_hamburger;
                    }
                },
                ammenu_overlay_wrapper: {
                    name: 'ammenu_overlay_wrapper',
                    component: 'Amasty_MegaMenuLite/js/components/overlay',
                    template: 'Amasty_MegaMenuLite/components/overlay',
                    deps: ['index = ammenu_hamburger_toggle'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                },
                ammenu_columns_wrapper: {
                    name: 'ammenu_columns_wrapper',
                    component: 'Amasty_MegaMenuLite/js/components/tree/columns',
                    template: 'Amasty_MegaMenuLite/components/tree/columns',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return !this.isMobile();
                    }
                },
                ammenu_tree_wrapper: {
                    name: 'ammenu_tree_wrapper',
                    component: 'Amasty_MegaMenuLite/js/components/tree/tree',
                    template: 'Amasty_MegaMenuLite/components/tree/tree',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return !this.isMobile();
                    }
                },
                ammenu_account_wrapper: {
                    name: 'ammenu_account_wrapper',
                    component: 'Amasty_MegaMenuLite/js/components/account',
                    template: 'Amasty_MegaMenuLite/account/account',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                },
                ammenu_tabs_wrapper: {
                    name: 'ammenu_tabs_wrapper',
                    component: 'Amasty_MegaMenuLite/js/components/tabs',
                    template: 'Amasty_MegaMenuLite/sidebar_menu/tabs_switcher',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                },
                ammenu_hamburger_toggle: {
                    name: 'ammenu_hamburger_toggle',
                    component: 'Amasty_MegaMenuLite/js/components/hamburger_toggle',
                    deps: ['index = ammenu_wrapper'],
                    enable_condition: function () {
                        return this.isMobile() || this.is_hamburger;
                    }
                }
            },

I have to add manualy these declarations in breeze_default.xml

<item name="Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu" xsi:type="array">
                                <item name="path" xsi:type="string">Amasty_MegaMenuLite/js/sidebar_menu/sidebar_menu</item>
                            </item>

                            <item name="Amasty_MegaMenuLite/submenu/wrapper" xsi:type="array">
                                <item name="path" xsi:type="string">Amasty_MegaMenuLite/submenu/wrapper</item>
                            </item>

                            <item name="Amasty_MegaMenuLite/js/submenu/simple" xsi:type="array">
                                <item name="path" xsi:type="string">Amasty_MegaMenuLite/js/submenu/simple</item>
                            </item>

For components that use this.source in there code I have to force provider in component definition

 ammenu_submenu_simple: {
                        enable_condition: function () {
                            return true;
                        },
                        provider: 'index = ammenu_wrapper'
                    },

Something else that I see it's when the setLinks is call the imports property are read but not set in the component

$.breezemap.uiRegistry.get(valScope, valCmp => {
                    $.breezemap.uiRegistry.get(keyScope, keyCmp => {
                        var source = isImport ? valCmp : keyCmp,
                            sourceKey = isImport ? valPath : keyPath,
                            value = source.get(sourceKey),
                            update = isImport ? (v) => keyCmp.set(keyPath, v) : (v) => valCmp.set(valPath, v);
                        if (ko.isObservable(value)) {
                            value.subscribe(update);
                        } else if (ko.es5.isTracked(source, sourceKey)) {
                            ko.getObservable(source, sourceKey).subscribe(update);
                        } else {
                            source.on(sourceKey, update);
                        }

                        if (_.isFunction(value)) {
                            value = value();
                        }

                        if (typeof value !== 'undefined' && value != null) {
                            update(value);
                        }
                    });
                });
            });

I see the update = isImport ? (v) => keyCmp.set(keyPath, v) : (v) => valCmp.set(valPath, v); was trying to add value on a property get by but it's not working

Please check your emails in a few minutes

Thanks a lot for the reply

[vovayatsyuk]

Thanks!

Desktop menu is now working. Still not everything works correctly for now, will fix the rest tomorrow.

Integration module: https://github.com/breezefront/module-breeze-amasty-mega-menu
Added fixes in latest commit: https://github.com/breezefront/module-breeze

[vovayatsyuk]

Try updating swissup/module-breeze and swissup/module-breeze-amasty-mega-menu to the latest commits (not tags).

[yasser-moudouani]

thanks I will try to work on it in a few days