Images interactives

Vous pouvez faire des images statiques riches et attrayantes pour les clients en faisant glisser et en libérant des points interactifs « des ventes » dans une image. Les hotspots de vente combinent des informations supplémentaires sur un produit ou un service avec un point de vente direct et un point de vente « Ajouter au panier » ou « Acheter ». Les clients peuvent appuyer sur ces zones interactives directement liées au produit ou au service, les ajoutent à un panier d’achat ou être liés à une page Web. Des expériences directes telles que l’augmentation de la participation des clients et des conversions sur le site Web.

Ce qui suit est une bannière de vente avec une fenêtre contextuelle de vue rapide. Un utilisateur active la vue rapide en touchant le cercle ou la « zone interactive » du modèle.

Voir Images interactives en action sur le site Web qui est affichée ci-dessus.

Voir comment les bannières d’image interactive sont créées

regarder un didacticiel de 10 minutes et 33 secondes sur la manière dont les signes sont créés interactifs image. Vous apprendrez également à prévisualiser, à modifier et à distribuer des bannières d’image interactives.

Démarrage rapide: images interactives

La description suivante étape par étape du flux de travail est conçu pour vous aider à démarrer Images interactives rapidement chez AEM.

Recherchez l’exemple d’en-tête dans certaines des tâches de démarrage rapide. Il contient un bref tutoriel basé sur un exemple de page Web qui ne dispose pas d’images interactives ajoutées à celle-ci.

Le didacticiel permet d’illustrer les étapes pour intégrer des images interactives sur votre propre site web.

Étapes d’image interactive:

1. (facultatif) Identification des variables de points interactifs. Si vous utilisez Adobe Experience Manager et Dynamic Media Ressources indépendantes, identifiez les variables dynamiques que vous utilisez dans l’implémentation de la vue rapide existante. De cette manière, il est garanti que vous pouvez saisir des données de points interactifs lors de la création de l’image interactive. Voir (facultatif) Identification des variables de points interactifs. Cependant, si vous utilisez des sites AEM, AEM ECommerce ou les deux, cette étape n’est pas nécessaire.

2. (facultatif) Création d’un paramètre de visualiseur d’images interactif pré-établi. Personnalisez l’image graphique utilisée pour représenter des zones interactives. Il n’est pas nécessaire de créer votre propre visualiseur d’images interactif pré-établi si vous souhaitez utiliser le paramètre de visualiseur d’images interactif préréglé, nommé Shoppable_Banner.
   Voir (facultatif) Créer un Réglage de la visionneuse d’images interactif pré-établi.

3. Chargement d’une bannière d’image. Chargez des bannières d’image que vous souhaitez faire interactive.
   Voir Chargement d’une bannière d’image.

4. Ajout de zones interactives à un porte-image. Ajoutez une ou plusieurs zones interactives à une bannière d’image. Associer chacun d’eux à une action en tant que lien hypertexte, une vue rapide ou un fragment d’expérience. Après avoir ajouté des zones interactives, cette tâche finira par publier l’image interactive. Voir Ajouter des zones interactives à un titulaire d’image. Voir Aperçu des images interactives – Facultatif. Si vous le souhaitez, vous pouvez voir une représentation de la bannière de vente et tester votre interactivité.
   Voir la publication des ressources pour plus d’informations sur la publication des ressources d’image interactives.

5. Ajoutez une image interactive sur le site Web ou le site Web chez Experience Manager. Si vous utilisez des sites, le commerce électronique ou les deux, vous pouvez ajouter des images interactives directement à une page Web chez Experience Manager. Faites glisser le composant multimédia interactif sur la page. Reportez-vous à l’ajout de ressources de média dynamiques aux pages.
   Si vous utilisez des actifs de gestion de l’expérience et des médias dynamiques de manière indépendante, copiez le code crypté sur le site Web. Ensuite, incluez-la avec la vue rapide existante. Voir intégré une image interactive avec votre site Web.
   Si vous utilisez un Third-Party WCM (Web Content Manager), intégrez la nouvelle vidéo interactive avec la vue rapide existante utilisée sur le site Web. Voir intégré une image interactive avec une vue rapide existante.

(facultatif) Identification des variables de points interactifs

Commencez par identifier les variables dynamiques utilisant la mise en œuvre de la vue rapide existante, de sorte que vous puissiez entrer des données de point interactives pour créer l’image interactive.

