Nous allons voir dans ce tutoriel comment créer un système de zoom d’image de type lightbox en modal ! Le principe sera de cliquer sur une petite vignette afin de voir l’image en grand.
Comment mettre cela en place ?
On part du principe que vous avez déjà un thème avec un système de zoom sur vos images produits. Du coup on va partir sur une création complète du système pour par exemple le mettre dans une page ou dans une description d’un produit pour un guide des tailles ou autre…
Le Javascript – Fonctionnement du système
Rendez-vous dans boutique en ligne – actions – modifier le code – trouvez le dossier Ressources (Assets) et ouvrez votre fichier .js généralement theme.js, base.js, global.js et copiez/collez le code suivant:
if ((typeof window.DG) == 'undefined') { window.DG = {}; }
DG.ZoomImg = (id) => { let zoomWrapper = document.querySelector('.dgImgZoomImg-wrapper'); let zoomWrapperImgs = zoomWrapper.querySelectorAll('.dgImgZoomImg');
Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.