Peut-on n'afficher que deux thumbnails dans la page produit ?

[JCL69]

Salut à toutes et à tous,

 

Je viens vous faire un petit coucou pour vous faire part d'un petit truc qui m'embete un peu. Bon, ce n'est pas un problème mais disons plutôt, une envie de personnaliser un peu Prestashop à ma boutique.

 

Je vous expliques quelle est mon souci :

 

Mes fiches produits contiennent chacune 3 images (deux au format jpg et une au format PNG). Cette dernière est utilisé pour un module tiers qui se sert de cette image PNG pour faire un effet de personnalisation de produit en fonction d'une couleur choisie. Tout marche très bien, sauf que sur la fiche produit, mes trois images apparaissent en thumbs_list_frame.

 

Or, je ne voudrai qu'apparaissent les 2 premières images (a savoir les deux JPG). L'ordre établi des images dans la fiche produit est ainsi :

 

1. Image JPG 1

2. Image JPG 2

3. Image PNG

 

Vous allez me dire "Mais en quoi ça te gêne que l'image PNG apparaisse ?". Eh bien, tout simplement car cette image PNG est un peu le modèle "source" de mes modèles. Donc, c'est assez facile pour quiconque de faire un petit "glisser" du fichier PNG pour recevoir un modèle presque prêt.

 

Alors, je me doute que tout se passe dans le fichier Product.tpl. J'ai cherché sur internet que la boucle Foreach était un peu la clé de voute de tout ça, mais en supprimant cette boucle (soyons fous), je désactives toutes les thumbs. Donc, là c'est un peu trop radical.

 

Si ça peut vous aider, je vous joins le code source de ma product.tpl :

 

 

				<!-- thumbnails -->
				<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
					{if isset($images) && count($images) > 4}
						<span class="view_scroll_spacer">
							<a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
								{l s='Previous'}
							</a>
						</span>
					{/if}
					<div id="thumbs_list" {if isset($warehouse_vars.product_right_block) && $warehouse_vars.product_right_block}class="small-thumblist"{/if}>
						<ul id="thumbs_list_frame">
						{if isset($images)}
							{foreach from=$images item=image name=thumbnails}
								{assign var=imageIds value="`$product->id`-`$image.id_image`"}
								{if !empty($image.legend)}
									{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
								{else}
									{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
								{/if}
								<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
									<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
										<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
									</a>
								</li>
							{/foreach}
						{/if}
						</ul>
					</div> <!-- end thumbs_list -->
					{if isset($images) && count($images) > 4}
						<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
							{l s='Next'}
						</a>
					{/if}
				</div> <!-- end views-block -->
				<!-- end thumbnails -->

 

 

Bref, si quelqu'un (ou quelqu'une) avait une petite piste pour m'aider, je l'en remercies par avance.

[Eolia]

instanciez une variable $i à 0 juste avant la boucle {foreach}

{assign var="i" value=0} 

Ajoutez $i++; juste avant la balise fermante {/foreach}

et ajoutez une condition en début de boucle

{foreach}
{if $i < 2}
...
// contenu de la boucle initiale de votre tpl
...
{/if}
{assign var="i" value=$i++}
{/foreach}

Si les images sont dans un array classique (clés de 0 à xxx) vous pouvez rajouter key=k dans l'initiation de la boucle et utiliser le même code que ci-dessus sans l'incrémentation de $i

{if $k < 2}

...

{/if}

Edited July 15, 2015 by Eolia (see edit history)

[JCL69]

Bonjour Eolia et merci pour ta réponse.

 

Je viens d'essayer, mais la boucle WHILE a l'air de tourner en rond car la page produit charge sans fin...

 

Bon, je mentirai en disant que je suis le programmeur de l'année (au moins, je suis honnête, je le dis !), mais j'ai d'abord pensé à un problème lié à un petit espace dans la balise :

 

{while $i <2}

Visiblement, Dreamweaver m'indique un problème de codage. Il semble considérer le < comme un début de balise. Du coup, j'ai tenté :

{while $i < 2}

Là, Dreamweaver est content... mais ça bloque toujours autant...

 

Le pire, c'est que je me dis que ça doit être un petit truc de rien du tout qui provoque ce blocage...

[Eolia]

Remplacez les while par des if

J'ai édité mon post ci-dessus^^

[JCL69]

Effectivement avec la boucle IF, ça ne fait plus tourner la page en boucle (c'est le cas de le dire).
 
Par contre, pour la commande :

$i++;

Il semble considérer cela comme un simple ECHO (voir capture d'écran)

 

[Eolia]

Bon on va utiliser les fonctions smarty comme il faut et oublier ce qui a été dit précédemment

 

Remplacez votre bloc foreach par celui-ci:

{foreach from=$images item=image name=thumbnails}
	{if $smarty.foreach.thumbnails.iteration < 3}
		{assign var=imageIds value="`$product->id`-`$image.id_image`"}
		{if !empty($image.legend)}
			{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
		{else}
			{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
		{/if}
		<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.iteration == 2} class="last"{/if}>
			<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
				<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
			</a>
		</li>
	{/if}
{/foreach}

[JCL69]

Super, ça marche nickel !!!

 

Un grand merci à toi, Eolia