- Priority: 0
- Status: Closed
- Theme: Alysum
-
Assigned To:
Fred
- Private: No
- Open Date: 27.09.23, 09:08
- Opened by: Mamor
- Closed by: Anonymous Submitter
- Closed on:
- Reason: Not a bug
Ticket #24945 - Problem with product sheet declination
Hello Fred,
I am encountering an issue with the variations on the product pages.
Indeed, at times the thumbnails overflow and at other times, it changes configuration = It removes the thumbnails below the photos.
I have two configurations, one for mobile and another for computer, the mockup was made with Creative Element.
Here is a product where the thumbnails overflow: https://prod.lora-moi.ch/fr/montres-en-bois-automatique/433-5184-laimer-montre-en-bois-rudolph.html#/157-gravure-sans_gravure
And a product where the formatting changes: https://prod.lora-moi.ch/fr/giovanni-raspini-bagues/740-5789-bague-avec-perles.html#/63-grandeur-52
This could come from a compatibility issue with Creative Element Pro, I want to specify not to change the Creative Element (let the actual version) as we have done a lot of work with it and removing it to put the free version would mess everything up (this has already happened in the past)!!!! So please dont change the creative element version.
Thank you for your help.
Have a great day and best regards,
Orlando
Comments
Hi, Orlando.
1. I’m not sure what do you mean by overflow, if that long carousel, try this CSS fix:\
.slick-list {overflow: hidden;}2. As for formatting change, I see the issue, it requires some time to find a solution. Back to you with some news soon
Hello Fred,
Thank you for your response.
1.It’s all good, the CSS works well.
2.Very well, I look forward to hearing from you.
3.I just have a little problem with the navigation on the product page, I would like there to be arrows appearing in addition to the thumbnails but they do not appear and I have no idea why.
Thank you for your help.
Have a great day and best regards,
Orlando
3. as I can see you have commented them out in the source code
Very strange, can you give me the line where the comment is?
buttons are hidden here https://take.ms/d1DRC
I’ve commented on the part you pointed out but I can’t see any changes(see screen.
Attachments:
What’s very strange is that when I go to a product with a declination and change the declination, the thumbnails disappear and are replaced by an image with arrows.
Go to this product and change the declination, the arrows will appear: https://prod.lora-moi.ch/fr/giovanni-raspini-bagues/765-5835-bague-nacre-tahiti-argent-maui.html#/58-grandeur-54
Yes, that’s the issue #2 and I mentioned that we are working on that. It’s in progress, don’t worry
I just applied a fix, but you have enabled Opcache that doesn’t let to update .php files. Please reset it or just disable for a while, then check product page
Hello Fred,
I’ve forwarded your message to the devs. I’m waiting for them to get back to you.
I’ve just noticed that when I go to my product pages built via creative I’m no longer being displayed? is this normal? Is it because I need to update the php doc which is blocked by opcache?
Attachments:
Yes, let’s disable Opcache first, that let us quickly debug the problem
I’ve just noticed that when I go to my product pages built via creative I’m no longer being displayed? is this normal? Is it because I need to update the php doc which is blocked by opcache?
Attachments:
Product page is fixed, please check
Ok, nevermind about Opcache, as I can see it’s already refreshed. I see another cache issue, you seems to have assets cache like Cloudflare, if so, could you please clear it?
Hello Fred,
Noted. I’ll pass the message
Hello,
I’m reaching out to you regarding the cache; I was able to clear it and review the work!
On desktop, everything is in order. HOWEVER, on mobile, if we switch variants, the carousel disappears and the images stack on top of each other.
Thank you for your assistance.
Yes I see the issue. We are working on that…
Noted, thanks!
Hi, Mamor.
Sorry for the delay.
We are going to refactor that block completely because now there is some legacy code that complicate logic and bring such issues.
Hope to finish it this week
Hello Fred,
Thanks for your message. I’ve taken note and I’m waiting to hear from you. I hope it won’t be too complicated.
Thank you, in any case, for your involvement!
Oh, and don’t forget that the store is in 3 languages.
Could you please give me credentials to login here?: https://take.ms/JAgOf
Hello Fred,
The logs are in my profile:
BO login: after the _ and the same for BO password after the _
Ok, I found it, but I can’t found a product where I could check formatting issue now. Provided links leads to 404 page
OK nice! This is certainly due to the changes in the url path of the product files.
The best way is to go to the home page or categories and select a product or categories.
I can’t find a product there with combinations to check the issue. Could you please give me direct link, or just confirm if the problem is solved now
Here’s a product with variations: https://prod.lora-moi.ch/fr/p/594-705-angelsvoice-bague-plume-en-argent-925.html#/60-grandeur-58
You can see that when you change declination the thumbnails disappear, moreover on the mobile version the caroussel does not work
I don’t know why on mobile, the image takes up the whole width and then splits in two, and when I change the declination, everything jumps.
Ok, I see.
Desktop version is fixed. Now working on mobile
Hello Fred,
I went to check and when I change declination the images come one on top of the other (see screen).
Attachments:
Hello Fred,
I went to check this morning and when I change declination on computer it works :).
Just one more small detail, the arrows are invisible and if I want to add dots, they come crammed under the product and I have no idea why.
Ok, I’ll check that. Back to you soon
As I can see there is a code in custom.css file that hides buttons → https://take.ms/ypCRj
OK! I put the code between /* */ and yet the arrows don’t appear.
The declensions jumped on computer :/, it’s because I switched to grid and not carousel, I’m really sorry.
Have you been able to look for the problem on mobile?
Thanks for the help.
Have a nice evening.
Mobile issue is in progress…
Hello Fred,
OK for the mobile correction!
Unfortunately, I still haven’t managed to make the arrows appear. However, I’ve deactivated the code that hides them.
Add this CSS code (actually I have added it to Theme Settings → Customer CSS but it’s not applied)
/* fix carousel arrows */ body .elementor .elementor-element .slick-slider .slick-next:before { -webkit-mask-image: url(https://prod.lora-moi.ch/themes/alysum/assets/svg/arrow-right.svg); mask-image: url(https://prod.lora-moi.ch/themes/alysum/assets/svg/arrow-right.svg); } body .elementor .elementor-element .slick-slider .slick-prev:before { -webkit-mask-image: url(https://prod.lora-moi.ch/themes/alysum/assets/svg/arrow-right.svg); mask-image: url(https://prod.lora-moi.ch/themes/alysum/assets/svg/arrow-right.svg); } .elementor-element .slick-slider .slick-arrow:before { position: absolute; top:calc(50% - 9px); left:calc(50% - 9px); } .elementor-element .slick-slider .slick-arrow.slick-prev:before { transform: rotate(180deg); } body .elementor-element .slick-slider .slick-arrow { width: 40px !important; height: 40px !important; color: #fff; position: absolute; z-index: 11; text-indent: 9999px } .elementor .elementor-element .slick-slider .slick-arrow:before { margin:0 } /* end fix carousel arrows */Hello Fred,
Thanks for your message.
I put your code directly in the product file and the arrows appear.
However, they appear on the thumbnails but not on the big main image (see screen), it would be great to have them on the big image too but that’s a detail…
As for the variations, they work fine on the computer.
But on mobile, there’s always the problem of display on the product sheets and the declinations don’t hold.
Thanks again for the help.
Have a nice day.
Attachments:
it appears on thumbnails, because it’s a carousel of thumbnails. You can disable thumbnails to have carousel of big images.
As for the mobile, it’s still in progress, sorry for the delay.
Hi Mamor.
Do you have some extra cache? I’m asking because I edit this file /public_html/themes/alysum/assets/js/alysum.js but see no changed in browser https://prod.lora-moi.ch/themes/alysum/assets/js/alysum.js
Hello Fred,
It is certainly the cloudflare cache, I purged it! Let me know if it worked
can you enable dev mode in your Cloudflare account?
I activated it
sorry for the delay. Still working on that locally
Hello Fred,
Thanks for the news. Got it.
Hi again.
Still no solution yet. The problem here is that everything is ok in the theme installed locally, so I assume some extra CSS code makes that issue and still can't find which one.
Hi Fred,
It's quite strange because if you display the thumbnails, the bug disappears. The images take the full width but the thumbnails bug (see image).
It seems to be a problem with the thumbnails, typically in the carousel the thumbnails come at 309px (css > element.style which sets images to this size)> see screen.
Could we make the thumbnails take up 100% of the width on mobile and tablet?
And there's a problem with the dots: when you want them to appear, they're displayed at the bottom left (see screen).
The launch of the store is scheduled for the end of this week at the latest, early next week at the earliest.
This problem with the images is the only thing left to resolve, and then we'll be on our way!
Attachments:
Hello again Fred,
I went to check on both mobile and computer to see if the variant bug was still there, and indeed, it's still present.
Typically, with this product, if I change the variant, the images stack on top of each other:
https://prod.lora-moi.ch/fr/p/301-264-bracelet-cuir-homme-noir-antique-tresse-double-avec-fermoir-mousqueton-en-acier.html#/29-longueur-19cm
Is the theme having issues because I have a Creative Pro version?
Thanks for your help, and have a great day.
I've discovered an interesting element, there's an element that creates a width of 1326px > If you change it to 2000px, the images take up the whole width, I don't know what this css is attached to (see image).
Attachments:
Hello Fred,
I just wanted to know if you thought you could solve it before the end of the week? Because we were thinking of launching the store towards the end of the week, beginning of next week.
Thanks for your reply.
Have a nice evening.
We will continue tomorrow, I'll let you know if we have some progress with that
Agreed! Thanks for your reply. I hope you find the problem.
Have a nice evening.
Thank you, have a nice evening too
Could you please enable dev mode in your Cloudflare?
Hello Fred,
I've activated it, it's all good.
I just found out that you have two copies of that widget, one is hidden. That can cause the issue https://take.ms/wV27J
Try to remove hidden copy
I need to be more precise, because I have a mobile view and a computer view.
Basically, when you're on a computer there's one view and when you're on a mobile you have another view.
Could this be the problem (see screen)?
Attachments:
I've noticed that when you disable thumbnails, the bug appears on both computer and mobile.
https://prod.lora-moi.ch/fr/p/840-20847-bague-fleur-de-vie.html#/60-grandeur-58
I have the impression that this is related to thumbnails.
PS: I've removed the mobile version and activated the caroussel on both computer and mobile.When you arrive on the page the bug is there and if you change declination the carousel returns normal.
When you switch to carousel mode without thumbnails, the problem comes in this area (see screen).
There are 2 max widths at 100% .elementon img and img which cause the image to split.
If you deactivate them, the image appears normal.
Attachments:
If I use this css, the problem disappears on the computer, but on mobie the image is too big and overflows.
thumb-container img {
for some reason the slider initiates twice, and I can't find a reason why it's happening. There is no such issue neither in the theme installed locally nor in our demo
So strange, but locally, when you change declination, it holds? Do you think this could be due to creative element pro?
Hard to say, need to check that
Do you think you can solve the problem?
We are trying, I think we can
It's reassuring to read that! Thank you very much for your involvement. I try to help you as much as I can, but unfortunately my knowledge of code is still very limited.
Please try now, it should be fixed.
I have removed duplicated widget, and added styles to hide cover image to have only carousel visible.
I looked, but the problem is that the miniatures that appear are very small (See creen).
Attachments:
There's also the problem that when you change declination, the thumbnails jump around (on desktop and mobile).
I really feel that the problem lies mainly with the miniatures. Because the carrousel takes the miniatures?
When there's only one image, the carousel displays it very cleanly.
When several are used, the bug appears.
Strange, because I see it like this: https://take.ms/WUWO0
As I can see you have cached by Cloudflare files. Can't you disable Cloudflare at all while the page is in development?
You have to go private navigation! It's very strange with cloudflare because I haven't touched anything, I'll go and disable it
Hello again, I'm coming back to you about the problem of images on cell phones.
I have this module on the 1.6 store: https://addons.prestashop.com/fr/demo/FO972.html
I've just installed it on the new store and it may solve the problem we're having. I'm looking at it now and it seems to work, the only problem is that I don't like having too many modules because it reduces performance.
I'll keep you informed!
ok, please let me know your decision
The solution seems to work! The declensions hold and there's a carousel on mobile.
We'll stay with that, though, as there's still a bit of a problem: the images come on top of the guides (see image).
Can you take a look? Then we have to be good.
Attachments:
img.JPG(114.9 KiB)img.JPG(114.9 KiB)img.JPG(114.9 KiB)The problem has been solved, it's all good!
So you will use that module, right?
If so, we can take a look into it's code and maybe apply similar solution into the theme
Yes, I'm going to use this module because it solves the problem, everything works fine!
No problem, you can check the code and apply a solution in the theme but as it works, it's better to leave it as it is.
Because the store will be launched next week
Ok, I see