Vous consultez actuellement l'aide de la version:

Les bannières de carrousel permettent aux spécialistes du marketing de susciter la conversion en créant facilement du contenu publicitaire interactif et alterné et en le diffusant sur tous les écrans.

La création et la modification du contenu présenté sur les bannières publicitaires peuvent prendre beaucoup de temps et réduire votre capacité à publier rapidement du contenu nouveau ou plus ciblé. Les bannières de carrousel permettent de créer ou de modifier des bannières alternées, d’ajouter du contenu interactif, comme des zones réactives conduisant aux détails d’un produit ou à des ressources associées et de les afficher sur tous les écrans, ce qui permet de proposer plus rapidement un nouveau contenu publicitaire.

Les bannières de carrousel sont signalées par une bannière contenant le mot CAROUSELSET :

chlimage_1

Sur votre site web, la bannière de carrousel peut se présenter comme suit :

chlimage_1

Vous pouvez parcourir les images (en cliquant sur les numéros). De plus, les diapositives alternent automatiquement selon un intervalle personnalisable. Les images que vous ajoutez à la bannière de carrousel prennent en charge les zones réactives et les zones cliquables, qui permettent aux utilisateurs d’appuyer sur un lien hypertexte ou d’accéder à une fenêtre d’aperçu rapide.

Dans cet exemple, un utilisateur a tapé ou cliqué sur une zone cliquable et a accédé à la fenêtre d’aperçu rapide pour les gants :

chlimage_1

Démarrage rapide : bannières de carrousel

Pour démarrer rapidement :

  1. Identifiez les variables de zone réactive et de zone cliquable (pour les clients qui n’utilisent qu’AEM Assets et Dynamic Media).

    Commencez par identifier les variables dynamiques utilisées par la mise en œuvre de l’aperçu rapide existant afin de pouvoir entrer correctement les données des zones réactives et des zones cliquables lors de la création de la bannière de carrousel dans AEM Assets.

    Remarque :

    Si vous êtes un client AEM Sites ou AEM eCommerce, vous pouvez utiliser la fonctionnalité intégrée permettant d’accéder aux pages de produit et à la recherche des unités de gestion des stocks (SKU) existantes dans le catalogue de produits. Vous n’avez pas besoin d’entrer manuellement les variables de zone réactive ou de zone cliquable. Reportez-vous aux informations sur la configuration d’eCommerce.

    Si vous êtes un client AEM Assets et Dynamic Media, vous entrez manuellement les données des zones réactives et des zones cliquables, puis vous intégrez l’URL publiée ou le code intégré au système de gestion de contenu tiers.

  2. Facultatif : créez un paramètre prédéfini d’ensemble de carrousel, au besoin.

    Si vous êtes administrateur, vous pouvez personnaliser le comportement et l’apparence du carrousel en créant votre propre paramètre prédéfini de visionneuse de carrousel.  L’avantage principal est que ce paramètre prédéfini de visionneuse personnalisé peut être réutilisé pour plusieurs carrousels. Cependant, les utilisateurs ont également la possibilité de personnaliser le comportement et l’apparence du carrousel directement lors de la création du carrousel.   Il s’agit de l’approche recommandée lorsque vous souhaitez une conception très spécifique d’un carrousel donné.

  3. Téléchargement d’une bannière d’image.

    Téléchargez les bannières d’images que vous souhaitez rendre interactives.

  4. Créez un ensemble de carrousels.

    Dans les ensembles de carrousels, les utilisateurs parcourent les images de bannière et cliquent/appuient sur les zones réactives ou les zones cliquables pour accéder au contenu approprié. 

    Pour créer un ensemble de carrousel dans Ressources, cliquez sur Créer, puis sélectionnez Ensembles de carrousels. Ensuite, ajoutez des images aux diapositives et cliquez sur Enregistrer. Vous pouvez également modifier l’apparence et le comportement du carrousel directement dans l’éditeur.

  5. Ajoutez des zones réactives ou des zones cliquables dans une bannière d’image.

    Ajoutez une ou plusieurs zones réactives ou zones cliquables à une bannière d’image et associez chacune d’elles à une action, comme un lien ou un aperçu rapide. Une fois que vous avez ajouté des zones réactives ou des zones cliquables, vous terminez cette tâche en modifiant l’ensemble de carrousel. La publication crée le code intégré que vous copiez et appliquez à la page d’entrée de votre site web.

    Reportez-vous à la section Aperçu de votre ensemble de carrousel – Facultatif. Si vous le souhaitez, vous pouvez afficher une représentation de l’ensemble de carrousel et tester son interactivité.

  6. Publiez les ensembles de carrousels.

    Vous publiez un ensemble de carrousel comme vous le feriez pour d’autres ressources. Dans Ressources, accédez à l’ensemble de carrousel, sélectionnez-le et appuyez ou cliquez sur Publier. La publication d’un ensemble de carrousel active l’URL et la chaîne incorporée.

  7. Utilisez l’une des méthodes suivantes :

