Jump to content

Recommended Posts

Salut.

J'essaie de rendre mon submenu vertical et non horizontal comme aujourd'hui. Le problème c'est qu'il me crée automatiquement un wifth et je n'arrive pas à trouver son origine. Ce n'est visiblement pas dans le css c'est plus en dur dans le code il me semble. Or dans le ps_mainmenu.tpl ce style n'apparait nul part... 

Auriez-vous une idée de son origine?
Merci

Prestashop 1.7.5

 

Capture d’écran 2020-10-09 à 10.39.23.png

Capture d’écran 2020-10-09 à 10.37.17.png

Edited by @rthur (see edit history)

Share this post


Link to post
Share on other sites
58 minutes ago, doekia said:

Dans le module jhpmenu, très probablement dans le js associé.

Merci. Je ne connais vraiment pas bien le js donc comment puis-trouver dans le js associé? Je ne trouve aucun appel à un code js

Share this post


Link to post
Share on other sites
6 minutes ago, AfterGlow93 said:

C'est un thème fourni par JHP ? Il n'y pas un module qui gère le menu comme chez AngarTheme par exemple ? 

Oui il est fourni par eux. Le module de menu c'est le menu de base modifié j'imagine car il se trouve dans le repertoire ps_mainmenu. Il y a effectivement dans le js des mentions du "submenu width" mais je n'y comprends rien en js donc je vais essayer de contacter JHP...

J'ai essayé de commenter cette partie mais ca ne change rien : 

	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
		/*	var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60; */
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}

 

Share this post


Link to post
Share on other sites
13 minutes ago, @rthur said:

Oui il est fourni par eux. Le module de menu c'est le menu de base modifié j'imagine car il se trouve dans le repertoire ps_mainmenu. Il y a effectivement dans le js des mentions du "submenu width" mais je n'y comprends rien en js donc je vais essayer de contacter JHP...

J'ai essayé de commenter cette partie mais ca ne change rien : 


	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
		/*	var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60; */
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}

 

Attention, regarde la fonction : if (document.body.clientWidth > mobileViewSize)

Ca concerne le mobile uniquement, tu dois avoir autre chose avec cette fonction "DesktopMenu" . 

Sur le mobile, tu avais un wrapper qui prenait tout l'écran du téléphone, il a disparu (pas pratique du coup) : 

image.png.c4988b57766f436ec0488c12d4bf5364.png

Pour tester en mobile, la vue Mobile View du DevMode de Google chrome t'aidera (ou en redimensionnant la fenêtre, par exemple)

Edited by AfterGlow93 (see edit history)

Share this post


Link to post
Share on other sites
1 minute ago, AfterGlow93 said:

Attention, regarde la fonction : if (document.body.clientWidth > mobileViewSize)

Ca concerne le mobile uniquement, tu dois avoir autre chose avec cette fonction "DesktopMenu" . 

Pour tester en mobile, la vue Mobile View du DevMode de Google chrome t'aidera (ou en redimensionnant la fenêtre, par exemple)

Merci mais au contraire non? La c'est desktop uniquement "si document.body.clientWidth est superieur à mobileviewsize". De plus il y a marqué function DesktopMenu en haut

Share this post


Link to post
Share on other sites
2 minutes ago, @rthur said:

Merci mais au contraire non? La c'est desktop uniquement "si document.body.clientWidth est superieur à mobileviewsize". De plus il y a marqué function DesktopMenu en haut

Totalement d'accord, mais c'est côté mobile que ça a bougé, étrangement.

Share this post


Link to post
Share on other sites
2 minutes ago, AfterGlow93 said:

Totalement d'accord, mais c'est côté mobile que ça a bougé, étrangement.

