Prestashop: [Improvement] Display all thumbnails for all combinations, only the main image is changed when selecting a combination

[superskyman100]

Edit by Khouloud

Improvement: I need to show all variations images on the product page FO.
When the customer changes the combination, only the main image is changed.

There is a solution provided here: https://www.prestashop.com/forums/topic/963580-showing-thumbnails-for-all-combinations/

Describe the bug

BIG problem to correctly associate product color combinations with pictures without ruining customer experience and product page ergonomic...

Ex : lingerie product with different colors and size

https://www.sexy-cherry.com/en/p/43-634-amazing-sexy-panties-women-high-waist-lace-thongs-and-g-strings-underwear-ladies-hollow-out-underpants-intimates-lingerie.html#/8-color-white/30-size-xs

BO :

1/ attribute type for size : radio, attribute type for color : color & texture
2/ create product combinations with two different attributes sizes and colors
3/ associate each color combination to the right image (ex : all the white lingerie combinations (S,M,L,XL) will be associated with the white lingerie picture... and so on for each color combination)

FO Product page :

• there is always one little 'slide/carousel' near the main big image (either on the left or under the main product picture). This slide is supposed to show ALL the product variants while the big image shows the customer's choice.
• if i strictly associate each image to each color, the product page won't show any other variant picture than the one chosen as 'default combination'
• if tweak a bit (associate 'incorrectly' default combination with ALL the pictures if i want to show all variant on the 'landing' product page), then if i click on the desired color swatch (ex : red) ALL the variants pictures (ex : white, black, blue...) will disappear in the slide/carousel !!
• If the customer want to see other variants, he cannot use the 'mini slide/carousel, he is obliged to click on the color swatches to see the other colors of the same product

FO Catalog / Carousels :

• the images doesn't fade/change when i hover on them
• i have to tweak (associate 'incorrectly' default combination with ALL the pictures) to have the fading effect in the product box

Needless to say : VERY BAD for sales

State of art and functionalities : any lingerie/mode/clothes shop, you'll see ALL products color variations ALWAYS visible near the main image on the product page...

Tested on
PrestaShop version: 1.7.5.1 - 1.7.6.2
PHP version: 7.2

[khouloudbelguith]

Hi @superskyman100,

Thanks for your report.
I think your issue is similar to this ticket: https://github.com/PrestaShop/PrestaShop/issues/12241
Which fixed with this PR: https://github.com/PrestaShop/PrestaShop/pull/15748 in the next version PS1.7.7.0.

Thanks to check & feedback.

[superskyman100]

Hello,

I've tried the code it's not working as expected, the thumbnails on product page are only showing the product associated to the color, and not all the variations. The problem is that Prestashop is only showing up the images associates to the selected combinations.

It's not good for the customer experience, cause the customer cannot DIRECTLY/IMMEDIATELY see ALL the variations images on the product page. He has to click on the color swatch to see other pictures. NO website in my niche (clothes, lingerie....) does this way (and there is a lot).

Usually, the color swatches are ONLY changing the main image (and optionally rearrange the order of the little thumbnails/carousel according to the selected colors), without deleting the other combinations in the thumbnails/carousel.

In other words, ALL the combination should ALWAYS showing up in the carousel/thumbnails. And if the customers clicks on the color swatch, ONLY the main image will change, according to the selected color (and optionally the carousel is rearranged showing up in priority the associated color variation pictures) .

This is like that on 99% of websites, and i guess that's because it's always better to show up ALL the available choices, the thumbnails/carousel are made for that. It's also important for ergonomics/customer experience, cause the customer can always click on the carousel variations instead of color swatches, to quickly see what he is attracted for.

[khouloudbelguith]

@superskyman100, so you need to show all variations images on the product page.
When the customer changes the combination, only the main image is changed.

Ping @PrestaShop/prestashop-product-team what do you think of this improvement? or reorder images for a product combination could be a solution also.

Thanks!

[superskyman100]

Yes. That's the state of art.
That's very weird no one ever reported this problem on PS 1.7...

[PrestaShark]

@superskyman100 https://github.com/PrestaShop/PrestaShop/issues/17345 the same issue?

[superskyman100]

@PrestaShark not the same problem

[superskyman100]