Si vous devez modifier des ensembles de carrousels, reportez-vous à la section Modification d’ensembles de carrousels. De plus, vous pouvez afficher et modifier les propriétés d’un ensemble de carrousel.

Identification des variables de zone réactive et de zone cliquable

Commencez par identifier les variables dynamiques utilisées par la mise en œuvre de l’aperçu rapide existant afin de pouvoir entrer les données des zones réactives et des zones cliquables lors de la création d’un ensemble de carrousel dans AEM Assets.

Lorsque vous ajoutez des zones réactives ou des zones cliquables à une bannière d’image dans AEM Assets, vous devez affecter une SKU et des variables supplémentaires facultatives à chaque zone réactive ou zone cliquable. Ces variables sont utilisées, par la suite, pour faire correspondre les zones réactives ou les zones cliquables au contenu de l’aperçu rapide.

Remarque :

Si vous êtes un client AEM Sites et/ou AEM eCommerce, ignorez cette étape.  Vous n’avez pas besoin d’identifier manuellement les variables de zone réactive ou de zone cliquable. Vous pouvez utiliser l’intégration à eCommerce pour l’intégration des produits. Reportez-vous aux informations sur la configuration d’eCommerce. De plus, vous pouvez utiliser le composant interactif et l’ajouter à votre page web.

Si vous êtes un client AEM Assets ou Media, vous publiez l’URL ou le code intégré, effectuez l’intégration au système de gestion de contenu tiers, puis identifiez manuellement les zones réactives et les zones cliquables.

Il est important d’identifier correctement le nombre et le type des variables à associer aux données des zones réactives ou des zones cliquables. Chaque zone réactive ou zone cliquable ajoutée à une image de bannière doit comporter suffisamment d’informations pour identifier clairement le produit sur le système dorsal existant. En même temps, chaque zone réactive ou zone cliquable ne doit pas comporter plus de données que nécessaire. Cela rendrait la procédure de saisie des données trop complexe et favoriserait les erreurs de gestion des zones réactives ou des zones cliquables.

Il existe différentes façons d’identifier une série de variables à utiliser pour les données de zone réactive ou de zone cliquable.

Parfois, il s’avère suffisant de consulter des spécialistes de l’informatique responsables de l’implémentation d’aperçus rapides existante car il est probable qu’ils connaissent le jeu minimal de données requis pour identifier un aperçu rapide dans le système. Néanmoins, dans la plupart des cas, il est également possible d’analyser simplement le comportement existant du code frontal.

La majorité des implémentations d’aperçu rapide utilisent le paradigme suivant :

  • L’utilisateur active un élément de l’interface utilisateur sur le site web. Par exemple, il clique sur le bouton Aperçu rapide.
  • Le site web envoie une demande Ajax au serveur principal afin de charger les données ou le contenu de l’aperçu rapide, le cas échéant.
  • Les données de l’aperçu rapide sont traduites en contenu en préparation du rendu sur la page web.
  • Enfin, le code frontal effectue le rendu visuel de ce contenu à l’écran.

