1.4.2 Implémentation de Brand Concierge sur votre site web

1.4.2.1 Configurer votre site web pour afficher Brand Concierge - AEM Author

Pour que Brand Concierge apparaisse sur votre site web, vous devez créer un nouveau bloc personnalisé qui doit être ajouté à une nouvelle page. Vous devez également vous assurer que votre nouvelle page est ajoutée à la navigation de votre site web.

Vous devez maintenant configurer les éléments suivants dans cet ordre :

Créer un bloc personnalisé

Pour créer le bloc personnalisé, accédez au référentiel GitHub lié à votre site web.

component-definition.json

Faites défiler jusqu’à ce que le fichier component-definition.json s’affiche et ouvrez-le

Cliquez sur l’icône crayon pour commencer à modifier le fichier.

Faites défiler jusqu’à ce que le Blocs s’affiche. Placez le curseur sous le crochet de fermeture du composant Cartes

Collez ce code et saisissez une virgule , après le bloc de code :

{
  "title": "BrandConcierge",
  "id": "brandconcierge",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "BrandConcierge",
          "model": "brandconcierge"
        }
      }
    }
  }
},

Cliquez sur Valider les modifications….

Cliquez sur Valider les modifications.

component-models.json

Faites défiler l’écran vers le bas jusqu’à afficher le fichier component-models.json, puis cliquez sur l’icône crayon pour commencer à modifier le fichier.

Faites défiler vers le bas jusqu’à ce que le dernier élément s’affiche. Placez le curseur en regard du crochet fermant du dernier composant.

Saisissez une virgule ,, puis appuyez sur Entrée et, sur la ligne suivante, collez ce code :

{
  "id": "brandconcierge",
  "fields": []
}

Cliquez sur Valider les modifications….

Cliquez sur Valider les modifications.

component-filters.json

Faites défiler l’écran vers le bas jusqu’à afficher le fichier component-filters.json, puis cliquez sur l’icône crayon pour commencer à modifier le fichier.

Vous devriez alors voir ceci.

Sous section, saisissez une , par virgule et collez l’identifiant de votre composant "brandconcierge" après la dernière ligne active.

Cliquez sur Valider les modifications….

Cliquez sur Valider les modifications.

brandconcierge.css

Lors de la création d’un bloc, il est recommandé de créer un fichier pour le style de votre bloc, qui doit porter le même nom. vous devez maintenant créer ce fichier, que nous laisserons vide pour l’instant.

Accédez au dossier blocs. Cliquez ensuite sur Ajouter un fichier et sélectionnez Créer un fichier.

Dans la zone de texte, saisissez brandconcierge/brandconcierge.css. Le fichier peut rester vide pour l'instant. Cliquez sur Valider les modifications….

Cliquez sur Valider les modifications.

brandconcierge.js

Lors de la création d’un bloc, il est recommandé de créer un fichier pour le code JavaScript correspondant à votre bloc, qui doit porter le même nom.

Cliquez sur Ajouter un fichier et sélectionnez Créer un fichier.

Dans la zone de texte, saisissez brandconcierge.js. Le fichier peut rester vide pour l'instant. Cliquez sur Valider les modifications….

export default function decorate(block) {
  block.setAttribute('id', 'brand-concierge-mount');
}

Cliquez sur Valider les modifications.

Créer une page et lier un nouveau bloc personnalisé

Accédez à https://my.cloudmanager.adobe.com. Cliquez sur votre Programme pour l’ouvrir.

Cliquez ensuite sur le de 3 points… dans l’onglet Environnements et cliquez sur Afficher les détails.

Vous verrez ensuite les détails de votre environnement. Cliquez sur l’URL de votre environnement de création.

Vous devriez alors voir votre environnement de création AEM. Accédez à Sites.

Accédez à CitiSignal. Cliquez sur Créer puis sélectionnez Page.

Sélectionnez Page et cliquez sur Suivant.

Saisissez les valeurs suivantes :

Cliquez sur Créer.

Sélectionnez Ouvrir.

Vous devriez alors voir ceci.

Cliquez dans la zone vierge pour sélectionner le composant section. Cliquez ensuite sur l’icône plus + dans le menu de droite.

Votre bloc personnalisé doit alors s’afficher dans la liste des blocs disponibles. Cliquez pour le sélectionner.

Vous devriez alors voir un bloc vide ajouté à cette page. Ce bloc sera chargé dynamiquement à l’aide des bibliothèques JavaScript que vous ajouterez à l’étape suivante.

Cliquez sur Publier.

Cliquez de nouveau sur Publier.

Votre nouvelle page est maintenant publiée et peut être ajoutée à l’en-tête de navigation à l’étape suivante.

Mettre à jour le fichier d’en-tête de navigation

Dans votre présentation AEM Sites, accédez à CitiSignal et cochez la case du fichier Header/nav. Cliquez sur Modifier.

