Jump to content

Scroll X version mobile sur images produit Ps 1.6

Manu-41
 Share

Recommended Posts

Manu-41 Mentor

Manu-41

Posted
Posted (edited)

Bonjour,

je suis sous ps 1.6 et je cherche à optimiser l'affichage sur version mobile.

Je voudrais avoir qu'une image produit avec un scroll horizontale sur les autres images du produit.

J'ai cherché, mais pas trouvé de réponse sur le forum. Auriez-vous une idée de comment faire sans passer pas un module?

Merci pour votre aide

 

10Capture.PNG

Edited by Manu-shop (see edit history)
Link to comment
Share on other sites
JulienPct Rising Star

JulienPct

Posted
Posted

En soit, comme ça m'a l'air d'être un carrousel, il suffirait d'ajouter une classe à l'image pour qu'elle soit visible et que les autres soit cachés.

Ensuite si il faut des transitions alors il faut placer les images en "dehors de l'écran" pour avoir l'animation de translation.

Après au clic d'une flèche les classes des images changent.

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted

De base, il n’y a qu'une image en grand format, les autres sont en thumbnail.

Je n'ai pas vu de tuto pour le faire.

Je pensai à cacher sur version mobile les thumbnails, pour avoir mon image produit en grand.

Et ajouter les curseurs (droit/gauche) pour afficher/voir les autres images. Mais c'est là que je cherche comment faire.

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted

le code 

<!-- thumbnails -->
					<div id="views_block" class="clearfix">
						
						<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}{{/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}}{/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}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if}  />
											</a>
										</li>
										{if $smarty.foreach.thumbnails.iteration == 1 || $smarty.foreach.thumbnails.iteration == 2}
    	{assign var='img2src' value=$link->getImageLink($product->link_rewrite, $imageIds, 'large_b_product')}
    {/if}
									{/foreach}
								{/if}
							</ul>
						</div> <!-- end thumbs_list -->
						{if isset($images) && count($images) > 2}
							<span class="view_scroll_spacer">
								<a id="view_scroll_left" class="bx_top" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
									{l s='Previous'}
								</a>
							</span>
						{/if}
						{if isset($images) && count($images) > 4}
							<a id="view_scroll_right" class="bx_bottom" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
								{l s='Next'}
							</a>
						{/if}
					</div> <!-- end views-block -->
					<!-- end thumbnails -->

 

Link to comment
Share on other sites
JulienPct Rising Star

JulienPct

Posted
Posted

Le truc est que, sauf erreur de ma part, quand on ajoute une image à un produit par exemple, cette image est directement "convertie" en plusieurs formats afin de pouvoir l'utiliser à plusieurs endroits sans la déformer. 

Il y a sûrement à cet endroit : "getImageLink($product->link_rewrite, $imageIds, 'large_default')", car je ne vois pas où ça pourrait être si ce n'est pas là, un paramètre de la fonction getImageLink() qui permet de préciser la taille de l'image que l'on veut récupérer.

Sinon, à regarder si cette fonction en appelle d'autres dans lesquelles une taille est précisée. Si oui, alors on surcharge, sinon, il faudrait debugger tout le chemin afin de savoir à quel moment les tailles sont présentes et, par conséquent, à quel moment ce choix est décidé.

 

C'est vers chemin que je chercherais : 

    - Trouver le controller qui appelle ce TPL

    - Debugger toutes les fonctions et variables utilisées

    - Une fois trouvé, je surcharge et voila.

 

Plus simple à dire qu'à faire 😀

 

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted (edited)

Salut,

bon, cela n'est pas parfait à mon avis mais voici ce que je viens de faire en 5 minutes :

j'ai modifié le fichier themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl 