L’approche consiste alors à visiter différentes zones du site web existant où la fonctionnalité d’aperçu rapide est implémentée, à déclencher l’aperçu rapide et à capturer l’URL Ajax envoyée par la page web pour charger les données ou le contenu de l’aperçu rapide.

Normalement, il n’est pas nécessaire d’utiliser des outils de débogage spécialisés. Les navigateurs web modernes incluent des inspecteurs web qui font un travail adéquat. Vous trouverez ci-dessous quelques exemples de navigateurs web qui incluent des inspecteurs web :

  • Pour voir toutes les demandes HTTP sortantes dans Google Chrome, appuyez sur F12 pour ouvrir le panneau Outils de développement, puis cliquez sur l’onglet Réseau.
  • Dans Firefox, vous pouvez activer le plug-in Firebug en appuyant sur F12 et utilisez l’onglet Réseau ou bien, vous pouvez utiliser l’outil Inspecteur intégré et son onglet Réseau.

Lorsque la surveillance de réseau est activée dans le navigateur, déclenchez l’aperçu rapide sur la page.

Ensuite, recherchez l’URL Ajax de l’aperçu rapide dans le journal du réseau et copiez l’URL enregistrée pour une analyse future. Dans la plupart des cas, lorsque vous déclenchez l’aperçu rapide, de nombreuses demandes sont envoyées vers le serveur. En général, l’URL Ajax de l’aperçu rapide est l’une des premières de la liste. Elle comporte une partie ou un chemin d’accès de chaîne de requête complexe et son type MIME de réponse est text/html, text/xml ou text/javascript.

Au cours de ce processus, il est important de visiter différentes zones de votre site web, avec différentes catégories et différents types de produits. En effet, les URL d’aperçu rapide peuvent comporter des parties qui sont communes à une catégorie du site web donnée mais qui ne changent que si vous visitez une zone différente du site web.

Dans le cas le plus simple, la seule partie variable dans l’URL de l’aperçu rapide est la SKU du produit. Dans ce cas, la valeur de la SKU est la seule donnée dont vous avez besoin pour ajouter des zones réactives ou des zones cliquables à l’image de bannière.

Cependant, dans les cas complexes, l’URL d’aperçu rapide comporte différents éléments variables en complément de la SKU, comme l’identifiant de la catégorie, le code couleur, le code taille, etc. Dans ce cas, chaque élément est une variable distincte dans la définition des données de zone réactive ou de zone cliquable dans la fonction de bannière de carrousel.

Consultez les exemples d’URL d’aperçu rapide ci-dessous et les variables de zone réactive et de zone cliquable obtenues :

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

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

La seule partie variable de L’URL est la valeur du paramètre de chaîne de requête productId =, et il s’agit clairement d’une valeur de SKU. Par conséquent, il suffit d’indiquer, dans les champs de SKU des zones réactives ou des zones cliquables, des valeurs comme 866558, 1196184, 1081492, 1898294.

SKU unique, trouvé dans le chemin d’accès à l’URL.

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

La partie variable se trouve dans la dernière partie du chemin et elle devient la valeur de SKU des zones réactives/cliquables :6422350843, 1607745002, 0086724882.

SKU et ID de catégorie dans la chaîne de requête.

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://server/quickView/product/?category=1740148&prodId=308706

Dans ce cas, il existe deux parties variables dans l’URL. La SKU est stockée dans le paramètre prodId et l’ID de catégorie est stocké dans le paramètre category=.

En tant que telles, les définitions zone réactive/zone cliquable sont des paires. À savoir, une valeur de SKU et une variable supplémentaires appelée categoryId. Les paires obtenues sont les suivantes :

  • La SKU est 305466 et le paramètre categoryId est défini sur la valeur 1100004.

  • Le SKU est 310181 et le paramètre categoryId est défini sur la valeur 1100004.

  • La SKU est 308706 et le paramètre categoryId est défini sur la valeur 1740148.

