La visionneuse d’images permet à un administrateur Logik d’ajouter des images mises en vedette aux champs pris en charge qui peuvent être visualisés dans un carrousel multimédia. Cet article explique comment configurer la visionneuse d’images dans Logik Admin et comment elle s’affiche sur votre mise en page.

Types d’affichage de champ pris en charge

• Image statique
• MultiSelectProductPickerGrid
• MultiSelectVisualProductPicker
• ProductPickerGrid
• VisualProductPicker
• Sélection multiple picklistGrid
• SingleSelect picklistGrid
• Sélecteur visuel à sélection multiple
• Sélecteur visuel

Images statiques

Pour afficher la visionneuse d’images d’un champ d’image statique, procédez comme suit :

1. Ouvrez la mise en page dans laquelle vous souhaitez ajouter la visionneuse d’images.
2. Passez la souris sur le champ et cliquez sur l’icône d’engrenage.
3. Ouvrez le menu des valeurs brutes et ajoutez les éléments suivants tout en incluant les entrées requises à la place du texte de l’espace réservé ci-dessous.

   

4. Cliquez sur Enregistrer et déployez le plan.

Détails des valeurs brutes pour la visionneuse d’images

Ajoutez ce qui suit à la section « Valeur brute » d’un composant d’affichage d’image via l’interface utilisateur d’administration, où Array<FeatureImage> est un tableau de vos images de fonctionnalités supplémentaires au format de type Image de fonctionnalité et carouselEnabled est défini sur vrai ou faux.

"featureImageSettings": {
      "additionalImages": Array<FeatureImage>,
      "carouselEnabled": boolean
  }

Par défaut, carouselEnabled est faux.

Définition d’une image de fonctionnalité

FeatureImage = {
  “src”: string,
  “alt”?: string,
  "label"?: string,
}

Sélecteurs de produits

Pour afficher la visionneuse d’images d’un champ de sélecteur de produit, procédez comme suit :

1. Sélectionnez votre champ de sélecteur de produit.
2. Sélectionnez l’onglet Champs d’options.
3. Cliquez sur + Ajouter.
   • Définissez le type de champ sur Texte.
   • Définissez la propriété Liste de produits sur Produit étendu.
4. Créez un champ de texte pour chaque image à inclure dans la visionneuse.
   Remarque :

   Pour afficher un texte alternatif ou une étiquette, des champs supplémentaires doivent être créés pour chaque type. Ces champs ne sont pas obligatoires.

   

5. Sélectionnez l’onglet Actions en bloc.
6. Cliquez sur Ajouter une nouvelle action.
7. Sélectionnez le type Action déterminée.
8. Saisissez un nom d’action en bloc.
9. Sélectionnez tous les champs ajoutés pour votre visionneuse d’images.

   

10. Cliquez sur Enregistrer.
11. Sous l’onglet Actions en bloc, indiquez l’URL de chaque image ainsi que du texte pour les étiquettes et un texte alternatif si vous le souhaitez.

    

12. Cliquez sur Enregistrer.
13. Ouvrez une mise en page qui inclut le champ de sélecteur de produit.
14. Passez la souris sur le champ et cliquez sur l’icône d’engrenage.
15. Activez l’option Visionneuse d’images.
16. Développez la section Paramètres de la visionneuse.
17. Sélectionnez les champs créés à partir des étapes 3 et 4 qui correspondent à l’URL de l’image, au texte alternatif et à l’étiquette.

    Le texte alternatif et l’étiquette sont facultatifs.

18. Cliquez sur + Ajouter et répétez l’étape 17 pour chaque image que vous souhaitez inclure.

    

19. Cliquez sur Enregistrer et déployez le plan.

Listes déroulantes

1. Ouvrez le champ de la liste déroulante.
2. Cliquez sur l’onglet Extension de la liste déroulante.
3. Cliquez sur Importer les données.
4. Créez un CSV qui inclut les colonnes suivantes :
   • valide
   • imageUrl
     • Assurez-vous qu’il s’agit d’une URL valide pour que l’image s’affiche.
     • Créez une colonne imageUrl pour chaque image à inclure dans la visionneuse d’images.
   • imageLabel (facultatif)
   • imageAltText (facultatif)

     

5. Importez le CSV créé.
6. Cliquez sur Mappage de colonnes.
7. Pour chaque champ ajouté, sélectionnez le menu de mappage et sélectionnez le nom de la colonne dans la section Mappage d’extension.

   

8. Cliquez sur Enregistrer le mappage.
9. Ouvrez une mise en page qui inclut le champ de sélecteur de produit.
10. Passez la souris sur le champ et cliquez sur l’icône d’engrenage.
11. Activez l’option Visionneuse d’images.
12. Développez la section Paramètres de la visionneuse.
13. Sélectionnez les champs créés à partir des données d’extension de la liste déroulante qui correspondent à l’URL de l’image, au texte alternatif et à l’étiquette.

    Le texte alternatif et l’étiquette sont facultatifs.

14. Cliquez sur + Ajouter et répétez l’étape 13 pour chaque image que vous souhaitez inclure.

    

15. Cliquez sur Enregistrer et déployez le plan.

Directives générales

Assurez-vous que les tailles d’image sont les mêmes pour toutes les images d’un visualiseur. S’ils ne correspondent pas, les vignettes et l’image principale ne s’aligneront pas correctement.

Ajoutez des images dans l’ordre dans lequel vous souhaitez qu’elles s’affichent. Les images s’afficheront à partir des paramètres de la visionneuse d’images de haut en bas. Le nom du champ n’affecte pas l’ordre d’affichage.

Utilisez des images avec une résolution suffisamment élevée pour remplir correctement la fenêtre. La taille des images basse résolution sera agrandie pour s’adapter à la fenêtre et ne s’affichera pas bien lorsqu’elles seront sélectionnées comme image principale.

Pour des performances optimales, évitez les images volumineuses ou haute résolution car cela aura un impact sur le temps de rendu de la visionneuse d’images.

Affichage de la visionneuse d’images

Sur une mise en page avec un champ qui inclut une vue d’image, un utilisateur peut survoler une image pour afficher l’icône de développement.

Une fois cliqué, la vue de l’image s’ouvre dans une boîte de dialogue.

Un utilisateur peut passer d’une image à l’autre à l’aide des boutons fléchés ou en cliquant sur les vignettes sous l’image principale. Ce carrousel affiche n’importe quelle étiquette et texte alternatif, le cas échéant. Un utilisateur peut fermer la boîte de dialogue en cliquant à l’extérieur de celle-ci ou en cliquant sur X en haut à droite.