Afficher uniquement la miniature de la déclinaison au chargement de la page produit

webnetcrea · November 17, 2014

Bonjour,

J'utilise Prestashop 1.6 et je souhaiterai uniquement afficher la photo et miniature du produit par défaut au chargement de la page produit, actuellement lors de l'affichage de la page du produit toutes les miniatures des déclinaisons sont affichées, j'ai regardé le fichier product.js mais je n'ai rien trouvé.

Merci pour votre aide

Eolia · November 17, 2014

Regardez plutôt du coté de product.tpl et commentez cette partie:

			{if isset($images) && count($images) > 0}
				<!-- 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">
						<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 -->
			{/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'}" name="resetImages">
							<i class="icon-repeat"></i>
							{l s='Display all pictures'}
						</a>
					</span>
				</p>
			{/if}

webnetcrea · November 17, 2014

Bonsoir,

Je viens de commenter le bout de code mais du coup les miniatures ne s'affichent plus du tout

Eolia · November 18, 2014

Oui c'est normal, mais pourquoi vouloir la photo ET la miniature (s'il n'y en a plus qu'une) ?

Enfin, si vraiment vous y tenez, remplacez le code commenté ci-dessus par:

			<!-- thumbnails -->
			{if $have_image}
					{capture assign=image}{$cover.id_image}{/capture}
				<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
					<div id="thumbs_list">
						<ul id="thumbs_list_frame">
								{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>
						</ul>
					</div> <!-- end thumbs_list -->
				</div> <!-- end views-block -->
				<!-- end thumbnails -->
			{/if}

eliseetmoi · June 10, 2015

Bonsoir

J'ai le même problème cela a fonctionné Webnetcrea?

Question j'utilise le cloud j'ai accès à ce fichier product.tpl si oui pouvez vous me dire ou le trouver?

Un tout grand merci

Elise

eliseetmoi · June 15, 2015

Bonjour Eolia

Déjà un tout grand merci pour ton aide!

Je galère un peu. J'ai essayé de copier ton code dans mon fichier product.tpl mais cela n'a pas fonctionné...

Mon code n'est pas exactement le même que celui que tu avais posté le voici

<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
                   {if isset($images) && count($images) > 2}
                       <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">
                       <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_fashion')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" itemprop="image" />
                                   </a>
                               </li>
                           {/foreach}
                       {/if}
                       </ul>
                   </div> 
                   {if isset($images) && count($images) > 2}
                       <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                           {l s='Next'}
                       </a>
                   {/if}
               </div> 
               
           {/if}

Pourrais tu stp me dire ce que je dois changer exactement pour que toutes les images n'apparaissent pas? Un tout grand merci pour ton aide ELise

Eolia · June 16, 2015

Bonjour Elise,

Ce code devrait fonctionner pour ton cas (affichage d'une seule miniature):

<!-- thumbnails -->
	{capture assign=image}{$cover.id_image}{/capture}
	<div id="views_block" class="clearfix">
		<div id="thumbs_list">
			<ul id="thumbs_list_frame">
			{if isset($images)}
				{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}">
					<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_fashion')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" itemprop="image" />
					</a>
				</li>
			{/if}
			</ul>
		</div> <!-- end thumbs_list -->
	</div> <!-- end views-block -->
<!-- end thumbnails -->

eliseetmoi · June 16, 2015

Merci Eolia pour ta réponse rapide.

Cela ne fonctionne pas correctement....

Voici par exemple une bague

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/71-bague-pierre-argent-plaque-or.html#/3-materiau-argent/4-taille-52/1-couleur-rose

Quand je change la couleur l'image de la déclinaison ne s'affiche pas...

Faut il juste remplacer le code par celui que tu m'as envoyé ou également le commenter?

Je ne souhaite pas spécialement une seule miniature. Peux t on par exemple limiter à 3?

Mais il faudrait que cela ne soit pas les 3 mêmes...

Merci d'avance pour ton aide

Elise

eliseetmoi · June 16, 2015

J'ai aussi un petit texte illisible maintenant en dessous de mon image

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/75-bague-nuage-en-argent.html

Eolia · June 16, 2015

Euh, c'était quoi ton besoin au départ ? J'avais répondu au 1er post, mais ta demande est peut-être différente

eliseetmoi · June 16, 2015

Salut

Voici mon problème pour cette bague j'ai plusieurs tailles, couleurs de pierre et 2 matériaux et par conséquent beaucoup de déclinaisons et d'images

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/71-bague-pierre-argent-plaque-or.html

Sur la page produit toutes les déclinaisons d'images s'affichent et je voudrais juste que s'affiche à cette endroit l'image de produit (parfois il peut y en avoir plusieurs) et non pas toutes les images des déclinaisons.

Tu as compris ma demande?

Merci

Elise

eliseetmoi · June 16, 2015

C'est peut être plus clair avec cet exemple ici

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/68-bague-un-rond.html

J'ai plein de fois la même bague en argent qui s'affiche car j'ai renseigné cette image dans l'image de la déclinaison de chaque taille du 50 au 60

Eolia · June 16, 2015

ok je vois, mais dans ton cas il faut modifier le fichier javascript associé du thème car tes miniatures doivent changer au clic sur la déclinaison.

Un peu plus complexe à faire...

eliseetmoi · June 16, 2015

Ok pourrais tu stp m'envoyer ton prix en MP pour faire cette modif pour moi?

Si cela t'intéresse bien entendu ;-)

Merci

Elise

Eolia · June 16, 2015

Je viens de regarder ton code de page et je pense que on pourrait y arriver avec ça:

<!-- thumbnails -->
                <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
                    {if isset($images) && count($images) > 2}
                        <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">
                        <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}" style="display: none;" {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_fashion')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" itemprop="image" />
                                    </a>
                                </li>
                            {/foreach}
                        {/if}
                        </ul>
                    </div> <!-- end thumbs_list -->
                    {if isset($images) && count($images) > 2}
                        <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 -->

Vu que ton js fait déjà une partie du travail.

En gros, à l'ouverture de la page, on affiche aucune miniature.

Au clic sur une déclinaison, les images correspondantes s'affichent

Tout va dépendre de la fonction js du script product.js

			if (firstTime)
			{
				refreshProductImages(0);
				firstTime = false;
			}
			else
				refreshProductImages(combinations[combination]['idCombination']);

eliseetmoi · June 16, 2015

Merci Eolia. J'ai fait les changements que tu m'as dit dans le fichier product.tpl mais cela n'a pas fonctionné :-(

Tu peux le voir sur cet exemple.

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/68-bague-un-rond.html

Par contre je n'ai pas modifié le product.js je ne trouve pas cette fonction dans mon fichier product.js

Peux tu stp me donner le numéro de la ligne?

Merci encore

Elise

Eolia · June 16, 2015

Dans le fichier http://elise-et-moi-635851744.pswebshop.com/themes/leo_fashion_store/js/product.js ligne 444, je remplacerai (à tester)

			if (firstTime)
			{
				refreshProductImages(0);
				firstTime = false;
			}
			else
				refreshProductImages(combinations[combination]['idCombination']);
			//leave the function because combination has been found
			return;

par

			if (firstTime)
				firstTime = false;
			else
				refreshProductImages(combinations[combination]['idCombination']);
			//leave the function because combination has been found
			return;

eliseetmoi · June 18, 2015

Un tout grand merci Eolia ca marche.

J'ai encore 2 questions.

Est il possible d'avoir 2 images à la place d'une seule?

J'aimerai que les 2 versions argent et plaqué or s'affichent sur la page produit.

Si cela n'est pas possible comment faire pour enlever les petites flèches noires en dessous de l'image?

http://elise-et-moi-635851744.pswebshop.com/fr/bagues/68-bague-un-rond.html

Encore merci, j'espère que je ne suis pas pénible avec toutes mes demandes :-s

Elise

Eolia · June 18, 2015

Mais non, vous n'êtes pas pénible

Pour les 2 images, ce serait beaucoup plus compliqué, donc on oublie.

Pour les flêches, supprimer ces 2 blocs:

Flêche gauche:

                    {if isset($images) && count($images) > 2}
                        <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}

et flêche droite:

                    {if isset($images) && count($images) > 2}
                        <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                            {l s='Next'}
                        </a>
                    {/if}

Afficher uniquement la miniature de la déclinaison au chargement de la page produit

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in