Transfert des bannières d’image

Si vous avez déjà transféré les images à utiliser, passez à l’étape suivante, Création d’ensembles de carrousels. Notez que les images utilisées dans le carrousel doivent être transférées une fois que Dynamic Media a été activé. 

Pour transférer des bannières d’image, reportez-vous à la section Téléchargement de ressources.

Création d’ensembles de carrousels

Pour créer un ensemble de carrousel :

  1. Dans Ressources, cherchez le dossier dans lequel vous souhaitez créer l’ensemble de carrousel, puis cliquez sur Créer > Ensemble de carrousel.

    chlimage_1
  2. L’éditeur de bannière de carrousel s’affiche. Appuyez pour afficher le sélecteur de ressources afin de sélectionner l’image de la première diapositive. Pour plus d’informations, reportez-vous à la section Utilisation de sélecteurs.

    chlimage_1
  3. Sélectionnez la première image et cliquez ou appuyez sur la coche pour la sélectionner. Elle s’affiche dans l’éditeur de bannière de carrousel comme « Diapositive 1 ».

    chlimage_1
  4. Pour ajouter d’autres diapositives que le carrousel va alterner, cliquez sur l’icône Ajouter une diapositive. Sélectionnez l’image appropriée et cliquez ou appuyez sur la coche. Continuez à ajouter des diapositives jusqu’à ce que vous ayez sélectionné toutes les images à faire alterner.

    chlimage_1

    Pour supprimer une diapositive, appuyez ou cliquez sur la diapositive, puis appuyez ou cliquez sur Supprimer la diapositive dans la barre d’outils. Pour déplacer une diapositive, appuyez sur l’icône Réorganiser et maintenez le pointeur enfoncé jusqu’à l’emplacement souhaité.

  5. Une fois que vous avez ajouté les images aux diapositives, vous pouvez ajouter une zone réactive, une zone cliquable, ou les deux, à votre image. Reportez-vous à la section Ajout de zones réactives ou de zones cliquables.

  6. Vous pouvez modifier l’apparence et le comportement des ensembles de carrousels en appuyant ou en cliquant sur les onglets Comportement et Apparence et en apportant des ajustements à l’apparence de votre bannière de carrousel et au comportement des éléments spécifiques. Pour plus d’informations sur l’utilisation de l’éditeur de visionneuses, reportez-vous à la section Gestion des paramètres prédéfinis de visionneuse.

    Remarque :

    Pour les bannières de carrousel, vous pouvez avoir envie d’ajuster les éléments suivants :

    • Durée pendant laquelle une image est affichée. Par défaut, chaque image s’affiche pendant 9 secondes.
    • Animation. Par défaut, la transition entre chaque diapositive est un fondu. Vous pouvez prévoir une transition affichant une diapositive.
    • Style des boutons. Les utilisateurs peuvent faire alterner les bannières en appuyant sur chaque point ou numéro. Vous pouvez modifier l’emplacement d’affichage des boutons de définition des indicateurs (et s’ils sont de style numérique ou en pointillé) et leur taille.
    • Modification du style de mise en évidence d’une zone cliquable ou de l’icône utilisée pour les zones réactives

    Pour des instructions détaillées et plus d’informations sur l’éditeur de visionneuses, reportez-vous à la section Considérations spécifiques aux bannières de carrousel.

    Vous pouvez également afficher un aperçu de l’apparence de la bannière de carrousel. Reportez-vous à la section Aperçu d’un ensemble de carrousel.

  7. Lorsque vous avez terminé, cliquez sur Enregistrer.

Ajout de zones réactives ou de zones cliquables à une bannière d’image

Vous pouvez ajouter des zones réactives ou des zones cliquables à une bannière à l’aide de l’éditeur d’ensemble de carrousel.

