[Résolu][Prestashop 1.7.5.2] - Ajout d'information dans la page produit

[buckleyjeff123]

Bonjour à tous,

Après de nombreuses recherches infructueuses j'aurais besoin d'aide sur un ajout d'information dans la fiche produit.

En effet je souhaiterais afficher le nombre de photos d'un produit afin de permettre au visiteur du site de suivre l'avancé de la visualisation des images d'un produit (exemple : image 1 sur 7, image 2 sur 7 etc...)

Quelqu'un aurait une idée de comment faire ?

Merci d'avance, en espérant ne pas être passé à côté d'un sujet traitant déjà de cela.

Edited November 24, 2019 by buckleyjeff123
Résolu (see edit history)

[Mediacom87]

Conseils pour une meilleure utilisation du forum

Questions détaillées
N’hésitez pas à donner des détails dans vos posts, vous obtiendrez des réponses plus facilement et plus rapidement, plutôt que d’autres questions.

Voici une liste d'informations importantes à préciser :

  Quote

Type d’install (nouvelle/MàJ) :
Version de PS :
URL du site concerné :
Thème (défaut/perso) :
Code (original/modifié) :
Hébergement :
Version de PHP :
Version de MySQL :
Navigateur(s) concerné(s) :

[buckleyjeff123]

Bonjour,

Maintenant que vous l'écrivez cela paraît évident. Désolé pour le manque d'informations.

Type d’install (nouvelle/MàJ) : nouvelle
Version de PS : 1.7.5.2
URL du site concerné : local
Thème (défaut/perso) : défaut
Code (original/modifié) : non
Hébergement : local
Version de PHP : Database client version: libmysql - 5.1.73. PHP version: 7.2.7

Navigateurs) concerné(s) : tous.

Merci,

[buckleyjeff123]

Bonjour,

J'ajoute un peu d'informations. Au cas où cela puisse aider à m'apporter de l'aide.

J'ai un peu avancé sur le sujet. Maintenant j'arrive à ajouter le nombre de photos présentes dans la galerie avec l'ajout du bloc suivant dans le fichier product-cover-thumbnails.tpl :

    {if $language.iso_code =='fr'}
      <p>Nombre de photos : {$product.images|@count}</p>
    {elseif $language.iso_code =='br'}
      <p>N&ugrave;mero de fotos : {$product.images|@count}</p>
    {/if}

Cependant je n'arrive toujours pas à afficher l'état d'avancement avec quelque chose dans le genre où je dois encore trouver le xxxxxxx :

    {if $language.iso_code =='fr'}
      <p>Photos xxxxxxx sur {$product.images|@count}</p>
    {elseif $language.iso_code =='br'}
      <p>Fotos xxxxxxx sobre {$product.images|@count}</p>
    {/if}

Quelqu'un pour m'aider ?

Merci,

[AlexanderOs]

Bonjour

Perso je ferai cela en javascript, je m'explique:

Dans ton template tu insert quelque chose du genre :

<p>Photos : <span id="thumb_number">1</span> / {$product.images|@count}</p>

Tu mets un event sur le parent  des miniatures et tu récupère l'index de l'enfant au click.

Il ne te reste plus qu"à mettre a jour #thumb_number.

[buckleyjeff123]

Bonjour,

Je vais essayer de regarder avec ce que tu viens de me dire c'est effectivement une excellente idée.

Merci

[buckleyjeff123]

Et voilà le résultat si cela peut intéresser quelqu'un. Il suffit juste dans le backoffice de mettre un numéro allant de 1 à X dans la légende des photos.

<div class="images-container">
  {block name='product_cover'}
    <div class="product-cover">
      {if $product.cover}
        <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.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">&#xE8FF;</i>
        </div>
      {else}
        <img src="{$urls.no_picture_image.bySize.large_default.url}"  alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;">
      {/if}
	<!-- Début 1er Ajout pour gestion d'affichage du texte si différentes langues exemple ici avec Français et Brésilien  /  -->
	  {if $language.iso_code =='fr'}
 	   	<p align="center" style="margin-top:3px;">Photo <span id="mythumb"> 1</span> / {$product.images|@count}</p>
	  {elseif $language.iso_code =='br'}
 	    <p align="center" style="margin-top:3px;">Foto <span id="mythumb"> 1</span> / {$product.images|@count}</p>
	  {/if}
	<!-- Fin 1er Ajout  /  -->
    </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.cover.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"
			  id="{$image.legend}"
            >
		<!-- Début 2ème Ajout pour la création de l'évenement javascript et changement du texte "mythumb" sur clique de la vignette  /  -->
			<script>
			var nouveau = "{$image.legend}";
    		var element = document.getElementById('{$image.legend}');
    		element.onclick = function() {
       	 		document.getElementById('mythumb').innerHTML = {$image.legend};
    		};
			</script>
		<!-- Fin 2ème Ajout  /  -->
          </li>
        {/foreach}
      </ul>
    </div>
  {/block}
</div>
{hook h='displayAfterProductThumbs'}

Vous me direz si cela vous semble correct en tout cas cela fonctionne.

Merci 

[AlexanderOs]

Bonjour

Je viens de tester le problème est qui si l'image de couverture et l'image 2, au chargement de la page 1 sera affiché.

Voici un exemple :

{literal}
    <script language=javascript>
    <!--
        window.addEventListener("DOMContentLoaded", () => {

            const thumb_number = document.getElementById('thumb_number');
            const thumbs = document.querySelectorAll('.product-images.js-qv-product-images > li');

            Array.from(thumbs).forEach((element, index) => {
              let imageIndex = (index + 1);
              
              if(element.children[0].classList.contains('selected')) {
                thumb_number.innerText = imageIndex
              }
              
              element.dataset.number = imageIndex;
              element.addEventListener('click', () => thumb_number.innerText = imageIndex)
            })   
            
        });
    // -->
    </script>
{/literal}

 

[buckleyjeff123]

Oui effectivement je n'ai pas prévu ce cas.

Pour ce que tu écris, tu dis c'est un exemple. Mais c'est un exemple d'un script qui fonctionne quelle que soit l'image de couverture ?

Et si oui il faut le placer au même endroit et remplacer le mien ?

Merci,

[AlexanderOs]

Oui le script fonctionne parfaitement, tu peux le mettre en bas de la page, après le mieux c'est de le mettre dans le fichier custom.js du template.

[buckleyjeff123]

Merci beaucoup pour ton aide.