X-Cart forums

[xgarb]

On our site we've used the simpleCMS to create a megamenu with three category levels.

It works really nicely on mobile and desktop.. however, the menu items are in the html twice. Once for the mobile menu and once for the desktop menu.

With well over 200 links to categories this is making the page heavy.

One solution would be to only bring the mobile menu html into the dom when the hamburger icon is pressed.

On desktop this would work well but for mobile the unused desktop menu is still in the html.

Another solution could be to show the correct menu (load into the dom) based on the screen size.

Anyone any ideas or pointers on taking this forward?

[xgarb]

OK, what I've done for the moment on the desktop menu is to only have the visible part of the menu shown on page load. When the user mouseovers the menu area the rest of the menu is loaded into the dom like so...

$(".navbar").one("mouseover", function(){
  if (sessionStorage.desktopmenu) {
    //console.log('load menu from session store');
    $("#desktop-menu-load-location").html(sessionStorage.desktopmenu); // load menu from browser session store

  } else {
    //console.log('no menu in session store');
    $.get("megamenuminified.txt", function( menuhtmldata ) { // add text file to menuhtmldata var
      sessionStorage.setItem('desktopmenu', menuhtmldata); // add var to  browser session store 
      $("#desktop-menu-load-location").html(menuhtmldata);     
    }); 
  }
});

It's not as snappy the first time as having all the HTML in the dom on page load but if the user never uses the megamenu or is on a mobile then why fill the page code with all the un-needed markup.

[xgarb]

With the hamburger menu (for mobile and small screens) I have this working as well. So now the page loads and the menu items are only loaded into the HTML when requested by a click or press.

I've used v6 of the menu system (mmenu.frebsite.nl/) and made a couple of template and CSS tweaks.

This code could probably be improved because I don't 100% understand what X-cart does to make the mmenu work with the rest of the system.

customer/js/slidebar.js

function slidebar() {
    var self = this;
    $("#main_menu").one('mouseenter touchstart', function(event) {
        event.preventDefault();
        core.trigger('mm-menu.before_create', jQuery('#slidebar'));

        var $ul = jQuery('#slidebar').find(".slidebar-categories").parent();

        $.get("megamenuminifiedmobile.txt", function(menuhtmldata) { // add text file to menuhtmldata var

            var new_content = menuhtmldata; //sessionStorage.mobilemenu;
            jQuery('#slidebar').find(".slidebar-categories").after(new_content);


            jQuery('#slidebar').mmenu(self.options, self.configuration);

            var api = jQuery('#slidebar').data('mmenu');
            api.initPanels();

            if (event.type === 'touchstart') { // touchmove has been triggered
                api.open();
            }

            core.trigger('mm-menu.created', api);
            api.bind('closed', function() {
                api.closeAllPanels();
            });
        });
        jQuery('.dropdown-menu#search_box').parent().on('shown.bs.dropdown', function() {
            jQuery('#header').addClass('hidden');
        });

        jQuery('.dropdown-menu#search_box').parent().on('hidden.bs.dropdown', function() {
            jQuery('#header').removeClass('hidden');
        });
    });
}

Mouseenter (followed by a click to open the menu) works without the api.open code but mobile needs this to make the menu appear.

[qualiteam]

I've notified the XC5 dev team about the problem. But I'm not sure how they will change this (and if they decide to change this).
Thanks!

[xgarb]

Ideally the latest version of mmenu needs to be add to x-cart and the CSS moved out of the customer/css/styles.less file so changes can be made more easily to the menu.

It's an amazing menu and there are lots of things that can be done with it.

The main jquery.mmenu.js file in the current x-cart also contains un-needed js so this could be lightened up.

The best solution would be for the mobile menu to lazy load the required JS and CSS if a smaller screen is detected (I realise there are problems with this). Then request each menu level as requested (AJAX to a PHP script with caching). This would keep things quick and light and only necessary stuff would be loaded each time.