Sélectionnez le champ Texte dans l’écran d’aperçu, puis cliquez sur le champ Texte sur le côté droit de l’écran pour le modifier.

Créez une nouvelle option de menu dans le menu de navigation avec le Brand Concierge texte. Sélectionnez ensuite le texte Brand Concierge puis cliquez sur l'icône lien.

Saisissez ceci pour le champ Chemin ou URL /content/CitiSignal/brandconcierge.html et saisissez Brand Concierge pour le champ Titre. Cliquez sur Enregistrer.

Tu devrais avoir ça. Cliquez sur Terminé.

Tu devrais avoir ça. Cliquez sur Publier.

Cliquez de nouveau sur Publier.

Votre nouvelle page est maintenant ajoutée au menu.

1.4.2.2 Configurer votre site web pour afficher Brand Concierge - GitHub

Après avoir mis à jour le contenu à l’aide de votre environnement de création AEM, vous devez maintenant mettre à jour une partie du code du référentiel GitHub utilisé pour votre site web.

Bibliothèques JavaScript

Les bibliothèques suivantes sont nécessaires pour implémenter Brand Concierge sur votre site web exécuté sur AEM CS/EDS :

Téléchargez les 3 fichiers sur votre bureau.

Accédez au projet GitHub de votre site web AEM CS/EDS. Accédez à scripts.

Cliquez sur Ajouter un fichier puis sélectionnez Télécharger des fichiers.

Cliquez sur Choisir vos fichiers.

Sélectionnez les 3 fichiers styleConfigurations.js, alloy.js et brandconciergemain.js sur votre bureau et cliquez sur Ouvrir.

Cliquez sur Valider les modifications.

Mettre à jour head.html

À l’étape précédente, vous avez chargé 3 nouvelles bibliothèques. Ces bibliothèques doivent maintenant être chargées lors du chargement de votre site web. Pour ce faire, ajoutez des références à ces fichiers dans le fichier head.html.

En outre, vous devez également fournir des instructions dans le fichier head.html pour vous assurer que les bibliothèques sont chargées dans le bon ordre et de manière correcte.

Pour ce faire, accédez au projet GitHub de votre site Web CS/EDS AEM en cliquant sur Code.

Faites défiler l’écran vers le bas. Ouvrez le fichier head.html.

Cliquez sur l’icône crayon pour modifier ce fichier.

Vous devriez alors voir ceci.

Faites défiler jusqu’à la ligne 43 et collez les éléments suivants :

Vous devez mettre à jour 2 champs du code ci-dessous :

<script src="/scripts/styleconfigurations.js"></script>

<script>
        !function (n, o) {
      o.forEach(function (o) {
        n[o] || ((n.__alloyNS = n.__alloyNS ||
          []).push(o), n[o] = function () {
            var u = arguments; return new Promise(
              function (i, l) { n[o].q.push([i, l, u]) })
          }, n[o].q = [])
      })
    }
      (window, ["alloy"]);
    </script>


<script src="/scripts/alloy.js"></script>

<script>
    alloy("configure", {
        defaultConsent: "in",
        edgeDomain: "edge.adobedc.net",
        edgeBasePath: "ee",
        datastreamId: "XXXXX", // replace datastreamId
        orgId: "--aepImsOrgId--", // replace ims org Id
        debugEnabled: true,
        idMigrationEnabled: false,
        thirdPartyCookiesEnabled: false,
        prehidingStyle: ".personalization-container { opacity: 0 !important }",
    });

window["alloy"]("sendEvent", {
    conversation: {
        fetchConversationalExperience: true
    }
}).then(result => {
    console.log("Conversation experience fetched", result);
    window["alloy"]("bootstrapConversationalExperience", {
        selector: "#brand-concierge-mount",
        src: "/scripts/brandconciergemain.js",
        stylingConfigurations: window.styleConfiguration,
        stickySession: true // create a sticky session cookie with expiration
    })
});
</script>

Cliquez sur Valider la modification….

Cliquez sur Valider la modification.

Vous avez maintenant mis à jour le code requis pour charger les bibliothèques sur votre site web.

1.4.2.3 Tester votre configuration

Vous pourrez maintenant tester vos modifications sur votre site web en accédant à main--citisignal-aem-accs--XXX.aem.page ou main--citisignal-aem-accs--XXX.aem.live, après avoir remplacé XXX par votre compte utilisateur GitHub, qui dans cet exemple est woutervangeluwe.

Dans cet exemple, l’URL complète devient :
https://main--citisignal-aem-accs--woutervangeluwe.aem.page et/ou https://main--citisignal-aem-accs--woutervangeluwe.aem.live

Cela peut prendre un certain temps avant que toutes les ressources ne s’affichent correctement, car elles doivent d’abord être publiées.

Vous devriez alors voir ceci. Cliquez sur Brand Concierge.

Vous devriez alors voir ce Brand Concierge où vous pouvez saisir votre invite.

Revenir à Brand Concierge

Revenir à tous les modules