5

I need to resolve issue of responsive megamenu for mobile.

The issue is when I click on the subcategory to opens its child sub-categories the link gets clicked and gets redirected because of which seeing expanded menu gets difficult.

However I tried to locate the code due to which this happens. Below is the code which is present in menu.js file:

_toggleMobileMode: function () {
            $(this.element).off('mouseenter mouseleave');
            this._on({
                "click .ui-menu-item:has(a)": function (event) {
                    event.preventDefault();

                    var target = $(event.target).closest(".ui-menu-item");

                    if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
                        window.location.href = target.find('> a').attr('href');
                    }
                },
                "click .ui-menu-item:has(.ui-state-active)": function (event) {
                    this.collapseAll(event, true);
                }
            });

            var subMenus = this.element.find('.level-top');
            $.each(subMenus, $.proxy(function (index, item) {
                var category = $(item).find('> a span').not('.ui-menu-icon').text(),
                    categoryUrl = $(item).find('> a').attr('href'),
                    menu = $(item).find('> .ui-menu');

                this.categoryLink = $('<a>')
                    .attr('href', categoryUrl)
                    .text($.mage.__('All ') + category);

                this.categoryParent = $('<li>')
                    .addClass('ui-menu-item all-category')
                    .html(this.categoryLink);

                if (menu.find('.all-category').length === 0) {
                    menu.prepend(this.categoryParent);
                }

            }, this));
        }

What I need is that when we click on pseudo element(which shows expansion and contraction) of the sub-category, its child sub-categories should be shown and clicking on sub-category anyways redirects to that particular sub-category page.

Can someone please help me.

  • which Magento2 version you are using? – Amit Naraniwal Feb 19 at 9:41
  • Using Magento 2.3.0 – Nisith Feb 19 at 10:45
  • @Nishith, are you using any theme or using default theme only? – Amit Naraniwal Feb 19 at 11:07
  • Using default theme menu for mobile – Nisith Feb 19 at 11:15
  • Default theme's menu works fine in mobile devices as well, may be some menu extension having this issue. are you using any extension? – Amit Naraniwal Feb 19 at 11:20
2

Please update your menu.js file as:

_toggleMobileMode: function () {
            $(this.element).off('mouseenter mouseleave');
            this._on({
                "click a.ui-corner-all": function (event) {
                    event.preventDefault();

                    var target = $(event.target).closest(".ui-menu-item");

                    if (!target.hasClass('level-top') || !target.has(".ui-menu").length) {
                        window.location.href = target.find('> a').attr('href');
                    }
                },
                "click .ui-menu-item:has(.ui-state-active)": function (event) {
                    this.collapseAll(event, true);
                }
            });

            var subMenus = this.element.find('.level-top');
            $.each(subMenus, $.proxy(function (index, item) {
                var category = $(item).find('> a span').not('.ui-menu-icon').text(),
                    categoryUrl = $(item).find('> a').attr('href'),
                    menu = $(item).find('> .ui-menu');

                this.categoryLink = $('<a>')
                    .attr('href', categoryUrl)
                    .text($.mage.__('All ') + category);

                this.categoryParent = $('<li>')
                    .addClass('ui-menu-item all-category')
                    .html(this.categoryLink);

                if (menu.find('.all-category').length === 0) {
                    menu.prepend(this.categoryParent);
                }

            }, this));
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.