Lorsque vous ajoutez des zones réactives ou des zones cliquables, vous pouvez les définir sous forme d’affichage contextuel d’aperçu rapide ou de lien hypertexte. À mesure que vous ajoutez des zones réactives ou des zones cliquables à une image, pensez à enregistrer votre travail. Les options Annuler et Rétablir, proches du coin supérieur droit de la page, sont prises en charge au cours de la session de création/modification actuelle.

Lorsque vous avez fini de créer votre bannière de carrousel, vous pouvez utiliser l’aperçu pour afficher une représentation de votre bannière de carrousel telle qu’elle s’affiche pour les clients.

Reportez-vous à la section (Facultatif) Aperçu des bannières de carrousel.

Remarque :

Lorsque vous ajoutez des zones réactives à une image dans une image interactive ou bannière de carrousel, les informations de zone réactive sont stockées au même emplacement de métadonnées (par rapport à l’emplacement de l’image), qu’il s’agisse d’une image interactive ou d’une bannière de carrousel. Cette fonctionnalité signifie que vous pouvez réutiliser facilement la même image (avec ses données de zone réactive définies) dans les visionneuses.

Notez cependant que les bannières de carrousel prennent en charge les images à zones cliquables, qui peuvent également contenir des zones réactives. Une image interactive n’en comporte pas. Pensez-y si vous envisagez de créer une image interactive ou une bannière de carrousel qui utilise la même image. Vous pouvez créer des images interactives et des bannières de carrousel à l’aide de copies distinctes de la même image.

Remarque :

Si vous modifiez des images interactives avec des zones réactives et que vous recadrez l’image, les zones réactives sont supprimées.

Pour ajouter des zones réactives à une bannière d’image :

  1. À partir de Ressources, accédez à l’ensemble de carrousel auquel vous souhaitez ajouter de l’interactivité.

  2. Sélectionnez l’ensemble de carrousel et cliquez ou appuyez sur Modifier. L’éditeur de visionneuses de carrousel s’affiche.

  3. Sélectionnez la diapositive à laquelle vous souhaitez ajouter de l’interactivité.

  4. Dans le coin supérieur gauche de la page, appuyez ou cliquez sur la zone réactive ou la zone cliquable.

  5. Sur l’image, appuyez ou cliquez sur l’emplacement dans lequel vous souhaitez insérer la zone réactive. Ou si vous créez une zone cliquable, cliquez et faites glisser la souris pour créer la zone cliquable. Vous pouvez ajuster la taille de la zone cliquable en cliquant et en faisant glisser les coins.

    Si nécessaire, faites glisser la zone réactive ou la zone cliquable vers un nouvel emplacement. Ajoutez d’autres zones réactives ou zones cliquables, au besoin.

    Pour supprimer une zone réactive ou une zone cliquable, dans le menu déroulant Cartes et zones réactives, sélectionnez le nom de la zone réactive à supprimer, puis cliquez ou appuyez sur l’icône Corbeille en regard du menu.

  6. Dans le champ de texte Nom, entrez le nom de la zone réactive ou de la zone cliquable. Ce nom s’affiche également dans la liste déroulante Cartes et zones réactives. L’indication d’un nom permet d’identifier facilement la zone réactive ou la zone cliquable pour effectuer d’autres modifications par la suite. 

  7. Effectuez l’une des actions disponibles sur l’onglet Actions :

    • Appuyez sur Aperçu rapide.
      • Si vous êtes un client AEM Sites ou AEM eCommerce, appuyez ou cliquez sur l’icône de sélecteur de produit (loupe) afin d’afficher la page Sélectionner un produit. Appuyez ou cliquez sur le produit à utiliser, puis appuyez sur la coche dans le coin supérieur droit de la page pour revenir à l’éditeur de bannières de carrousel.
      •  Si vous n’êtes pas un client AEM Sites ou AEM eCommerce :
        • Reportez-vous à la section Identification des variables de zone réactive, car vous souhaitez peut-être définir ces variables.  
        • Ensuite, entrez manuellement la valeur de la SKU. Dans le champ de texte Valeur de la SKU, entrez la SKU, qui est un identifiant unique pour chaque produit ou service que vous proposez. La valeur de la SKU entrée est renseignée automatiquement dans la partie variable du modèle d’aperçu rapide afin que le système sache associer la zone réactive sur laquelle l’utilisateur appuie et l’aperçu rapide d’une SKU spécifique.
        • (Facultatif) S’il existe d’autres variables dans l’aperçu rapide dont vous avez besoin pour identifier un produit, appuyez sur Ajouter la variable générique. Dans le champ de texte, spécifiez une variable supplémentaire. Par exemple, category = Homme est une variable ajoutée.
        • Pour plus d’informations, reportez-vous à la section Utilisation de sélecteurs.
    • Appuyez sur Lien hypertexte.
      • Si vous êtes un client AEM Sites, appuyez ou cliquez sur l’icône de sélecteur de site (dossier) pour accéder à une URL.
      • Si vous êtes un client autonome, dans le champ de texte HREF, spécifiez l’URL complète vers une page web liée.
      • Veillez à spécifier si vous souhaitez ouvrir le lien dans un nouvel onglet du navigateur (paramètre par défaut recommandé) ou dans le même onglet.
      • Pour plus d’informations, reportez-vous à la section Utilisation de sélecteurs.
    chlimage_1

    Vous pouvez également afficher un aperçu de l’apparence de la bannière de carrousel. Reportez-vous à la section Aperçu d’un ensemble de carrousel.

  8. Appuyez sur Enregistrer.

  9. Appuyez sur Fermer pour revenir à la page Ressources.

  10. Publiez l’ensemble de carrousel. La publication crée le code intégré ou l’URL que vous pouvez utiliser dans votre page web. Si vous êtes un client AEM Sites, vous pouvez ajouter l’ensemble de carrousel directement dans votre page web.

    Voir Publication de ressources.

    Reportez-vous à la section Ajout d’un ensemble de carrousel à la page d’entrée de votre site web.