Hello,

Any clue ?? I'm still searching around, but i don't see any light...

[coloronyou]

I have the same issue in our site :(

[superskyman100]

Some freelance will fix it for me (maybe)
If i got the solution i share here

[superskyman100]

PS 1.7 thread :

https://www.prestashop.com/forums/topic/963580-showing-thumbnails-for-all-combinations/

The problem is that my product-cover-thumnails is like that :

<div class="images-container images-container-{if $iqitTheme.pp_thumbs == "left" || $iqitTheme.pp_thumbs == "leftd"}left images-container-d-{$iqitTheme.pp_thumbs} {else}bottom{/if}">
    {if $iqitTheme.pp_thumbs == "left" || $iqitTheme.pp_thumbs == "leftd"}
        <div class="row no-gutters">
            {if $product.images|@count gt 1}<div class="col-2 col-left-product-thumbs">{include file='catalog/_partials/_product_partials/product-thumbnails.tpl'}</div>{/if}
            <div class="{if $product.images|@count gt 1}col-10{else}col-12{/if} col-left-product-cover">{include file='catalog/_partials/_product_partials/product-cover.tpl'}</div>
        </div>
     {else}
        {include file='catalog/_partials/_product_partials/product-cover.tpl'}
        {include file='catalog/_partials/_product_partials/product-thumbnails.tpl'}
     {/if}
</div>

I don't know how to adapt the suggested code to my template (i'm not a programmer)...

Anyone could help ??

Thanks

[colinegin]

When creating a product with combinations and adding pictures to it, if you decide not to associate any of them to your combinations, then ALL images will be shown for every product combination page. Would that solve your problem @superskyman100 @coloronyou @MarkALeonard ?

[superskyman100]

It won't solve the problem cause the color swatches won't be functional.

We use this workaround : we duplicate ALL images (or most relevant ones) and select the ones we want for each combination. For the last color combination, because we've duplicated the images, we still can show and select others colors if we want to show all combinaisons on thumnails with functional thumbnails.

Ex :
REMOVED

Here, for the black variant, we will begin with black combinations and finish with the red one to show ALL variant in thumbnails AND keeping the color swatches functional (meaning the main image will match with the selected color)

[PierreRambaud]

It won't solve the problem cause the color swatches won't be functional.

We use this workaround : we duplicate ALL images (or most relevant ones) and select the ones we want for each combination. For the last color combination, because we've duplicated the images, we still can show and select others colors if we want to show all combinaisons on thumnails with functional thumbnails.

Ex :
REMOVED

Here, for the black variant, we will begin with black combinations and finish with the red one to show ALL variant in thumbnails AND keeping the color swatches functional (meaning the main image will match with the selected color)

Please, don't share your website admin address, it's a really bad idea.. Do proper screenshots and remove sensitive data.

[jolelievre]

I think we could add a feature that allows to configure this behaviour:

• Display combination images only
• Display all product images

Ideally we would have a generic shop configuration (manageable in Shop Parameters > Product settings), and an additional one in product page for more specific overriding use cases (I just want this specific product to display all images)

This will then be managed in ProductPresentationSettings via a display_all_Images property which uses the shop configuration as default, and can be overridden by the product if needed.

Then about the color images stuff, for now the ProductLazyArray filters the images so that it matches only the one from combinations, when "Display all images" is enabled it would not filter the images but instead sort them, so that the combination are shown first (this way the color switch is still functional).

[MarkALeonard]

I agree with @jolelievre the best solution would be to have this behaviour as an option.

The suggested work arounds would not work for the client that I initially suggested the PR for. He has a shop selling t-shirts, one design per product with 6 sizes and 8 colours. Duplicating the images for every combination would be tiresome.

I haven't delved into adding options in the backend of Prestashop yet but will give it a go when I have some time later this month. Unless anyone else could assist or point me in the right direction.

[MarkALeonard]

Here is an example of the current PR in action. https://test.bearshaped.com/gb/t-shirts/32-747-crystal.html#/size-s/colour-black

[mamastudios]

Here is an example of the current PR in action. https://test.bearshaped.com/gb/t-shirts/32-747-crystal.html#/size-s/colour-black

Hi how did you solve the problem? thank you