Olá pessoal neste artigo vou mostrar para vocês como podemos melhorar o menu mobile da nossa loja, hoje por padrão os submenus da loja vem aberto no mobile, isso porque não tem como simular o efeito de passar o mouse em mobile, uma vez que o cliente está apertando o botão. Logo uma saída que temos é que o botão do menu principal abra os sub-menos.

Porém, temos mais um problema, desta forma o cliente nunca vai entrar (usando o menu) na categoria principal, pois o clique está ativando as subcategorias. Então uma solução é criar um “novo botão” ao lado da categoria principal, e nele colocar a ação de abrir os submenus. Assim garantimos que se  cliente clicar na categoria principal ele vai acessar, se ele clicar no “novo botão” vai abrir as sub e de lá ele clica nelas. Para exemplificar  e mostrar o que vamos fazer veja o GIF abaixo:

Agora vamos ajustar alguns códigos na loja, para poder ter este mesmo efeito, já colocamos esta melhoria em nosso Roda Map de atualizações, mas até lá vou te ajudar a implementar este ajuste =)

1º INSERINDO O CSS AVANÇADO

Vamos no menu de Customização > Personalização e lá vamos na aba de Avançado aqui temos dois campos o primeiro é do CSS avançado, muito cuidado se tiver alguma coisa aqui, role até o final e cole a instrução abaixo:

/*
* Esconde submenu no mobile e ativa com JS
*
*/
#off-canvas-nav .dropdown-menu{display: none;}
#off-canvas-nav .nav .dropdown-toggle .caret{
	display: none;
}
#off-canvas-nav .megamenu li {position: relative;}
#off-canvas-nav .megamenu li a{
	position: relative;
	z-index: 5;
}
#off-canvas-nav .nav .open_dropdown{
	border: 0;
	width: 30px;
	height: 30px;
	top: 2px;
	right: 0;
	margin: 0;
	cursor: pointer;
	z-index: 50;
	position: absolute;
	text-align: center;
	color: #FFF;
	font-size: 27px;
	line-height: 0;
}
	#off-canvas-nav .nav .open_dropdown i{ margin-top: -5px; }

1º INSERINDO O JAVASCRIPT AVANÇADO

Na mesma tela um pouco mais abaixo, vamos colocar o seguinte código, mais uma vez, muito cuidado se tiver alguma coisa aqui, role até o final.

/*
* Js para criar novos elementos e depois função de Js para abrir ao clicar
*/
$(function(){

	$('#off-canvas-nav .megamenu .dropdown-toggle').each(function(){
		$(this).parent().append('<span class="open_dropdown"><i class="fa fa-sort-desc" aria-hidden="true"></i></span>');		
	});

	$('#off-canvas-nav .open_dropdown').click(function(e){
		e.preventDefault();
		var atual = $(this).parent().find('.dropdown-menu').css('display');
		if(atual=="none"){
			$(this).parent().find('.dropdown-menu').slideDown(500);
		}else{
			$(this).parent().find('.dropdown-menu').slideUp(500);
		}
	});

});

Bom espero ter ajudado, se este artigo foi útil para você não deixe de avaliar abaixo!

Até mais!