Category top menu not functioning on iphone in 1.6.0.8

[santolla]

Prestashop 1.6.0.8::

 

There is a bug with the top menu on the iphone. Same happens in the default template. 

 

When you click to slide open the category top menu, it slides down, then right back up again. 

 

Anyone know how to fix this? 

 

thank you!

[cedricfontaine]

Do you test it on the demo version also ? Does this occur also ?

 

You can try to report it on forge.prestashop.com

[santolla]

Yes, it does happen on the demo version as well. Borrowed an android and same there too. 

[vekia]

hello

i recorded video, here is the screen capture from real iphone (real device, not fake simulator, it's a screen capture with reflector software)

 

 

it's worth to create forge input for this.

[santolla]

Your are a rockstar! That's exactly it. Doesn't happen on the 1.6.0.6 version. But it does on this version. I've tried to downgrade the jquery to the old version. But site goes bonkers. 

[santolla]

I think we are alone on this issue. I've listed as a bug, but no response from anyone. Your the only one! sniff sniff

[vekia]

you created forge input about that? can you link it, please? i can't find it on forge

[santolla]

I did, I created it 3 times. I think it's getting deleted. But one still remains tho it's impossible to search for:

http://forge.prestashop.com/browse/PSCSX-2607

[vekia]

thanks,

im going to post there comment

[elorac]

I fixed it looks like.  On or near line 83 of /modules/blocktopmenu/js/blocktopmenu.js (or the one in your corresponding theme directory if you made custom changes) you need to add a return false call to prevent it from firing twice.

 

Change this:

    mCategoryGrover.on('click touchstart', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
    });

To this:

    mCategoryGrover.on('click touchstart', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
        return false; // Add this to prevent double firing of click and touchstart events
    });

[santolla]

My hero!! I'm going to try it now. 

[MichaelGargnani]

Hello, I'm Michael from Italy...
started with Prestashop 1.6 (PrestaShop™ 1.6.0.6) two months ago "from zero".
I managed to solve various issues thanks to the forum, but i can't get wowrking the "Attribute Selector" on iphone 4 (on a simulator on line it works.. ). The same on Android (but on some other phones it works..)

The theme is the one that comes with the downloading Prestashop 1.6
http://www.remelssport.com/index.php
 
Example (on mobile, on pc works just fine..):

http://www.remelssport.com/index.php?id_product=134&controller=product

can change the Quantity but not the Size ("Misura" in italian..)

 

Funny thing.. In "vertical" mode  (the phone in vertical..) it never works, in "orizontal mode" it works if I select twice the Quantity..
Strange.. if I leave page open for, let's say ten minutes.. then it work both vertically and orizontally..

I've read the topic where it says:

"I fixed it looks like.  On or near line 83 of /modules/blocktopmenu/js/blocktopmenu.js (or the one in your corresponding theme directory if you made custom changes) you need to add a return false call to prevent it from firing twice."

Open my in dreamweaver

"/modules/blocktopmenu/js/blocktopmenu.js"

.. but the file is empty, no such a line is there

    mCategoryGrover.on('click touchstart', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
    });

 or any other line.. the file is just empty
 

where am I wrong?

Thanks a lot to you all,

Michael
 

Edited July 15, 2014 by MichaelGargnani (see edit history)

[elorac]

"/modules/blocktopmenu/js/blocktopmenu.js"

.. but the file is empty, no such a line is there

 

See my post where I said "or the corresponding file in your themes directory".  So if you are using a theme named "mytheme", the file should be located in "/(your_shop_dir)/themes/mytheme/js/modules/blocktopmenu/js/blocktopmenu.js".

 

Hope that clarifies it!

[MichaelGargnani]

File found, thanks..

in my file (line 82..) was :

mCategoryGrover.on('click', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('medium');
    });

..slightly different from the one you mentioned above.. anyway, change it with:

mCategoryGrover.on('click touchstart', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
        return false; // Add this to prevent double firing of click and touchstart events
    });

still don't work (chronology and cookies cleared in the phone..)

Michael

 

Edited July 15, 2014 by MichaelGargnani (see edit history)

[elorac]

still don't work (chronology and cookies cleared in the phone..)

 

Here's my whole modified mobileInit() function.  Your's might look different.  But note the "return false" calls placed in the code.  There were 3 that I had to add.  This solves the categories menu from opening and closing immediately on the iPhone (or at least it should).  Hope that helps.

function mobileInit()
{
	categoryMenu.superfish('destroy');
	$('.sf-menu').removeAttr('style');

	mCategoryGrover.on('click touchstart', function(){
		$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle();
		return false; // ADDED
	});

	$('.sf-menu > li > ul').addClass('menu-mobile clearfix').parent().prepend('<span class="menu-mobile-grover"></span>');

	$(".sf-menu .menu-mobile-grover").on('click touchstart', function(){
		var catSubUl = $(this).next().next('.menu-mobile');
		if (catSubUl.is(':hidden'))
		{
			catSubUl.slideDown();
			$(this).addClass('active');
		}
		else
		{
			catSubUl.slideUp();
			$(this).removeClass('active');
		}
		return false; // ADDED
	});

	
	$('#block_top_menu > ul:first > li > a').on('click touchstart', function(e){
		if ($(this).parent('li').find('ul').length)
		{
			e.preventDefault();
			var mobCatSubUl = $(this).next('.menu-mobile');
			var mobMenuGrover = $(this).next('.menu-mobile-grover');
			if (mobCatSubUl.is(':hidden'))
			{
				mobCatSubUl.slideDown();
				mobMenuGrover.addClass('active');
			}
			else
			{
				mobCatSubUl.slideUp();
				mobMenuGrover.removeClass('active');
			}
			return false; // ADDED
		}
	});
	
}