Lorsque vous ajoutez des zones interactives Pour une image de titulaire chez Experience Manager Actifs, attribuez une SKU (unité de maintenance des stocks). Le SKU est un identifiant unique pour chaque produit ou service offert. Et, ajouter une variable optionnelle supplémentaire à chaque zone interactive. Ces variables de points interactifs sont utilisées ultérieurement pour correspondre aux points interactifs avec le contenu de la vue rapide.

Il est important d’identifier correctement le nombre et le type de variables qui seront associées aux données des points interactifs. Chaque zone interactive ajoutée à une bannière image doit contenir suffisamment d’informations pour identifier le produit sans équivoque dans le système back-end existant.

Il existe différentes manières d’identifier un ensemble de variables qui seront utilisées pour des données d’interactifs Points.

Parfois, il suffit de consulter les spécialistes informatiques responsables de la mise en œuvre de la vue rapide existante. Il est probable que ces personnes sachent ce que l’ensemble de données minimum est nécessaire pour identifier la vue rapide dans le système. Cependant, il est également possible de simplement analyser le comportement existant du code frontal.

la plupart des déploiements de la vue rapide Utilisez le paradigme suivant:

• l’utilisateur activate Un élément d’interface utilisateur sur le site Web. Par exemple, en cliquant sur le bouton « Aperçu rapide ».
• Le site Web envoie une application AJAX au serveur pour charger les données ou le contenu de la vue rapide, si nécessaire.
• Affichage rapide Les données sont traduites dans le contenu en tant que préparation du rendu sur la page Web.
• Enfin, le code frontal traite visuellement ledit contenu à l’écran.

le La méthode visitent ensuite différentes zones du site Web existant où la fonction de vue rapide est mise en œuvre. Ensuite, activez la vue rapide et capturer l’URL Ajax qui envoie la page Web pour charger les données ou le contenu de la vue rapide.

Normalement, il n’est pas nécessaire d’utiliser un outil de débogage spécialisé. Les navigateurs Web modernes ont des inspecteurs Web qui effectuent un emploi adéquat. Vous trouverez ci-dessous quelques exemples de navigateurs Web comprenant des inspecteurs Web:

pour voir toutes les demandes HTTP sortantes sur Google Chrome, appuyez sur F12 pour ouvrir le panneau Outils de développement et, une suite, cliquez sur L’onglet Réseau.
sur un Mac, appuyez sur la commande + option + i pour ouvrir le panneau Outils de développeur, puis cliquez sur l’onglet Réseau.

• in Firefox, vous Peut activer le logement enfichable Firebug et utiliser votre onglet Réseau. Ou vous pouvez utiliser l’outil Inspecteur intégré et votre onglet Réseau.
  sur un Mac, appuyez sur la commande + option + i le panneau Outils de développeurs, puis cliquez sur l’inspecteur. onglet.

Lorsque la surveillance du réseau est activée dans le navigateur, vérifiez une vue rapide sur la page.

Maintenant, recherchez l’URL Ajax de la vue rapide Dans le registre de réseau et copier l’URL enregistrée pour une analyse future. Habituellement, lorsque la vue rapide est activée, de nombreuses demandes sont envoyées au serveur. Normalement, l’URL Ajax de Aperçu rapide est l’une des premières de la liste. Il a une route ou une partie d’une chaîne de requête complexe et votre type de réponse MIME est text/html, text/xml ou text/javascript.

Au cours de ce processus, il est important de visiter différentes zones du site Web, avec différents types et catégories de produits. La raison en est que les URL de vue rapide peuvent avoir des parties communes pour une catégorie de site Web donnée. Cependant, ils ne changent que si vous visitez une zone différente du site Web.

Dans le cas le plus simple, la seule partie variable de l’URL de la vue rapide est la SKU du produit. Dans ce cas, la valeur SKU est la seule pièce de données dont vous avez besoin pour ajouter des zones interactives à l’image de la bannière.

Toutefois, dans des cas complexes, l’URL de la vue rapide a des éléments différents en plus de la Sku. Par exemple, les différents éléments peuvent inclure l’ID de catégorie, le code de couleur et le code de taille.Dans ces cas, chaque élément est une variable indépendante dans la définition des données de point interactives du Experience Manager ACTIF fonction d’image de vente

Voyons voir les exemples suivants d’URL de vue rapide et les variables de résultat des points interactifs.:

« >

Exemple

Vous pouvez appliquer la même approche utilisée dans les trois exemples avant la page Web de démonstration.

La page Web de démonstration contient plusieurs vignettes de produit, chacune avec un bouton d’affichage rapide étiqueté comme « Voir plus ». Avec l’outil de débogage de Web Explorer toujours activé, cliquez sur chaque bouton et écrivez les URL de la vue rapide enregistrée. Après avoir activé les quatre produits rapide vues disponibles sur la page, il a la liste suivante des requêtes de visualisation rapide effectuée sur le serveur:

• /datafeed/Men-Windbreaker.json
• /datafeed/Men-CamoPullover.json
• /datafeed/Women-QuiltedDownJacket.json

Lorsque vous examinez des appels sur le serveur, vous pouvez voir que les informations spécifiques du produit ne sont présentes que dans le chemin d’application. Il note également que la chaîne de requête n’est pas utilisée du tout et qu’il existe deux types différents de fragments de données impliqués:

• le premier type est des hommes ou des femmes. Vous pouvez appeler cette « catégorie ».
• Le second type est le nom du produit, comme Camopulover, ce qui est probablement le SKU du produit.

compte tenu de cette information, l’URL complète de l’ affichage rapide a la norme suivante:

/datafeed/$categoryId$-$SKU$.json

en fonction de cette analyse, il utiliserait categoryId et SKU pour les zones interactives.

est déjà prêt à charger un support d’image et ajouter des zones interactives grâce à la fonction de image ventes interactif AEM actifs.

( en option) Création d’ une visionneuse image interactive pré-indiquée

Vous pouvez choisir d’utiliser les paramètres prédéfinis par défaut et prêt à utiliser l’image viewer appelé interactive Shoppable_Banner qui est inclus avec les actifs AEM. Ou vous pouvez créer votre propre préréglage d’affichage personnalisé pour l’utiliser avec des images interactives.

Lors de la création d’un paramètre PRÉ-SET personnalisé de l’écran d’image interactive, vous pouvez déterminer l’apparition des zones interactives sur la bannière d’image .Dans le cadre de la création du paramètre de visualisation préétabli, vous pouvez choisir d’utiliser un graphique de zone interactive d’une galerie d’images prédéfinie.

Après avoir enregistré le paramètre Viewer Preset, il est automatiquement activé (activé) dans La page Liste des paramètres de la visionneuse préétablis dans les actifs AEM. Cette fonctionnalité signifie qu’il est visible dans le composant multimédia interactif et chaque fois qu’une ressource est vue. Cependant, pour délivrer une bannière interactive avec cet ajustement de la visionneuse préréglée, publiez également le paramètre de visualiseur pré-établi. Cette règle est vraie pour les paramètres de préréglage de viseur personnalisé ou prédéterminé.

Pour créer un paramètre de visualisation d’images interactif

1. dans le canal gauche, appuyez sur Outils > Actifs > Paramètres prédéfinis de visière.

2. Proche du coin supérieur droit de la page, cliquez sur Créer .

3. Dans la nouvelle boîte de dialogue Définition de la nouvelle version de Visualizer, tapez un nom pour décrire le réglage de l’affichage interactif interactif pré-établi.

   Ce titre apparaît sur le Vieffinder Preset Paramètres de liste de paramètres après l’avoir sauvegardé.

4. Dans le menu déroulant Type de support enrichi, sélectionnez Image interactive.

5. Touchez Créer.

6. sur la page de paramètres de visualiseur de préréglage d’édition, appuyez sur l’onglet ASPORT.

7. Effectuez l’une des opérations suivantes :

   • Pour charger votre propre image de zone interactive que vous souhaitez utiliser dans des images, appuyez sur l’icône Sélecteur de ressources. Sur la page Sélectionner un contenu, accédez à l’image de zone interactive que vous souhaitez utiliser et de sélectionner. Appuyez sur l’icône de coche dans le coin supérieur droit.
   • Pour sélectionner une image de zone interactive prédéfinie, appuyez sur l’icône de la galerie des points interactifs. Dans la palette Interactive Points Gallery, appuyez sur l’image de zone interactive que vous souhaitez utiliser.

8. près du coin supérieur droit de la page, appuyez sur Enregistrer.

   Soyez sûr de publier le nouveau paramètre de visualiseur pré-réglé.

   Voir les paramètres de visualisation de publication personnalisés.

   Vous êtes prêt à charger un support d’image.

