Jump to content

[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)
Link to comment
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) :

Link to comment
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,

Link to comment
Share on other sites

  • buckleyjeff123 changed the title to [Prestashop 1.7.5.2] - Ajout d'information dans la page produit
  • 1 month later...

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,

Link to comment
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.

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

Link to comment
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}

 

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
×
×
  • Create New...