Jump to content
buckleyjeff123

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

Recommended Posts

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 by buckleyjeff123
Résolu (see edit history)

Share this post


Link to post
Share on other sites

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) :

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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}

 

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More