Modification d’ensembles de carrousels

Vous pouvez effectuer différentes tâches de modification des ressources dans les visionneuses d’images, directement dans l’interface utilisateur, comme vous le feriez dans Ressources. Vous pouvez également effectuer les actions suivantes dans les ensembles de carrousels :

  • Ajoutez les diapositives à l’ensemble de carrousel. Reportez-vous également à la section Utilisation de sélecteurs.
  • Réorganisez les diapositives dans l’ensemble de carrousel.
  • Supprimez des ressources de l’ensemble de carrousel.
  • Supprimez l’ensemble de carrousel.
  • Ajoutez ou modifiez des zones cliquables et des zones réactives. Reportez-vous également à la section Utilisation de sélecteurs.

Pour modifier un ensemble de carrousel :

  1. Accédez à l’ensemble de carrousel et cliquez pour l’afficher ou sélectionnez l’ensemble de carrousel et cliquez sur l’icône Crayon dans la vignette.

    chlimage_1
  2. Pour modifier l’ensemble de carrousel, effectuez l’une des opérations suivantes :

    • Pour ajouter une diapositive, cliquez sur l’icône Ajouter une diapositive puis accédez à la ressource à ajouter à cette diapositive et appuyez ou cliquez sur la coche.
    • Pour réorganiser les diapositives, faites glisser une diapositive vers un nouvel emplacement (sélectionnez l’icône Réorganiser pour déplacer les éléments).
    • Pour ajouter une zone réactive ou une zone cliquable, cliquez sur l’icône Zone réactive ou Zone cliquable et reportez-vous à la section Ajout de zones réactives et de zones cliquables.
    • Pour modifier des zones réactives ou des zones cliquables dans la diapositive appropriée, déplacez la zone réactive ou la zone cliquable vers un nouvel emplacement, puis apportez les modifications nécessaires à l’apparence, au comportement et aux actions.
    • Pour supprimer une diapositive, sélectionnez-la, puis appuyez ou cliquez sur Supprimer la diapositive.

    Remarque :

    • Pour supprimer un ensemble de carrousel, accédez-y, sélectionnez-le et sélectionnez Supprimer.
    • Vous pouvez modifier les images d’une visionneuse d’images en accédant à la visionneuse, en cliquant sur Définir les membres dans le rail de gauche, puis en cliquant ou en appuyant sur l’icône Crayon d’une ressource pour afficher la fenêtre de modification.
    • Si vous modifiez des images interactives avec des zones réactives et que vous recadrez l’image, les zones réactives sont supprimées.

     