<div class="images-container hidden-sm-down">
  {block name='product_cover'}
    <div class="product-cover">
      {if $product.default_image}
        <img class="js-qv-product-cover" src="{$product.default_image.bySize.large_default.url}" alt="{$product.default_image.legend}" title="{$product.default_image.legend}" style="width:100%;" itemprop="image">
        <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
          <i class="material-icons zoom-in">search</i>
        </div>
      {else}
        <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
      {/if}
    </div>
  {/block}

  {block name='product_images'}
    <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.default_image.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>
  {/block}
{hook h='displayAfterProductThumbs'}
</div>
<div class="images-container hidden-sm-up">
  {block name='product_cover'}
    <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.default_image.id_image} selected {/if}"
              src="{$image.bySize.large_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              style="width:100%;"
              itemprop="image"
            >
          </li>
        {/foreach}
      </ul>
    </div>

  {/block}
</div>

46754042_Capturedecran2021-10-27a20_09_27.thumb.png.67f811258b11a801a12b6f14c315115a.png

Edited by Mediacom87 (see edit history)
Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
il y a 16 minutes, JulienPct a dit :

C'est la même image partout ? Aucune thumbnails est affichée en grand format si ?

Là vous parlez de la partie originelle du template donc oui c'est toujours la même dénomination puisque une boucle est faite .

Lorsque l'on est sur mobile le thumbnail disparait, comme le demandait le post initial et seul les grandes images sont utilisées pour créer le carrousel.

Link to comment
Share on other sites
JulienPct Rising Star

JulienPct

Posted
Posted (edited)
9 minutes ago, Mediacom87 said:

Lorsque l'on est sur mobile le thumbnail disparait, comme le demandait le post initial et seul les grandes images sont utilisées pour créer le carrousel.

Ca j'ai bien compris mais dans le BO, lorsqu'on ajoute des images pour un produit, seul l'image par défaut est en grand format non ?

Donc il faut bien, dans la boucle de produit, changer la source des thumbnails afin de sélectionner un autre format ?

Edited by JulienPct (see edit history)
Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
il y a 20 minutes, JulienPct a dit :

Ca j'ai bien compris mais dans le BO, lorsqu'on ajoute des images pour un produit, seul l'image par défaut est en grand format non ?

non

il y a 20 minutes, JulienPct a dit :

Donc il faut bien, dans la boucle de produit, changer la source des thumbnails afin de sélectionner un autre format ?

non

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
il y a 33 minutes, JulienPct a dit :

J'avoue que c'est peu explicite comme réponse

au moins c'est précis.

Toutes les images uploadées sur un produit son converti dans tous les formats définis dans la configuration des images PrestaShop sur la section Produits.
Après, le code auquel tu fais référence est justement celui de base de Prestashop moi j'ai juste rajouté le carrousel en dessous en cachant les éléments en fonction de la définition de l'affichage. 

.hidden-sm-down

.hidden-sm-up

 

Link to comment
Share on other sites
JulienPct Rising Star

JulienPct

Posted
Posted
6 minutes ago, Mediacom87 said:

Toutes les images uploadées sur un produit son converti dans tous les formats définis dans la configuration des images PrestaShop sur la section Produits.

Ca au moins on est d'accord.

 

6 minutes ago, Mediacom87 said:

moi j'ai juste rajouté le carrousel en dessous en cachant les éléments en fonction de la définition de l'affichage.

Oui et vous affichez pour chaque image dans le foreach cette dernière au format : src="{$image.bySize.home_default.url}" soit 250x250 ?

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
il y a 9 minutes, JulienPct a dit :

Ca au moins on est d'accord.

 

Oui et vous affichez pour chaque image dans le foreach cette dernière au format : src="{$image.bySize.home_default.url}" soit 250x250 ?

Je vais encore le répéter, je ne fais rien c'est le code d'origine.

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
  • Author
Posted (edited)

bonjour,

merci pour ces messages.

1 hour ago, Mediacom87 said:

j'ai juste rajouté le carrousel en dessous en cachant les éléments en fonction de la définition de l'affichage.

Comment as-tu fait pour ajouter un carrousel sur l'image produit ? Ou tout du moins, ajouter la fonction pour passer à l'autre image produit en scrollant sur x ?

Sur la version 1.6, en utilisant les flèches de scroll, l'image ne se changent pas toute seul, il faut cliquer sur les images. Sinon j'aurai pu réutiliser ces flèches pour faire défiler les images.

Edited by Manu-shop (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...