Friday, October 21, 2022

Prestashop 1.7 thumbnails of variants in product page

this code will display UNIQUE images of product variants images under main  image product in product page 
ested on ubuntu 20.04 LTS / Prestashop 1.7.8.7 / Php 7.4)

try to change code between 'product_images' and its end of file
YOUR_THEME_SYSTEM_PATH/templates/catalog/_partials/product-cover-thumbnails.tpl


{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">
{assign 'allIds' []}
{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}"}
{append var='allIds' value="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"}
{/foreach}
{/foreach}
{assign 'visitedImgs' []}
{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}"}
{if in_array({$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')},$allIds)
&& !in_array({$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')},$visitedImgs) }
{append var='visitedImgs' value="{$link->getImageLink($product.link_rewrite, $thumbImageId, 'medium_default')}"}
<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>
{/if}


{/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}


Credits:
https://www.prestashop.com/forums/topic/963580-showing-thumbnails-for-all-combinations/ (duplicated thumbs are shown)