(Facultatif) Aperçu des bannières de carrousel

Vous pouvez utiliser l’aperçu pour savoir à quoi ressemblera votre bannière de carrousel pour les clients et tester les zones réactives et les zones cliquables des bannières de carrousel pour vous assurer qu’elles se comportent de la façon escomptée.

Lorsque vous êtes satisfait de la bannière de carrousel, vous pouvez la publier.
Reportez-vous à la section Incorporation de la visionneuse de vidéos ou d’images dans une page web.
Reportez-vous à la section Liaison d’URL à une application web.
Reportez-vous à la section Ajout de ressources Dynamic Media aux pages.

Vous pouvez afficher un aperçu des bannières de carrousel dans l’éditeur de carrousel (méthode recommandée) ou dans la liste Visionneuses.

Pour afficher un aperçu des bannières de carrousel dans l’éditeur de carrousel :

  1. Dans Ressources, accédez à une bannière de carrousel que vous avez créée et appuyez pour l’afficher.

  2. Appuyez ou cliquez sur Modifier.

  3. Dans la liste des paramètres prédéfinis de visionneuse dans le coin supérieur droit de la barre d’outils, sélectionnez une visionneuse pour afficher un aperçu de la bannière de carrousel.

    chlimage_1
  4. Appuyez ou cliquez sur Aperçu.

  5. Appuyez sur les zones réactives ou les zones cliquables de l’image pour tester les actions associées.

Pour afficher un aperçu des bannières de carrousel de la liste Visionneuses :

  1. Dans Ressources, accédez à une bannière de carrousel que vous avez créée et appuyez pour l’afficher.

  2. Dans le coin supérieur gauche de la page Aperçu, cliquez sur l’icône Contenu.

  3. Dans la liste Visionneuses, appuyez sur le nom du paramètre prédéfini de visionneuse de bannière de carrousel à utiliser.

    chlimage_1
  4. Appuyez sur les zones réactives ou les zones cliquables de l’image pour tester les actions associées.

Publication des bannières de carrousel

Pour utiliser le carrousel, vous devez le publier. La publication d’un ensemble de carrousel active l’URL et le code intégré. Elle publie également le carrousel sur le cloud Dynamic Media intégré au CDN pour un débit évolutiv et performant. 

Remarque :

Si vous utilisez une image interactive existante avec des zones réactives pour la bannière de carrousel, vous devez publier l’image interactive séparément après avoir publié la bannière de carrousel. 

De plus, si vous modifiez une image interactive publiée existante que vous utilisez dans une bannière de carrousel, vous devez publier l’image interactive avant que ces modifications se répercutent sur la bannière de carrousel. 

Pour publier des bannières de carrousel :

  1. Dans AEM, appuyez ou cliquez sur le logo AEM et appuyez ou cliquez sur Ressources

  2. Accédez à l’ensemble de carrousel et sélectionnez l’ensemble en pointant sur la vignette et en appuyant ou en cliquant sur la coche.

  3. Appuyez ou cliquez sur Publier dans la barre d’outils.

Ajout d’une bannière de carrousel à une page de votre site web

Une fois que vous avez transféré les images de la bannière pour créer un carrousel, ajouté des zones réactives et/ou des zones cliquables à la bannière et publié l’ensemble de carrousel, vous êtes prêt à l’ajouter à votre page web existante.

Remarque :

Si vous êtes un client AEM Sites, vous pouvez ajouter la bannière de carrousel directement dans votre page en faisant glisser le composant Interactive Media dans votre page. Reportez-vous à la section Ajout de ressources Dynamic Media aux pages.

