Showing thumbnails for all combinations

[Inform-All]

For Prestashop 1.7 when you have a image for every combination of a product, the thumbnail only shows the image for that selected combination.
I just wanted to share my solution to always show all combination images in the thumbnails.

In "src/Adapter/Image/ImageRetriever.php arround line 105, comment this if statement as shown below:

foreach ($images as $image) {
	//if (in_array($productAttributeId, $image['associatedVariants'])) {
		$filteredImages[] = $image;
	//}
}

Since there is no possibility to override the Core Prestashop files this solution is kinda nasty.

[Andrei Gapejev]

Thank You! Code above shows all images. I suggest code below if needed to shown combination image first and then other images (not associated with an combination):

File: src/Adapter/Image/ImageRetriever.php

Line: 105

Code:

        foreach ($images as $image) {
            if (in_array($productAttributeId, $image['associatedVariants'])) {
                $filteredImages[] = $image;
            }
        }
		foreach ($images as $image) {
            if (count($image['associatedVariants'])==0) {
                $filteredImages[] = $image;
            }
        }

 

[zod]

I have problem with both codes, only some thumbnails displays. To have all combinations images i modified around row 50. Adding $productAttributeId = 0

See code below

public function getProductImages(array $product, Language $language)
    {
        $productAttributeId = $product['id_product_attribute'];
        // Show all thumbnail in product page
        $productAttributeId = 0;
 
        $productInstance = new Product(
            $product['id_product'],
            false,
            $language->id
        );

Still not perfect, as the main image doesn't change when the user switches combination.

[zod]

Second way. This is my prefered solution as it is not modifying the core of Prestashop.
It is a Smarty addition in the template of yout theme: templates/catalog/_partials/product-cover-thumbnails.tpl

You find the "product_images" block with a code like this (the code below is from the classic theme, be sure to use your theme, as it could have some customizations)

    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
        {foreach from=$product.images item=image}
          <li class="thumb-container">
            <img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >
          </li>
        {/foreach}
      </ul>
    </div>

You wrap the code in a condition: if the product has combinations then you rebuild the whole thumbnails list, adding all images, else you let it be as default. The code results like this:

  {if isset($combinationImages)}
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
         {foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
              {foreach from=$combination item='image' name='f_combinationImage'}
    
              {assign var='thumbImageId' value="{$combinationId}-{$image.id_image|intval}"}
              <li class="thumb-container">
              <img
                class="thumb js-thumb"
                data-image-medium-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"
                data-image-large-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'large_default')}"
                src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'home_default')}"
                alt="{$image.legend}"
                title="{$image.legend}"
                width="100"
                itemprop="image"
              >
              </li>

              {/foreach}
         {/foreach}
      </ul>
    </div>
  {else}
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images"">
        {foreach from=$product.images item=image}
          <li class="thumb-container">
            <img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >
          </li>
        {/foreach}
      </ul>
    </div>
  {/if}

The only side effect is that the thumbnails are not selecting also the combination to add to the cart, they are just for display, in short: they are not functional.
If the user press the button "adds to cart" , then the real thumbnail is defined by the selected option (or color swatch) of the actual combination.

 

[superskyman100]

Hello guys,

I'm a zero coder, bit harsh for me, and my code is a bit different with my theme, do u have any idea about the way i could implement the solution with that case ?

Here is my product-cover-thumbnails.tpl :

<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>

Seems that this code is quite far away from the Classical theme... But maybe not ... Any help ???

Thanks

 

 

Edited January 30, 2020 by superskyman100 (see edit history)

[zod]

You are right, it seems like your theme has a function to change layout, you see the variable pp_thumbs with values "left" and "leftd", they change css class of the container div, and also the html inside). So, you should not break this logic.
Also, they made includes for the loop of the img tags, the real code is in external files. You should watch inside catalog/_partials/_product_partials/product-cover.tpl and catalog/_partials/_product_partials/product-thumbnails.tpl to try a fix. You should find a code like the one i described.
If things go wrong, maybe the external includes have problems with Smarty variables, i would remove them and paste their code directly in this template (but try to modify the includes first, it should work) .
 

[superskyman100]

Thanks a lot man !!  i've found the code, but still, 'variables' look sometimes a bit different than with the classical theme :

 

This is the product-thumbnails.tpl  :