[MichaelGargnani]

My original function mobileInit():

function mobileInit()
{
    categoryMenu.superfish('destroy');
    $('.sf-menu').removeAttr('style');

    mCategoryGrover.on('click', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('medium');
    });

    $('.sf-menu > li > ul').addClass('menu-mobile clearfix').parent().prepend('<span class="menu-mobile-grover"></span>');

    $(".sf-menu .menu-mobile-grover").on('click touchstart', function(){
        var catSubUl = $(this).next().next('.menu-mobile');
        if (catSubUl.is(':hidden'))
        {
            catSubUl.slideDown();
            $(this).addClass('active');
        }
        else
        {
            catSubUl.slideUp();
            $(this).removeClass('active');
        }
        return false;
    });

    if ('ontouchstart' in document.documentElement)
    {
        $('#block_top_menu > ul:first > li > a').on('click', function(e){
            if ($(this).parent('li').find('ul').length)
                e.preventDefault();
        });
    }
}


Change it to (copied from yours... )


function mobileInit()
{
    categoryMenu.superfish('destroy');
    $('.sf-menu').removeAttr('style');

    mCategoryGrover.on('click touchstart', function(){
        $(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle();
        return false; // ADDED
    });

    $('.sf-menu > li > ul').addClass('menu-mobile clearfix').parent().prepend('<span class="menu-mobile-grover"></span>');

    $(".sf-menu .menu-mobile-grover").on('click touchstart', function(){
        var catSubUl = $(this).next().next('.menu-mobile');
        if (catSubUl.is(':hidden'))
        {
            catSubUl.slideDown();
            $(this).addClass('active');
        }
        else
        {
            catSubUl.slideUp();
            $(this).removeClass('active');
        }
        return false; // ADDED
    });

    
    $('#block_top_menu > ul:first > li > a').on('click touchstart', function(e){
        if ($(this).parent('li').find('ul').length)
        {
            e.preventDefault();
            var mobCatSubUl = $(this).next('.menu-mobile');
            var mobMenuGrover = $(this).next('.menu-mobile-grover');
            if (mobCatSubUl.is(':hidden'))
            {
                mobCatSubUl.slideDown();
                mobMenuGrover.addClass('active');
            }
            else
            {
                mobCatSubUl.slideUp();
                mobMenuGrover.removeClass('active');
            }
            return false; // ADDED
        }
    });
    
}

 

 

Still doesn't work... i reset the file as it was originally

Michael

 

[elorac]

Still doesn't work... i reset the file as it was originally

Michael

 

Humm, strange it doesn't work. I wonder if you have something else overriding that file or something.  Maybe the old code was stuck in cache? In back office in advanced parameters -> performance, make sure you have force compilation selected and smarty cache off. I would turn off all options in the ccc section, and any cache option on the bottom of that page as well should be off. Do you have any 3rd party caching modules that might be interfering? Then make sure you clear cache and history on iPhone as well. Might reboot the phone for good measure.  I've seen sometimes where javascripts get "really stuck" in cache sometimes, especially on phones if network access is spotty.  That's about the best I can think of at the moment.

[MichaelGargnani]

In the BO smarty "Cache" was on (now is Off) ... and was also selected "Recompile Template Files if Refreshed"  (now is Force Compilation..)

al the rest was as you wrote in your post.. 

Do you have any 3rd party caching modules that might be interfering?
Don't know..

iPhone History and Chache cleared and also reboot..

Phone network is wi-fi in my office and is ok

doesn't work... shame..

I leave for now the "blocktopmenu.js" file as you told me to set it, I made a copy of the original file just in case...

thanks for everything at the moment, maybe later some more ideas from you all in the forum...

Michael

[smallbizwiz]

I recently upgraded to 1.6.0.9, and I'm using all of the default_bootstrap files (i.e. no file changes or new modules).  I'm having the same issue.  It is easily viewable using the User-Agent Switcher in Chrome, and also the issue appears with my iPhone and Samsung devices.  

 

Obviously, I've tried the suggested changes above, most of which had already been incorporated to 1.6.0.9.  I wonder if a configuration setting in the BO causes this?  I will search, but let me know if anyone has any other ideas.

[smallbizwiz]

I found the issue: Quick search block.  

 

Using the User-Agent Switcher in Chrome, I noticed an error thrown when the screen was re-sized to mobile size, causing responsiveness to set in.  At this time, an error appeared in the console: "Uncaught ReferenceError: blocksearch_type is not defined

www.beachrewards.club/themes/default-bootstrap/js/modules/blocksearch/blocksearch.js:71"

 

In BO-Modules-Quick search block - disable.  Now it works.  

 

I'm going to create a hack that gets this to work, but it seems like something that should be built-in to the next version, right?

[MichaelGargnani]

Ciao

here I am again...

found a solution (not beeing a technician I don't know if this is the perfect solution, but it works on my I-phone 4 and I can now "select attributes products".. also, so far I haven't find extras problems in the web site)

 

Here is where i found the solution:
 

https://github.com/PrestaShop/PrestaShop/commit/fc1c1f3dfe362c7298b84a761ff3184ac47f0a8d

(thanks a thousands to these people.. )

 

Just modify the two files and it works..

 

Let me know if is ok as well for you guys...

 

Michael

Edited October 22, 2014 by MichaelGargnani (see edit history)

[Zith]

Hi, I tried all the options listed in the post. none worked for me. Menu is not dropping down while I click on +, but other options like top seller drop down works ok in iphone 4s and android. my website is www.offaround.co.in..Can someone please help?

[Grafii76]

it works!!

It does not work as you watch pages in privacy mode