Cependant, si vous êtes un client AEM Assets autonome, vous pouvez ajouter manuellement la bannière de carrousel à la page d’entrée de votre site web, comme indiqué dans cette section.

  1. Copiez le code intégré de l’ensemble de carrousel.
    Reportez-vous à la section Incorporation de la visionneuse de vidéos ou d’images dans une page web.
  2. Ajoutez le code intégré que vous avez copié à partir d’AEM Assets à votre page web.
    Le code intégré copié est réactif, donc il doit s’adapter automatiquement à la zone d’incorporation de la page.

Intégration de la bannière de carrousel à un aperçu rapide existant

Remarque : Cette étape ne vous concerne que si vous êtes un client AEM Assets autonome. 

La dernière étape de cette procédure consiste à intégrer la bannière de carrousel à la mise en œuvre d’un aperçu rapide existant à votre site web. Chaque mise en œuvre de l’aperçu rapide est unique, et une approche spécifique est nécessaire, ce qui implique généralement l’assistance d’un informaticien compétent en systèmes frontaux.

L’implémentation d’aperçus rapides existante représente normalement une chaîne d’actions entre-associées qui se produisent sur la page web dans l’ordre suivant :

  1. Un utilisateur déclenche un élément dans l’interface utilisateur de votre site web.
  2. Le code frontal obtient une URL d’aperçu rapide basée sur l’élément d’interface utilisateur qui a été déclenché à l’étape 1.
  3. Le code frontal envoie une demande Ajax en utilisant l’URL obtenue à l’étape 2.
  4. La logique du serveur principal renvoie les données ou le contenu de l’aperçu rapide correspondant au code frontal.
  5. Le code frontal charge les données ou le contenu de l’aperçu rapide.
  6. Facultativement, le code frontal convertit les données téléchargées de l’aperçu rapide en une représentation HTML.
  7. Le code frontal affiche une boîte de dialogue ou un panneau modal et effectue le rendu du contenu HTML à l’écran pour l’utilisateur final.

Ces appels peuvent ne pas représenter des appels d’API publiques indépendants qui peuvent être appelés par la logique de la page web depuis une étape arbitraire. À la place, il s’agit d’un appel chaîné où chaque étape suivante est masquée dans la dernière phase (rappel) de l’étape précédente.

Alors que la bannière de carrousel remplace l’étape 1, et partiellement l’étape 2, lorsqu’un utilisateur clique sur une zone réactive ou une zone cliquable dans la bannière de carrousel, cette interaction de l’utilisateur est gérée par la visionneuse. La visionneuse renvoie un événement dans la page web qui contient les données de toutes les zones réactives ou les zones cliquables ajoutées précédemment.

Dans ce type de gestionnaire d’événements, le code frontal effectue les opérations suivantes :

  • Elle écoute un événement émis par la bannière de carrousel.
  • Elle crée une URL d’aperçu rapide d’après les données des zones réactives ou des zones cliquables.
  • Déclenche le processus de chargement de l’aperçu rapide depuis le serveur principal et en effectue le rendu à l’écran.

Un gestionnaire d’événements prêt à l’emploi et commenté est déjà en place pour le code intégré renvoyé par AEM Assets.

Il suffit donc de supprimer les commentaires du code et remplacer le corps factice du gestionnaire par le code spécifique à la page web.

La création de l’URL d’aperçu rapide est presque l’inverse de l’identification des variables de zone réactive et de zone cliquable décrite précédemment.

Reportez-vous à la section Identification des variables de zone réactive et de zone cliquable.

La dernière étape permettant de déclencher l’URL d’aperçu rapide et d’activer le panneau d’aperçu rapide requiert très probablement l’aide d’un expert informatique. Ce type d’expert sait comment déclencher avec précision l’implémentation d’aperçus rapides à partir de l’étape appropriée, en disposant d’une URL d’aperçu rapide prête à l’emploi.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne