• Priority: 0
  • Status: Queued
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 20.09.24, 11:12
  • Opened by: Taweesak

Ticket #25766 - iPad, Safari, problems with Menu and product page.

Menu not work on iPad and the product page is also look weird. I had also tried your demo page but it looked fine. Please see enclosed videos.

Comments

Fred 21 Sep 2024, 11:08

Hi, Taweesak.
What iPad do you use? Because I see AMP version on iPad mini, see attached screenshot

Attachments:

Taweesak 23 Sep 2024, 11:31

Those videos were recorded from iPad Air 2.
I had just recorded another videos from iPad Pro (11-inch):
On landscape, it shown the same as on PC except that the menu dropdown did not work.
On portrait, it shown the same as iPad Air 2, side bar came out with blank. Product details page also looked weird.

Any suggestion?

Fred 24 Sep 2024, 20:25

I don't have real iPad device to make a test but on simulator everything is working fine https://mega.nz/file/dMhnwATS#ZRPt5ufl8_pzzGLczNzt44Cx4-uwbOzxY8aUw-x05nQ

so I'm stuck and have no idea how to deal with that.

Taweesak 25 Sep 2024, 12:29

Do the demo use the latest theme? It works well. Do I have to reinstall the theme?

Fred 25 Sep 2024, 19:32

No, you don't have to reinstall the theme. Maybe that's some configuration difference. I'll try to compare and let you know the result.

Fred 25 Sep 2024, 22:52

Strange, scripts and settings are the same. Have you tried to check that in incognito mode?

Taweesak 27 Sep 2024, 06:07

I had tried in private mode (similar to incognito) but everything is the same. How about page Product, the thumbnails shown in full size. I could not find a problem with your demo pages but ours seems to be strange.

Fred 27 Sep 2024, 22:14

Yes, I see.
Try this product page fix

.product-modal .product-images {
     justify-content: flex-start;
}
Taweesak 30 Sep 2024, 11:25

I put the css on /modules/pkthemesettings/views/css/dynamic/customercss1.css and it did not work. Please advise.

Fred 30 Sep 2024, 22:16
Taweesak 02 Oct 2024, 10:24

It's still the same on our iPads, all photos were in the same size. On product page, there was an icon (magnify icon) next to the photos (pls see images attached) and when we tabbed the icon, it brought pop-up and the photos in the pop-up were as expected, 4 thumbnails and one big photo.

Taweesak 02 Oct 2024, 10:24

here are the images.

Attachments:

Taweesak 02 Oct 2024, 10:32

And for the menu, I tried to set new mobile-menu named mobile-header R1 and set the Mobile Header Template in Theme Setting to this new header. But on iPads, it did not show the new header but shown the menu items as in PC, arranged in rows though. Any clues.

Attachments:

new menu.jpg (1.43 MiB)
Fred 03 Oct 2024, 22:18

What is your iOS version?
I have tested it out on iOS18 and everything looks fine: https://mega.nz/file/tBwQHBbZ#vvGe2fJYGHG1tTBdpeEQ8KaffWnwAMtikPoKT-TucUY

Taweesak 07 Oct 2024, 11:12

My iPad Air 2 is on iOS 15.8.3 which is the latest. Anyhow I will try update my iPad Pro to iOS18 and I will let you know if it work.

As for Menu, I found this on GitHub:
https://github.com/PrestaShop/PrestaShop/commit/43cebac3dcb6fcd4856d3a98593da242715782e4

It is the previous 1.7, not for Prestashop 8, but I think it might be related to this issue. Also some suggested to replace:
$(document).width() ⇐ 767 && responsiveflagMenu == false
with
$(window).width() ⇐ 767 && responsiveflagMenu == false

But I cannot find the blocktopmenu.js file since the above was to fix the 1.7 version as well. What do you think?

Fred 07 Oct 2024, 22:27

That solution was committed 10 years ago. There is no such module in prestashop anymore.
Maybe you need to adjust the mobile breakpoint because an iPad could have a little bit wider screen.
Navigate to Theme Settings → Mobile tab and increase the breakpoint value

Taweesak 08 Oct 2024, 04:30

Just update iOS to iOS18, product details is okay but the Menu on portrait still do not work. Could you suggest which file that contain the code that set mobile breakpoint width.

Fred 08 Oct 2024, 08:17

You can change that in the Theme Settings → Mobile tab, no need to edit files

Taweesak 09 Oct 2024, 06:29

Do you have a solution on Menu on iPads? my iOS18 still not work.

Taweesak 09 Oct 2024, 06:33

I had also tried Chrome intead of Safari on iPad but the page shown as AMP layout on Chrome, not the tablet layout.

Fred 09 Oct 2024, 20:44

It seems Chrome sends "mobile" user agent, but safari "desktop" version. We are using a library that detects devices based on user agent.
As for the menu, not yet, but honestly thats a problem for us because everything is ok on iPad simulator, and we don't have real device to test

Taweesak 17 Oct 2024, 06:34

Please try solving the Menu problems on iPad, many of our customers use iPad to browse our items.