Tout est la je pense 


	$(window).resize(function(){
		$('.jhpmain-menu-dropdown').removeClass('open');
	});

	function DesktopMenu(jhp){
		if (document.body.clientWidth > mobileViewSize) 
		{
			var obj = jhp;
			var extraWidth = 0;
			var new_width_popup = 0;
			var wrapWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').outerWidth(true);
			var wrapHeightPopup = $(obj).find('.jhpmain-menu-sub-menu').outerHeight(true);				
			var actualWidthPopup = $(obj).find('.jhpmain-menu-sub-menu').width();
			extraWidth = wrapWidthPopup - actualWidthPopup;
			var new_width_popup = $(obj).find('.jhpmain-menu-sub-menu .top-menu').outerWidth(true);
			var menuWidth = $('.jhpcmsmain-menu-wrapper').width();
			var subMenuLiWidth = $(obj).find('.jhpmain-menu-sub-menu > ul > li').outerWidth(true);
			var totalSubMenu = $(obj).find('.jhpmain-menu-sub-menu > ul > li').length;  
			var popupFinalWidth = (totalSubMenu * subMenuLiWidth)+60;
			var menuTopOffset = $(".jhpcmsdesktop-wrapper-navbar").offset();//menu top margin or other spacing
			var menuLiHeightOffset  = $(obj).offset();//menu inside top position like table
			var menuLiHeight  = $(obj).outerHeight(true);//line height of menu
			var menuPopopTop  = (menuLiHeightOffset.top - menuTopOffset.top) + menuLiHeight -95;

			var new_outer_width_popup = new_width_popup + extraWidth;
			if(popupFinalWidth > menuWidth){
				popupFinalWidth = menuWidth+20;
			}
			if(popupFinalWidth > new_outer_width_popup){
				new_outer_width_popup = popupFinalWidth+20;
			}
			if(wrapHeightPopup >= 400){//auto scroll when popup is bigger
				$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-auto-scroll');
			}else{
				$(obj).find('.jhpmain-menu-sub-menu').removeClass('jhp-auto-scroll');
			}
			var wraper = $('.jhpcmsmain-menu-wrapper');
			var wWraper = wraper.outerWidth();
			var posWraper = wraper.offset();
			var pos = $(obj).offset();
			var xLeft = pos.left - posWraper.left;
			if ((xLeft + new_outer_width_popup) > wWraper) xLeft = wWraper - new_outer_width_popup;
			$(obj).find('.jhpmain-menu-sub-menu').css('left', xLeft);
			$(obj).find('.jhpmain-menu-sub-menu').css('top',menuPopopTop);
			$(obj).find('.jhpmain-menu-sub-menu').css('width', popupFinalWidth);
			
			//$(obj).find('.jhpmain-menu-sub-menu').stop(true, true).slideDown(500, 'swing');//show popup
			$(obj).find('.jhpmain-menu-sub-menu').addClass('jhp-desk-open');
			
		}
	}
	$('.jhpmenu-toggle-icon').click(function(){
		DesktopMenu($(this).parent().parent());
	});

	$('.jhpcmsmain-menu-wrapper > .jhp-header-menu > li').hover(function() {
		DesktopMenu(this);
	},function(){
		$(this).find('.jhpmain-menu-sub-menu').removeClass('jhp-desk-open');//hide popup
	});

	$(document).on('click','#jhpcms-mobile-view-header .jhpmenu-button', function(e){
		e.preventDefault();
		if ($('#jhpcmsmobile-horizontal-menu #jhp-top-menu').hasClass('open')) {
			$(this).removeClass('open');
			$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').removeClass('open');
			$('.modal-backdrop.fade.in').remove();
		} else {
			removeDefaultDropdown();
			$(this).addClass('open');
			$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').addClass('open');
			if ($('body').find('.modal-backdrop.fade').html() === undefined){
	       		$('body').append('<div class="modal-backdrop fade in"></div>');
          	}
			e.stopPropagation();
		}
	});

	$(document).on('click','.modal-backdrop.fade',function(){
		$('#jhpcmsmobile-horizontal-menu #jhp-top-menu').removeClass('open');
		$('#jhpcms-mobile-view-header .jhpmenu-button').removeClass('open');
		$(this).remove();
	});
	
	$(document).on('click','#jhpcmsmobile-horizontal-menu #jhp-top-menu .jhphorizontal-menu-drop-down-icon', function(e){
		$(this).parent().parent().find('.jhpmain-menu-mobile-dropdown').css('display','block');
	});

	$(document).on('click', '#jhpcmsmobile-horizontal-menu .jhp-has-child .jhpmenu-link-wrapper .jhpmenu-toggle-icon i', function(){
		if ($(this).hasClass('open')) {
			$(this).removeClass('open');
			$(this).parent().parent().next('.jhpmain-menu-mobile-dropdown').removeClass('open').stop(false).slideUp(500, "swing");
		} else {					
			$('#jhpcmsmobile-horizontal-menu .jhpmain-menu-dropdown').css('left', '0').css('top','0').css('width', '100%');
			$(this).addClass('open');
			$(this).parent().parent().next('.jhpmain-menu-mobile-dropdown').addClass('open').stop(false).slideDown(500, "swing");
		}
	});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More