{block name='product_images'}
    {if $product.images|@count gt 1}
    <div class="js-qv-mask mask">
        <div id="product-images-thumbs" class="product-images js-qv-product-images slick-slider">
            {foreach from=$product.images item=image name=thumbs}
                <div class="thumb-container">
                    <img
                            class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}img-fluid"
                            data-image-medium-src="{$image.bySize.medium_default.url}"
                            data-image-large-src="{$image.large.url}"
                            src="{$image.bySize.medium_default.url}"
                            alt="{$image.legend}"
                            title="{$image.legend}"
                            width="{$image.bySize.medium_default.width}"
                            height="{$image.bySize.medium_default.height}"
                            itemprop="image"
                    >
                   
                </div>
            {/foreach}
        </div>
    </div>
    {/if}
{/block}

It's almost same, but as u can see, it's not exactly too, and so i'm a bit skeptical about a raw Copy/Paste of your code. There is a ''if'' at the beggininng of the code, some DiVS instead of <ul> etc etc... Maybe can help ? 😋

 

Here is the product-cover.tpl (maybe it can help to understand the structure ?)

{block name='product_cover'}
    <div class="product-cover">

        {include file='catalog/_partials/product-flags.tpl'}

        {if $product.images}<a class="expander" data-toggle="modal" data-target="#product-modal"><span><i class="fa fa-expand" aria-hidden="true"></i></span></a>{/if}
        <div id="product-images-large" class="product-images-large slick-slider">
            {if $product.images}
                {foreach from=$product.images item=image name=covers}
                    <div>
                        <div class="easyzoom easyzoom-product">
                            <a href="{$image.large.url}" class="js-easyzoom-trigger"></a>
                        </div>
                        <img
                                {if $smarty.foreach.covers.first} src="{$image.bySize.large_default.url}"{else}data-lazy="{$image.bySize.large_default.url}"{/if}
                                data-image-large-src="{$image.large.url}"
                                alt="{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:40:'...'}{/if}"
                                title="{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:40:'...'}{/if}"
                                itemprop="image"
                                content="{$image.bySize.large_default.url}"
                                width="{$image.bySize.large_default.width}"
                                height="{$image.bySize.large_default.height}"
                                class="img-fluid"
                        >
                    </div>
                {/foreach}
            {else}
                <div>
                    <img src="{$urls.no_picture_image.bySize.large_default.url}"
                         data-image-large-src="{$urls.no_picture_image.large.url}"
                         itemprop="image"
                         content="{$urls.no_picture_image.bySize.large_default.url}"
                         width="{$urls.no_picture_image.bySize.large_default.width}"
                         height="{$urls.no_picture_image.bySize.large_default.height}"
                         alt="{$product.name|truncate:40:'...'}"
                         class="img-fluid"
                    >
                </div>
            {/if}
        </div>
    </div>
{/block}

 

 

 

 

[zod]

You are almost done. The file to use is product-thumbnails.tpl

As you can see, it is pretty close to the original code. Don't worry about the additional "if", it is a control we can omit. So, adapt the code with divs, and voilà:

{block name='product_images'}
    {if isset($combinationImages)}
    <div class="js-qv-mask mask">
        <div id="product-images-thumbs" class="product-images js-qv-product-images slick-slider">
            {foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
              {foreach from=$combination item='image' name='f_combinationImage'}
				{assign var='thumbImageId' value="{$combinationId}-{$image.id_image|intval}"}
                <div class="thumb-container">
                    <img
                            class="thumb js-thumb img-fluid"
                            data-image-medium-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"
                            data-image-large-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'large_default')}"
                            src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"
                            alt="{$image.legend}"
                            title="{$image.legend}"
                            width="{$image.bySize.medium_default.width}"
                            height="{$image.bySize.medium_default.height}"
                            itemprop="image"
                    >
                </div>
              {/foreach}
           {/foreach}
        </div>
    </div>
	{else}
    <div class="js-qv-mask mask">
        <div id="product-images-thumbs" class="product-images js-qv-product-images slick-slider">
            {foreach from=$product.images item=image name=thumbs}
                <div class="thumb-container">
                    <img
                            class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}img-fluid"
                            data-image-medium-src="{$image.bySize.medium_default.url}"
                            data-image-large-src="{$image.large.url}"
                            src="{$image.bySize.medium_default.url}"
                            alt="{$image.legend}"
                            title="{$image.legend}"
                            width="{$image.bySize.medium_default.width}"
                            height="{$image.bySize.medium_default.height}"
                            itemprop="image"
                    >
                </div>
            {/foreach}
        </div>
    </div>
    {/if}
{/block}

 

 

 

 