Chargement d’un porte-image

Si vous avez déjà chargé les images que vous souhaitez utiliser, passez à l’étape suivante, ajoutez des zones interactives à un titulaire d’une image.

charger un support d’image

1. charger des bannières d’image que vous souhaitez faire interactive.

   voir la gamme de ressources.

   est déjà prêt à ajouter des zones interactives au support de l’image; Voir la tâche suivante ci-dessous.

Ajout de zones interactives à un porte-image

Vous pouvez ajouter des zones interactives à une bannière d’image à l’aide de l’éditeur de l’éditeur Page de gestion des points.

Lorsque vous ajoutez des zones interactives, vous pouvez les définir comme une vue pop-up de la vue rapide, telle qu’un lien hypertexte ou un fragment d’expérience.

voir des fragments d’expériences .

options annuler et redo, près du coin supérieur droit de la page, sont compatibles pendant la session de Création / édition actuelle.

Lorsque vous avez terminé la création de l’image interactive, vous pouvez utiliser un aperçu pour voir une représentation de la manière dont l’image interactive apparaît pour les clients.

voir (facultatif) Vista Précédent d’images interactives.

pour ajouter des zones interactives à un porte-image

1. Dans la vue Ressources, faites défiler jusqu’à la bannière de l’image que vous souhaitez convertir en interactif.

2. faire l’une des actions suivantes:

   • transmettez la souris sur l’image, puis appuyez sur SELECT (Cochez l’icône de cocher). Dans la barre d’outils, appuyez sur EDIT.

   • Passez la souris sur l’image, puis cliquez sur Plus d’actions (icône à trois points) Modifier.

   • Pour l’ouvrir sur la page de vue détaillée, appuyez sur l’image. Dans la barre d’outils, appuyez sur EDIT.

3. Proche du coin supérieur gauche de la page, cliquez sur Ajouter une zone interactive (icône avec votre doigt) pour ouvrir la page de gestion des points interactifs.

4. près du coin supérieur gauche de la page, appuyez sur Zone interactive.

   1. à proximité de la partie supérieure gauche de La page de gestion des points interactifs, la zone interactive de presse.
   2. Dans l’image, cliquez sur un emplacement où vous souhaitez que le point interactif apparaisse. Si nécessaire, faites glisser la zone interactive pour régler votre emplacement. Ou, utilisez les touches fléchées du clavier pour contrôler la position d’un point interactif sélectionné.
   3. ajoutez plus de zones interactives selon les besoins en répétant les étapes A et B.
   4. (facultatif) à Supprimer une zone interactive, sélectionnez-la dans l’image, puis appuyez sur Supprimer (Icône de corbeille) dans l’en-tête de zone interactive.

5. dans le champ Nom du texte, Tapez le nom de la zone interactive. Ce nom apparaît également dans la liste déroulante de zone interactive sélectionnée.

