We offer professional Design/Code Customisation and Website Optimisation Service Request Customisation
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 04.05.18, 23:30
  • Reason: Closed
  • Comment: Glad to help!

Ticket #11886 - Product page - image thumbnail slider not working

The product page does not display the thumbnail slider correctly, see attached image.
Can you please have a look at this?

Schermafbeelding 2018-03-20 o... (361.7 KiB)

This ticket does not depend on any other tickets.

Marek (marek) 20 Mar 2018, 11:53

Hi Aris.
All works fine for me

Aris Schlingmann (aris-comm-on-nu) 20 Mar 2018, 11:56

Hi Marek,

Thanks, I see, on some pages it works, some not.
Can you please look at http://aos.comm-on.nu/ophangrails/mini-rail/newly-r10-wand-rail-plafond-aansluitend.html#/29-kleur-wit , on this page you can see the issue.

Marek (marek) 20 Mar 2018, 12:18

The issue has been fixed. Please check it out

Aris Schlingmann (aris-comm-on-nu) 20 Mar 2018, 12:22

Great! Thanks!
What code did you change so I can merge it with my development environment?

The up/down arrows to browse the thumbnails however are not working. Could you take a look at that also?

Marek (marek) 20 Mar 2018, 12:34

You can find two last lines in the Theme Settings > Custom CSS tab.
Add following css fix there for buttons:

.input-group-btn-vertical {width:25px}
.product-quantity .input-group-btn-vertical .btn i {height:16px}
Aris Schlingmann (aris-comm-on-nu) 20 Mar 2018, 12:49

Added the CSS to the Custom CSS but I don't see any change. Also cleared cache.
Problem is that the up/down buttons are displayed, but there's no action when clicking on it.

Marek (marek) 20 Mar 2018, 12:50

don't forget to clean browser's cache. It works for me

Aris Schlingmann (aris-comm-on-nu) 20 Mar 2018, 14:16

Sorry but I can't get it to work. Cleared browser cache, tried several browsers.

To be sure we are talking about the same issue, I attached a screenshot of the up/down icons that I'm talking about.

Schermafbeelding 2018-03-20 o... (497.5 KiB)
Marek (marek) 20 Mar 2018, 22:49

Now I see.
Please fill out all necessary fields in your profile https://support.promokit.eu/index.php?do=myprofile to access to your server through FTP

Aris Schlingmann (aris-comm-on-nu) 21 Mar 2018, 08:03

I have entered the FTP credentials. Hope you can fix it!

Aris Schlingmann (aris-comm-on-nu) 21 Mar 2018, 09:47

Hi Marek,

I also notice that the up/down buttons are not working when clicked on a thumbnail and you want to browse the thumbnails. See attached image.
Could you have a look at this also?

Schermafbeelding 2018-03-21 o... (580.7 KiB)
Marek (marek) 21 Mar 2018, 19:57

Yes I see. I'll try to fix it as soon as possible

Marek (marek) 23 Mar 2018, 11:20

Something wrong with page layout, have you changes something in the code? http://aos.comm-on.nu/ophangrails/mini-rail/newly-r10-rail-200cm.html#/25-kleur-alu

Aris Schlingmann (aris-comm-on-nu) 23 Mar 2018, 16:36

Yes, we changed some styling this morning, we have fixed it now...

Marek (marek) 26 Mar 2018, 15:06

I just fixed arrows and it works. As for main issue I keep trying to find a solution

Aris Schlingmann (aris-comm-on-nu) 27 Mar 2018, 09:10

I'm sorry, I don't see the arrows? Tried several browsers and cleared cache.
Example: http://aos.comm-on.nu/ophangstangen/stang-met-twister/artiteq-twister-op-stang-2mm-wit.html#/119-lengte-100cm , see attached image.

Schermafbeelding 2018-03-27 o... (1.2 MiB)
Marek (marek) 27 Mar 2018, 11:46

Strange, it was ok. Now I have to do it once again.

Marek (marek) 27 Mar 2018, 11:59

I have added arrows here /themes/aos/templates/catalog/_partials/product-images-modal.tpl
and here is additional CSS code in the /themes/aos/assets/css/custom.css

body #product-modal .modal-content .modal-body .arrows .arrow-up {top:0}
body #product-modal .modal-content .modal-body .arrows .arrow-down {bottom:15px}
Aris Schlingmann (aris-comm-on-nu) 27 Mar 2018, 12:14

Ah that explains it. I had overwritten your changes with my own changes. I have copied your changes now to my development environment.

However, clicking on the arrows does not display the next/prev image?

Marek (marek) 27 Mar 2018, 12:19

It worked before, and now it's not. Working to fix it

Aris Schlingmann (aris-comm-on-nu) 28 Mar 2018, 11:26

Please note that we need to do some changes in template / CSS files also, so the files in the /themes/aos folder can be overwritten by our changes.

Marek (marek) 28 Mar 2018, 11:27

Ok, thank you

Marek (marek) 29 Mar 2018, 12:46

Please try now. It should work correctly now

Aris Schlingmann (aris-comm-on-nu) 29 Mar 2018, 15:31

I'm sorry I don't see any change? What did you change exactly?

Marek (marek) 29 Mar 2018, 21:25

I have fixed vertical carousel, now it works when you change the quantity or product size

Aris Schlingmann (aris-comm-on-nu) 30 Mar 2018, 08:46

Ah I see, thanks! What code did you change so I can merge it into my development environment?

Actually I meant by up/down arrows the arrows shown when clicking an image. The up/down arrows do display correctly now but clicking on it does not select the next/prev image. See attached image.
Could you please have a look at this?

Schermafbeelding 2018-03-30 o... (919.2 KiB)
Marek (marek) 30 Mar 2018, 15:06

I have fixed the file /themes/venedor/assets/js/theme/js
As for the issue, it's because there is no images to scroll. It works when you have enough images