Activer le zoom produit au clic plutôt qu'au survol sur PrestaShop

Pourquoi passer le zoom au clic plutôt qu'au survol

Sur PrestaShop 1.6, le comportement par défaut des images produit repose sur le survol : dès que le curseur passe sur une vignette, l'image principale change et le zoom (JQZoom) s'active. Ce fonctionnement pose plusieurs problèmes concrets :

• **Sur mobile et tablette**, le survol n'existe pas. L'utilisateur touche l'écran, ce qui déclenche simultanément le changement d'image et parfois une navigation non souhaitée.
• **Sur desktop**, un simple passage involontaire de la souris sur les vignettes provoque des changements d'image intempestifs, ce qui dégrade l'expérience utilisateur.
• **Pour l'accessibilité**, un déclenchement au clic est plus prévisible et respecte mieux les attentes de l'utilisateur.

La bonne nouvelle : cette modification ne nécessite pas de toucher à la librairie JQZoom elle-même. Le déclenchement est géré côté thème, dans le fichier JavaScript de la fiche produit.

Identifier le bon fichier à modifier

PrestaShop 1.6 (thème default-bootstrap)

Le fichier responsable du comportement des images sur la fiche produit est :

/themes/default-bootstrap/js/product.js

C'est un point crucial : ne modifiez jamais la librairie JQZoom directement (située dans /js/jquery/plugins/jqzoom/). Le déclenchement de l'affichage des images est géré par le thème, pas par le plugin de zoom lui-même. Modifier le plugin créerait des effets de bord imprévisibles et compliquerait les futures mises à jour.

Localiser le code responsable

Aux alentours de la ligne 258 du fichier product.js, vous trouverez le gestionnaire d'événements qui contrôle le changement d'image au survol des vignettes :

// hover 'other views' images management
$(document).on('mouseover', '#views_block li a', function(){
    displayImage($(this));
});

C'est ce bloc qui déclenche displayImage() — la fonction qui met à jour l'image principale et réinitialise le zoom — à chaque passage de souris sur une vignette.

Modifier le déclenchement : du survol au clic

Étape 1 : Créer un thème enfant (recommandé)

Avant toute modification, travaillez dans un thème enfant pour ne pas perdre vos changements lors d'une mise à jour :

cp -r themes/default-bootstrap/js/product.js themes/mon-theme-enfant/js/product.js

Étape 2 : Remplacer l'événement

Dans votre copie de product.js, remplacez le bloc identifié précédemment :

Avant (survol) :

$(document).on('mouseover', '#views_block li a', function(){
    displayImage($(this));
});

Après (clic) :

$(document).on('click', '#views_block li a', function(e){
    e.preventDefault();
    displayImage($(this));
});

Deux modifications importantes ici :

1. **`mouseover` → `click`** : l'événement ne se déclenche plus au survol mais uniquement au clic.
2. **`e.preventDefault()`** : empêche le comportement par défaut du lien (qui pourrait provoquer une navigation ou un scroll indésirable).

Étape 3 : Gérer le zoom JQZoom lui-même

Le changement ci-dessus concerne uniquement le basculement entre vignettes. Si vous souhaitez également que le zoom loupe sur l'image principale s'active au clic plutôt qu'au survol, il faut modifier l'initialisation de JQZoom dans le même fichier.

Recherchez l'appel d'initialisation de jqzoom (généralement dans la fonction zoomProduct()) :

// Configuration par défaut (survol)
$('#bigpic').jqzoom({
    zoomType: 'standard',
    lens: true,
    preloadImages: true,
    alwaysOn: false
});

Modifiez le paramètre zoomType pour un comportement au clic :

$('#bigpic').jqzoom({
    zoomType: 'standard',
    lens: true,
    preloadImages: true,
    alwaysOn: false,
    showEffect: 'show',
    hideEffect: 'hide'
});

Pour un contrôle total au clic, vous pouvez désactiver le zoom automatique et le gérer manuellement :

// Désactiver le zoom auto au survol
$('#bigpic').off('mouseenter mouseover');

// Activer le zoom au clic
$('#bigpic').on('click', function() {
    $(this).toggleClass('zoom-active');
});

Étape 4 : Ajouter un retour visuel

Puisque le changement ne se fait plus automatiquement au survol, ajoutez un indicateur visuel pour guider l'utilisateur :

/* Curseur pointer sur les vignettes */
#views_block li a {
    cursor: pointer;
}

/* Bordure sur la vignette active */
#views_block li a.active,
#views_block li a:focus {
    border: 2px solid #333;
    outline: none;
}

/* Icône de zoom sur l'image principale */
#image-block {
    position: relative;
}
#image-block::after {
    content: '\f00e'; /* icône loupe Font Awesome */
    font-family: 'FontAwesome';
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: rgba(0,0,0,0.4);
    pointer-events: none;
}

Approche moderne : PrestaShop 1.7 et 8.x

À partir de PrestaShop 1.7, l'architecture front-end a profondément changé. JQZoom a été abandonné au profit de solutions plus modernes.

PrestaShop 1.7

Le thème classic utilise une approche différente avec le fichier :

/themes/classic/assets/js/custom.js

Le zoom est géré via des événements JavaScript natifs ou des librairies comme EasyZoom ou Drift. Le changement de vignettes est déjà basé sur le clic par défaut dans la plupart des thèmes 1.7.

PrestaShop 8.x

Sur PS 8.x, le thème classic a encore évolué. Les images produit sont gérées par le composant product-images qui écoute nativement les événements click. Si vous utilisez un thème personnalisé, vérifiez le fichier :

/themes/votre-theme/_dev/js/product.js

La configuration du zoom se fait souvent via des attributs data-* sur les éléments HTML :

<div class="images-container" 
     data-zoom-type="click" 
     data-zoom-enabled="true">

Si votre thème 8.x utilise encore un zoom au survol, la modification se fait dans le JavaScript compilé du thème. Après modification des sources dans _dev/js/, recompilez avec :

cd themes/votre-theme/_dev
npm install
npm run build

Bonnes pratiques et pièges à éviter

Ne jamais modifier les fichiers core

• **Pas de modification dans `/js/jquery/plugins/`** : ces fichiers sont écrasés à chaque mise à jour.
• **Pas de modification dans `/themes/default-bootstrap/`** si vous n'utilisez pas de thème enfant.
• Privilégiez toujours un override via le thème plutôt qu'un patch du core.

Tester sur tous les devices

Après modification, testez impérativement :

• **Desktop** : le clic fonctionne, le survol ne déclenche plus rien.
• **Tablette** : le tap change bien l'image, pas de double-tap nécessaire.
• **Mobile** : le comportement est fluide, pas de conflit avec le scroll tactile.

Performance

Si vous supprimez le survol au profit du clic, vous pouvez également désactiver le preloadImages de JQZoom pour les vignettes non consultées, ce qui améliore le temps de chargement initial :

$('#bigpic').jqzoom({
    zoomType: 'standard',
    preloadImages: false, // charge uniquement au clic
    lens: true
});

Résumé des modifications

Version PSFichier à modifierÉvénement à changer 1.6`/themes/votre-theme/js/product.js` (ligne ~258)`mouseover` → `click` 1.7`/themes/votre-theme/assets/js/custom.js`Varie selon le thème 8.x`/themes/votre-theme/_dev/js/product.js`Recompilation nécessaire