[superskyman100]

Thanks man,

I don't know if u can see my last post, but i just made a copy paste, cause i tried to figure out what u meant by ''adapt the code with DIVS'  - actually i see nothing wrong (apparently 🤨) with the DIVS of the original code and the DIVS of your code...

But the code u gave me (and that i just copied / paste) just leads to errors as soon as there is a thumbnail to display on product page....

I join the errors files, maybe that can give u a clue about what's wrong (the DIVS ? What DIVS ??)... 

....

Thanks

 

 

 

 

errors.txt

Edited January 31, 2020 by superskyman100 (see edit history)

[zod]

The error is undefined "bySize".
Try to delete these lines, i think they are useless, because the image width and height should be taken via CSS.

                            width="{$image.bySize.medium_default.width}"
                            height="{$image.bySize.medium_default.height}"

 

[superskyman100]

Thank man we are close ! 

No more error but...

1/ The thumbnails/slider shows the default variations images... as much times as there are variations ... (for ex. if there are 3 size of white cloth, the thumbnails will show three time the same associates images - if 3 images of white clothe, the thumbnail will show 3 times the 3 images...))

2/ the slider and main image are not connected anymore... The main image just shows the variations selected by the color swatch. When i click on slider image, it doesn't show the image I click on, but only one image (random ?) variation selected upon the color swatch...

https://www.sexy-cherry.com/en/p/38-751-elegant-femmes.html#/11-color-black/32-size-m

 

 

 

 

 

 

[zod]

Ok, i tested the code a little more and i share a different code below. It solves the first problem.
As for the second problem, there is no solution, with this modify the thumbnails are not connected with combinations anymore, they are not functional. All thumbnails are displayed no matter what you choice. When you select some options, only the main picture changes, and not the related thumbnails.

First some explanations, things are working this way: the thumbnails have this name format (Combination ID - Image ID) for example you can have this list of images:

• 301-1580
• 301-1555
• 302-1230
• 302-1555
• and so on...

In this example we have 2 combinations, with 2 pictures each one, and they are sharing the image 1555, this would result as duplicate.
To avoid this, you could apply a simple house rule while you insert products: never share "general" pictures between combiantions. Use unique images for each combination.

If you still want keep "shared pictures", it doesn't make sense because we are showing them all, after all, no need to select them more than once.
Anyway you can use the code below. It is a dirty trick, because we don't have PHP available in Smarty anymore, and we can't use "array_unique" on the array.
I add a loop to rebuild the array, first I make a new array for preparation ($fullimglist), with the image ID as key, this way it is never duplicated. Then I do the final loop with img tags.

 

{block name='product_images'}
    {if isset($combinationImages)}
    <div class="js-qv-mask mask">
        <div id="product-images-thumbs" class="product-images js-qv-product-images slick-slider">
               {foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
                    {foreach from=$combination item='preimage' name='pre_combinationImage'}
                        {$fullimglist[$preimage.id_image]['img'] = $preimage.id_image}
                        {$fullimglist[$preimage.id_image]['att'] = $preimage.id_product_attribute}
                    {/foreach}
               {/foreach}
               {foreach from=$fullimglist item='image' name='f_combinationImage'}

               {assign var='thumbImageId' value="{$image.att}-{$image.img}"}
                <div class="thumb-container">
                    <img
                            class="thumb js-thumb img-fluid"
                            data-image-medium-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"
                            data-image-large-src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'large_default')}"
                            src="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"
                            alt="{$image.legend}"
                            title="{$image.legend}"
                            itemprop="image"
                    >
                </div>
              {/foreach}
           {/foreach}
        </div>
    </div>
	{else}
    <div class="js-qv-mask mask">
        <div id="product-images-thumbs" class="product-images js-qv-product-images slick-slider">
            {foreach from=$product.images item=image name=thumbs}
                <div class="thumb-container">
                    <img
                            class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}img-fluid"
                            data-image-medium-src="{$image.bySize.medium_default.url}"
                            data-image-large-src="{$image.large.url}"
                            src="{$image.bySize.medium_default.url}"
                            alt="{$image.legend}"
                            title="{$image.legend}"
                            width="{$image.bySize.medium_default.width}"
                            height="{$image.bySize.medium_default.height}"
                            itemprop="image"
                    >
                </div>
            {/foreach}
        </div>
    </div>
    {/if}
{/block}

 