6. Effectuez l’une des opérations suivantes:

   • Appuyez sur Aperçu rapide .

     • Si vous êtes des sites AEM ou du client ECommerce, appuyez sur ou cliquez sur l’icône Sélecteur de produit (Lupa) pour ouvrir la page Sélectionner un produit. Appuyez sur le produit que vous souhaitez utiliser, puis appuyez sur Sélectionner dans le coin supérieur droit de la page. Il retournera à la page de gestion des points interactifs.

     • S’il n’y a pas de client de sites de gestionnaire d’expérience ou de commerce électronique

       • Voir l’identification des variables de points interactif; Vous devez définir ces variables.
       • Ensuite, entrez manuellement la valeur SKU. Dans le champ de texte de valeur SKU, écrivez le produit SKU. La valeur SKU saisie remplit automatiquement la partie variable du modèle de vue rapide. Veille à ce que le système maritime associe la zone interactive utilisée avec la vue rapide d’un SKU spécifique.
       • (facultatif) S’il existe d’autres variables dans la vue rapide utilisée pour identifier un produit, appuyez sur Ajouter une variable générique. . Dans le champ Texte, spécifiez une variable supplémentaire. Par exemple, category=Mens est une variable globale.

   • Touch Hyperlink.

     • Si vous êtes Experience Manager Sites Client, appuyez sur l’icône Sélecteur de site (dossier). Aller à une URL. La méthode de liaison basée sur l’URL n’est pas possible si la teneur interactive contient des liens avec des URL relatives, en particulier des liens vers des pages de sites de gestionnaire d’expériences.
     • S’il s’agit du client indépendant, dans le champ de texte HREF Spécifiez l’URL complète. itinéraire vers une page Web liée.

   Assurez-vous de spécifier si vous souhaitez ouvrir le lien dans un nouvel onglet Navigateur (option par défaut recommandée) ou dans le même onglet.

   voir à l’aide de sélecteurs pour plus d’informations.

   • Appuyez sur le fragment d’expériences.

     si vous Sont des sites clients AEM, touchez ou cliquez sur l’icône de recherche (loupe) pour ouvrir le fragment de la page d’expériences. Appuyez sur le fragment d’expérience que vous souhaitez utiliser. Ensuite, appuyez sur Sélectionner dans le coin supérieur droit de la page. Il retournera à la page d’administration des points interactifs.
     Voir Fragments d’expériences.

   • Spécifiez la largeur et la hauteur du fragment d’expérience Comme vous le souhaitez apparaître sur la bannière.

     note

     Les outils de partage de médias sociaux dans l’image interactive ne sont pas compatibles lorsque le viseur est intégré dans un fragment d’expérience. Au lieu de cela, utilisez ou créez des ajustements prédéfinis Visualizer qui ne disposent pas d’outils de partage des médias sociaux.Ces paramètres de visualiseur de préréglage vous permettent de les intégrer correctement à des fragments d’expérience.

7. Appuyez sur Enregistrer pour enregistrer le travail et revenir à la page Parcourir.

8. Publiez l’image interactive. La publication fournit la bannière via le cloud et génère également un code intégré qui vous permet d’intégrer à un site Web tiers.

   Voir les ressources de publication.

   Après avoir ajouté des zones interactives et publier le Image interactive, vous êtes prêt à l’ajouter au site Web existant.

   Voir l’intégration d’une image interactive avec votre site Web.

   Note

   Si vous modifiez des images interactives avec des zones interactives et coupez l’image, les zones interactives seront supprimées.

(facultatif) Images interactives

Vous pouvez prévisualiser pour voir une représentation de l’apparence qui aura l’image interactive pour les clients. L’aperçu permet également de tester les zones interactives de l’image pour s’assurer qu’ils se comportent de la manière attendue.

Lorsque vous êtes satisfait de l’image interactive, vous pouvez le publier.
Voir l’incroyage de l’image Visionneuse ou vidéos sur une page Web. Voir le lien URL à l’application Web. La méthode de liaison basée sur l’URL n’est pas possible si la teneur interactive a des liens avec des URL relatives, en particulier des liens vers des pages de sites AEM.
Voir Ajout de ressources multimédia dynamiques aux pages.

Pour prévisualiser des images interactives

1. dans la vue Ressources, faites défiler jusqu’à l’image interactive existante que vous avez créée et appuyez sur pour l’ouvrir dans l’aperçu.
2. près du coin supérieur gauche de la page d’aperçu, dans le contenu -down liste, appuyez sur Afficheurs.
3. Dans la liste Visualizers, appuyez sur shoppable_banner ou le nom du paramètre pré-établi de l’affichage de l’image interactive que vous avez créé.
4. pour tester le Actions des zones interactives, appuyez sur les zones interactives de l’image.

Publication des ressources d’image interactives

Voir les ressources de publication pour plus d’informations sur la publication des ressources d’image interactif vous.

Intégration d’une image interactive avec votre site Web

Après avoir chargé une image de bannière, ajout de zones interactives et publie l’image interactive, vous êtes prêt à l’ajouter à la Page de site Web.

Si vous êtes des sites clients AEM, vous pouvez ajouter l’image interactive en faisant glisser le composant multimédia interactif sur votre page. Voir Ajout de ressources dynamiques multimédia aux pages.

Si vous êtes un client indépendant d’AEM AEM, vous pouvez ajouter manuellement l’image interactive à votre site Web comme décrit dans cette section.

5. Copier le code intégré de l’image interactive publiée.
   Voir Eclipser l’affichage de l’image ou des vidéos sur une page Web.

6. Ajouter le code embarqué Copie à la personne souhaitée Emplacement à l’intérieur de la page Web.
   Le code incorporé copié est configuré pour un environnement interactif, de sorte qu’il soit réglé automatiquement sur la zone attribuée.

