Afficher Uniquement Les Photos De La Déclinaison D'un Produit

[samjouzel]

Bonsoir à tous,

 

Je suis entrain de faire une boutique classique comme le modèle de base de PS :

• Un produit avec plusieurs déclinaisons : 3 tailles, 3 couleurs ==> 9 déclinaisons
• Deux photos par produits me donne 18 photos, donc j'ai uploader 18 photos dans "images" du produit et je les ai attribués à chaque déclinaison
• J'ai mis une déclinaison "par defaut"

 

Quand je vais sur mon produit dans le front de ma boutique je vois bien ma déclinaison par défaut qui s'affiche :

• La photo principale est OK
• La taille et la couleur sont bien sélectionnés

Mais dans en dessous la photo principale je vois toutes les photos de mes déclinaisons...

 

Question :

 

Comment n'afficher que les photos de la déclinaison ? Car je trouve que ça embrouille le client...effectivement si mon client parcours les photos et en choisi une en cliquant dessus, cela ne change pas la taille et la couleur donc s'il fait pas gaffe et clic sur "acheter" il achetera la déclinaison par defaut et pas celle de la photo choisie...

 

Merci d'avance pour vos astuces !!

 

Bonne soirée.

 

Samuel

 

 

[Eolia]

Il suffit de commenter le bloc qui affiche les miniatures dans product.tpl de votre thème.

 

Les images correspondant aux déclinaisons s'afficheront lors de leur sélection (si elles ont bien été associées pour chaque déclinaison en BO)

[samjouzel]

Il suffit de commenter le bloc qui affiche les miniatures dans product.tpl de votre thème.

 

Les images correspondant aux déclinaisons s'afficheront lors de leur sélection (si elles ont bien été associées pour chaque déclinaison en BO)

 

Salut Eolia,

 

Merci pour ta réponse !

 

Le product.tpl de mon template fait 950 lignes donc je sais pas trop où il faudrait faire une modif

Plutôt dans "Product image" ou "tumbnails" ? ou autre ?

 

Si tu peux m'aider je peux poster le fichier ^^

 

Bonne journée !

[Eolia]

dans le bloc <!-- right infos--> trouver un bloc qui ressemble et commence par : 

{if isset($images) && count($images) > 0}
				<!-- thumbnails -->

et le commenter ( <!--  le bloc  --> )

 

et idem pour le suivant :

{if isset($images) && count($images) > 1}

[samjouzel]

J'ai fais des tests et effectivement ça élimine toutes les images des thumbnails, mais laisse toutes les déclinaisons dans les photos principales...

 

J'ai pas de code pour right infos mais juste pour left infos

{if isset($images) && count($images) > 0}
				<!-- thumbnails -->
				<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
					<div id="thumbs_list" class="products_slider">
						<div id="thumbs_list_frame" class="owl-carousel owl-navigation-lr {if $thumbs_direction_nav==4} owl-navigation-circle {else} owl-navigation-rectangle {/if}">
						{if isset($images)}
							{capture name="small_default_width"}{getWidthSize type='small_default'}{/capture}
							{capture name="small_default_height"}{getHeightSize type='small_default'}{/capture}
							{foreach $images  as $image}
								{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}
								<div id="thumbnail_{$image.id_image}" data-item-nbr="{$image@index}" class="item">
									<a href="javascript:;" title="{$imageTitle}">
										<img class="img-responsive replace-2x" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'small_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$smarty.capture.small_default_height}" width="{$smarty.capture.small_default_width}" itemprop="image" />
									</a>
								</div>
							{/foreach}
						{/if}
						</div>

					</div> <!-- end thumbs_list 
				</div> <!-- end views-block -->
		         {hook h='displayAnywhere' function="getProThumbsItemsCustom" mod='stthemeeditor' caller='stthemeeditor'}
				<!-- end thumbnails -->
			{/if}
			{if isset($images) && count($images) > 1}
				<p class="resetimg clear no-print">
					<span id="wrapResetImages" style="display: none;">
						<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" data-id="resetImages">
							<i class="icon-repeat"></i>
							{l s='Display all pictures'}
						</a>
					</span>
				</p>
			{/if}
		</div>  <!-- end pb-left-column -->
		<!-- end left infos-->

Voila le code, il faut ptet faire une modif du code pour aller afficher uniquement les images de la déclinaison choisie ? tu en pense quoi ?

 

Il y a aussi un block "<!-- product img-->" au dessus, je pense qu'il faut le modifier aussi pour afficher uniquement la déclinaison...

 

Merci pour ton aide

[samjouzel]

dans le product image il ya "if $have_image", donc c'est peut être là qu'il faut modifier pour afficher que la déclinaison choisie et pas toutes les photos liées au produit... :

{if $have_image}
					<div id="view_full_size">
						<div id="bigpic_list_frame" class="owl-carousel owl-navigation-lr {if $thumbs_direction_nav==4} owl-navigation-circle {else} owl-navigation-rectangle {/if}">
						{foreach $images  as $image}
							{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}
							<div class="item">
								<div id="bigpic_{$image.id_image}" class="{if $enable_zoom} easyzoom {/if} {if $enable_zoom==2} disable_easyzoom_on_mobile {/if} bigpic_item easyzoom--overlay">
									<a href="{if ($enable_zoom || $enable_thickbox) && (!$content_only || ($content_only && $enable_zoom))}{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}{else}javascript:;{/if}" {if $enable_thickbox} data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if} replace-2x" {else} class="replace-2x"{/if} title="{$imageTitle}">
										<img class="replace-2x img-responsive" {if $pro_image_column_md>4} src="{$link->getImageLink($product->link_rewrite, $imageIds, 'big_default')|escape:'html':'UTF-8'}" height="{$smarty.capture.big_default_height}" width="{$smarty.capture.big_default_width}" {else} src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}" height="{$largeSize.height}" width="{$largeSize.width}" {/if} title="{$imageTitle}" alt="{$imageTitle}" itemprop="image" />
										{if !$content_only && !$enable_zoom && $enable_thickbox}<span class="span_link no-print"><i class="icon-resize-full icon-0x"></i></span>{/if}
									</a>
								</div>
								{if !$content_only && $enable_thickbox && $enable_zoom}
									<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="span_link no-print{if $image.id_image == $cover.id_image} shown{/if} replace-2x" title="{l s='View larger'}"><i class="icon-resize-full icon-0x"></i></a>
								{/if}
							</div>
						{/foreach}
						</div>
						{$smarty.capture.sale_reduction}
					</div>
				{else}
					<div id="view_full_size">
						<img itemprop="image" {if $pro_image_column_md>4} src="{$img_prod_dir}{$lang_iso}-default-big_default.jpg" height="{$smarty.capture.big_default_height}" width="{$smarty.capture.big_default_width}" {else} src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" width="{$largeSize.width}" height="{$largeSize.height}" {/if} id="bigpic" alt="{$product->name|escape:'html':'UTF-8'}" title="{$product->name|escape:'html':'UTF-8'}" />
						{$smarty.capture.sale_reduction}
					</div>
				{/if}

[samjouzel]

Je sais pas si qq'un d'autres aurait une compétence là dessus ?

 

J'ai tenté des trucs mais a part tout afficher ou rien afficher je vois pas... :-(