Zoom image de couverture de la catégorie

[BastND]

Bonjour amis lecteurs,

Prestashop 8

Je cherche à créer un zoom ou agrandir l'image de couverture de la catégorie. 

J'ai navigué dans "apparence/image" mais rien...

Avez vous une solution à mon problème ? merci d'avance

Bon dimanche

[BastND]

Up, une personne à une idée ? Merci 

[kerlin]

Bonjour, ce n'est effectivement pas prévu. Avec un peu de css, il serait cependant possible de créer un effet de zoom au survol. Ou, avec du js, faire un effet "loupe" comme sur les produits. 

1. Zoom avec css : dans le fichier css ajouter 

.category-image-wrapper {
  overflow: hidden;
  display: inline-block;
}

.category-image-wrapper img {
  transition: transform 0.3s ease;
}

.category-image-wrapper:hover img {
  transform: scale(1.2); /* ou 1.1, selon l'effet désiré */
}

et dans le fichier tpl qui affiche l'image (à voir selon le thème), ajouter une div avec la class

<div class="category-image-wrapper">
    <img src="{$category->getImageUrl()}" alt="{$category->name}" class="img-fluid" />
</div>

2. Effet loupe comme sur les produits

a) il faut vérifier si la librairie est appelée sur la page de catégorie sinon il faut l'y appeler, par exemple avec ceci à ajouter dans le tpl qui affiche l'image

<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevateZoom.min.js"></script>

b) ajouter ensuite un peu de JS après l'appel du script. Il faut vérifier le sélecteur de l'image. Si elle a un sélecteur id, remplacer dans le code ci-dessous category-image par le contenu de ce sélecteur. Si elle n'a pas de sélecteur id mais seulement class (par exemple category-container), remplacer dans le code ci-dessous #category-image par .category-container (avec le point devant)

<script>
  $(document).ready(function () {
    $('#category-image').elevateZoom({
      zoomType: "lens",
      lensShape: "round",
      lensSize: 150
    });
  });
</script>

Ne pas oublier d'activer la recompilation du thème dans Performances et de vider le cache.

[BastND]

Merci pour votre retour, je vais regarder ça ce week-end, et vous tenir au courant.