This is the trick. If we want a better solution it could be adding a Smarty modifier. Adding code in this Prestashop file: config/smarty.config.inc.php

A modifier could do some PHP functions, so it would be  "array_unique" on the arrays, and sorting values. But i have not time for this. And I am not sure if that file is ok with updats, or it would be overridden.

 

[superskyman100]

Thank you very much Zod for your help, u are a boss !!

Anyway, I have to conclude that there is no way to safely/durably override the core of PS or Smarty with PS 1.7 ( in most aspects what they call 'upgrades' sound to many of us like regressions...), and that there is no way too to make the thumbnails and color swatches functional at the same time... Too bad for one platform that is supposed to be open source and e-commerce orientated... 

Every day i use PS and get deeper into it, i get more skeptical about it...

Anyway, i've already invested lots of time into it, so i have no choice but to use it with its full bunch of flaws...

 

 

Edited February 1, 2020 by superskyman100 (see edit history)

[zod]

Perhaps in this case we have a regression, in PS 1.6 it was showing all thumbnails, but also the combinations were working. And there was a "show all thumbnails" button to reset them.
To make the same functionality in PS 1.7 i think it is required a deeper rebuild of the whole part, with controlers. The template is not enough.
Perhaps a theme or module could rebuild the whole product image part, but i don't know if any exist, the core "parts" are often let as they are, they move them around but not changing much, because it is easier for developers, and better for compatibility.

Edited February 1, 2020 by zod (see edit history)

[superskyman100]

Well, that's a common problem of informatics : developers think about their way of developing while users are in deep mess. Prestashop sounds to me like that. I spend more time troubleshooting deficient functionalities - and not solving them - than making my shop selling a single dime of something. Developers should ask themselves HOW can we sell with a s****ty product page, that would be a good question. Thanks a lot Zod, anyway, for your help, but after hours and hours of search, i have to conclude that there is no way to solve this nasty problem.

[skeccy]

Hello, scuse me for intrusion.

I have a problem with my product combination images. When i select the combination. The small thumbnail at the bottom of product preview change normally as the selected combination, but the big product image as the same. 
but the larger photo always remains the same despite having been correctly selected.

 

can someone help me please? I do not know what happened

 

before it worked perfectly. My prestashop is version 1.7.7.0

[moonlights]

Hi skeccy, maybe it can help in your case, check Fix cover by selected combination for ps 1.7.7.x

https://github.com/prestarocket-agence/classic-rocket/pull/229/files

mychildtheme/templates/catalog/_partials/product-cover-thumbnails.tpl

replace all 

$product.cover

 to

$product.default_image

This fix is for Classic-Rocket theme, but it should work on the classic theme.

Has anyone tested Showing thumbnails for all combinations on ps 1.7.7.x ?

Edited April 14, 2021 by moonlights (see edit history)

[Catarina123]

Em 14/04/2021 às 12:45, ao luar disse:

Oi skeccy, talvez possa ajudar no seu caso, verifique a tampa de Fix por combinação selecionada para ps 1.7.7.x

https://github.com/prestarocket-agence/classic-rocket/pull/229/files

mychildtheme/templates/catalog/_partials/product-cover-thumbnails.tpl

substituir todos os

$product.cover

para

$product.default_image

Esta correção é para o tema Classic-Rocket, mas deve funcionar no tema clássico.

Alguém já testou mostrando miniaturas para todas as combinações em ps 1.7.7.x ?

Oi, obrigado funcionou para mim, mas quando eu adicioná-lo ao carrinho, a imagem da capa permanece. Existe uma maneira de que quando eu adicioná-lo ao carrinho, a imagem só aparece para a combinação?

[Gatto_Rosso]

On 4/14/2021 at 1:45 PM, moonlights said:

Hi skeccy, maybe it can help in your case, check Fix cover by selected combination for ps 1.7.7.x

https://github.com/prestarocket-agence/classic-rocket/pull/229/files

mychildtheme/templates/catalog/_partials/product-cover-thumbnails.tpl

replace all 

$product.cover

 to

$product.default_image

This fix is for Classic-Rocket theme, but it should work on the classic theme.

Has anyone tested Showing thumbnails for all combinations on ps 1.7.7.x ?

Had same problem after upgrading to PS 1.7.8.6:

this fix works also on this PS version!😀

Thanks for sharing!!