Images Additionnelles - Zoom Articles

 Objectif : ajouter des images dans un article

Un article est généralement associé à deux images : une image de petite dimension, appelée "vignette", et une image de plus grande dimension connue sous la dénomination "d'image détail", ou "image principale".

Il est très important pour la vente sur Internet de présenter les articles avec davantage de photos ou divers angles de vue. La solution Oxatis permet alors définir des images additionnelles pour ces articles.

Le lien ci-dessous montre un exemple d'article utilisant des images additionnelles :

http://www.oxashop.com/fonctionnalite-images-zoom.htm

Cliquez sur l'image pour l'agrandir

Le principe des images additionnelles est de définir des groupes de 3 images dans vos fiches produits. Ainsi, l'utilisateur clique sur l'image vignette (ou survole, suivant la configuration), il visualise l'image principale associée. En survolant l'image principale, l'utilisateur prend connaissance de la grande image à l'aide d'une fonction de "zoom image".

Vous pouvez ajouter jusqu'à 10 groupes d'images additionnelles (donc 30 images) dans vos fiches produits.

Exemple au niveau du back office :

Cliquez sur l'image pour l'agrandir

Le concept de base ne change pas et il est toujours fortement conseillé de renseigner les 2 images, vignette et détail, dans vos articles. De même, pour les articles avec Options, il est toujours utile de définir une image pour chacune des Options. En effet, ces images seront affichées, par exemple, dans le panier d'achat lorsque vos visiteurs ajouteront ces articles au caddie.

Toutefois, dans la mesure où vous définissez des images additionnelles, elles prennent le pas sur les images principales ou les images des options dans la fiche produit.
 
 Principe

Les images additionnelles s'ajoutent sous forme de "groupes d'images", car il est nécessaire d'importer chaque image avec, au minimum, 2 dimensions différentes :
  • Une image principale qui s'affichera sur la fiche article (à la place de l'image principale configurée dans les propriétés de l'article). Nous vous conseillons de choisir une dimension comprise entre 250 et 400 pixels pour la largeur (ou la hauteur, dans le cas d'image "portrait") de cette image.

  • Une Grande Image (Zoom) qui s'affichera lorsque le visiteur passera la souris sur l'image détail. Pour que l'effet Zoom soit significatif, cette image pourra avoir des dimensions de 2 à 4 fois supérieures à votre image principale.
En définissant au minimum 2 groupes d'images pour un produit, des images vignettes s'afficheront sous l'image principale de votre produit. Ces vignettes sont générées automatiquement à partir de l'image principale. Toutefois, il est conseillé de renseigner également une image vignette, de dimension restreinte, pour chaque groupe d'image afin de réduire le temps de chargement de la page présentant votre article.

 
 Mise en œuvre

L’ajout d’images additionnelles se fait en un seul Glisser/déposer. Nous vous conseillons d’utiliser des images sources dont la taille fait au minimum 600 pixels de large. L’interface permet de créer et d’ajouter les 3 images d’une seule manipulation.

Rendez-vous au menu [Commerce \ Articles], icône Visualiser les propriétés, onglet Images, bouton “Créer une nouvelle liste”, bouton Ajouter. Il suffit ensuite de déposer l’image dans la zone prévue à cet effet.

Cliquez sur l'image pour l'agrandir
L’interface propose alors la personnalisation des 3 images. En cliquant sur le bouton , le système créera les 3 images dans les dimensions par défaut. Chacune des images peut être paramétrée individuellement (nom, catégorie et suffixe) grâce aux onglets.

Cliquez sur l'image pour l'agrandir

N’oubliez pas de sauver les modifications.
 
 Propriétés des images additionnelles

En utilisant le bouton [Propriétés de mise en page], vous pouvez influer sur les dimensions d'affichage de vos images et de vos vignettes. Laissez les champs vides si vos images sont déjà correctement dimensionnées ; elles seront alors affichées dans leurs dimensions natives.

Les images additionnelles ne sont disponibles que dans les fiches articles. Il n'est pas possible d'utiliser cette fonctionnalité dans les WebBlocks.

 
 Propriétés des images additionnelles par défaut

La solution permet de paramétrer une mise en page par défaut qui sera appliquée à tous les articles. Si vous avez défini une mise en page spécifique sur un article (voir paragraphe précédent), celle-ci sera prise en compte uniquement sur cet article.

Pour cela, rendez-vous dans le menu [Commerce \ Articles], menu vertical "Eléments - Mise en page", bouton Modifier.



Cette fenêtre permet de définir la largeur de l'image principale et donc indirectement la largeur de l'espace qui sera alloué en dessous de l'image pour afficher les vignettes. Renseignez une valeur et appuyez sur la touche entrée pour rafraîchir l'aperçu.
La largeur de l'image permet d'éviter l'effet "yoyo" des vignettes lorsque vos images principales ont des hauteurs différentes. Pour régler ce problème, il vous suffit de spécifier la hauteur de la plus grande de vos images. Cette propriété ne change pas la hauteur de vos images mais seulement la hauteur de l'espace dédié à l'affichage.
Le champ Remplacement de l'image permet de sélectionner la méthode pour passer d'une image à une autre dans la liste des vignettes : au clic ou au survol de la vignette.
L'affichage des vignettes peut être fait sous forme de liste ou de carrousel. La position des vignettes peut être définie à droite, à gauche ou en dessous de l'image détail.

Le nombre de vignette n'est proposé que dans le cas où le carrousel a été sélectionné. Cela permet de définir le nombre d'image à afficher dans le carrousel.

Enfin, le style de zoom peut être modifié : classique ou bien en format loupe.

Vous pouvez tester les différentes mises en page grâce au bouton "Actualiser".

Cliquez sur l'image pour l'agrandir


Côté front office, un clic sur l'image permet de déclencher un "diaporama" des images zoom. Les flèches permettent de passer d'une image à l'autre et la croix (ou la touche Échappe du clavier) permet de revenir sur la fiche article.

Cliquez sur l'image pour l'agrandir


 
 Questions fréquentes

Comment modifier la mise en page de mes images additionnelles (zoom) ?
Les options sont elles compatibles avec les images additionnelles (zoom) ?
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=512&TID=55156&MID=9000%7C55320&LangID=0
© 2001-2017 Oxatis. Tous droits réservés.