>

Avec le site Web de spectacle Par exemple, notez que l’image des trois personnes est une étiquette statique IMG:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

L’intégration est aussi simple que la suppression de l’étiquette IMG et le remplacer par le code intégré copié à partir d’actifs AEM. Vous pouvez voir que le résultat affiche l’image de vente interactive sur la page avec trois points de cercle interactifs.

pour appliquer une image de vente interactive pour un environnement interactif, incluez l’attribut de configuration d’image interactive ZoomView.iscommand à l’itinéraire. Dans ce cas, il s’appelle le composant et

SKU unique, qui se trouve dans la chaîne de requête.	URL Voir Registered rapide sont les suivantes: https://server/json?productId=866558&source=100 https://server/json?productId=1196184&source=100 https://server/json?productId=1081492&source=100 https://server/json?productId=1898294&source=100 la seule partie de la variable dans l’URL est la valeur de la Produit de paramètre de la chaîne de requête = et est clairement une valeur SKU. Par conséquent, les zones interactives n’ont besoin que des champs de SKU remplis de valeurs telles que 866558, 1196184, 1898294.
SKU unique, qui est sur le chemin d’URL.	URL Voir Registered rapide sont les suivantes: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 la partie variable se trouve dans la dernière partie de la route et devient la valeur SKU des zones interactives: 6422350843 1607745002 0086724882.
SKU et par catégorie ID dans la . chaîne requête	URL Voir Registered rapide sont les suivantes: https://server/quickView/product/?category=1100004&prodId=305466 https://server/quickView/product/?category=1100004&prodId=310181 https://server/quickView/product/?category=1740148&prodId=308706 Dans ce cas, il y a deux parties différentes dans l’URL. Le SKU est stocké dans le paramètre prodId et l’ID de catégorie est stocké dans le paramètre category=. En tant que tel, les définitions de points interactifs sont des paires. C’est-à-dire une valeur SKU et une variable supplémentaire appelée categoryId. Les paires résultantes sont les suivantes: Le SKU est 305466 et est est 1100004. Le SKU est 310181 et est 1100004. Le SKU est 308706 et categoryId est 1740148.

SKU Single, trouvé dans la chaîne de requête

Sku Single, qui est sur L’itinéraire URL

sku e Catégorie ID dans la requête Chaîne

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

La dernière étape pour activer l’URL de la vue rapide et activer le panneau d’affichage rapide nécessite l’assistance d’une personne frontale de votre entreprise. Ils connaissent mieux comment activer avec précision la mise en œuvre de la vue rapide à partir de l’étape appropriée, avoir une URL d’affichage rapide prête à être utilisée.

Vous pouvez voir comment ces étapes s’appliquent au site Web de démonstration Intégrez une image de vente interactive avec le code de vue rapide. Auparavant, la structure de l’URL de la vue rapide a été identifiée comme suit:

/datafeed/$categoryId$-$SKU$.json

pour reconstruire cette URL à l’intérieur du contrôleur quickViewActivate, vous pouvez utiliser les champs et SKU. Ces champs sont disponibles dans l’objet inData que le code de la visionneuse passe au contrôleur:

var sku=inData.sku;var categoryId=inData.categoryId;var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Le site Web Active la boîte de dialogue Aperçu rapide à l’aide d’un appel de fonction simple loadQuickView(). Cette fonction ne prend qu’un argument, qui est l’URL de données d’affichage rapide. En tant que tel, la dernière étape pour intégrer l’image de vente interactive consiste à ajouter la ligne de code suivante au contrôleur quickViewActivate:

loadQuickView(quickViewUrl);

Le code source complet est le code source complet:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({ "containerId" : "s7interactiveimage_div", "params" : { "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image", "contenturl" : "https://aodmarketingna.assetsadobe.com/", "config" : "/etc/dam/presets/viewer/Shoppable_Media", "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" } }) s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var sku=inData.sku; var categoryId=inData.categoryId; var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json"; loadQuickView(quickViewUrl); }, }); s7interactiveimageviewer.init();

Le site Web de démonstration final avec l’image interactive interactive.

Utilisation des vues rapides pour créer des fenêtres contextuelles personnalisées

voir à l’aide de vues rapides pour créer des fenêtres contextuelles personnalisées.