1.4.2 Implementieren von Brand Concierge auf Ihrer Website

1.4.2.1 Konfigurieren Ihrer Website, um Brand Concierge anzuzeigen - AEM Author

Damit Brand Concierge auf Ihrer Website angezeigt wird, müssen Sie einen neuen benutzerdefinierten Block erstellen, der zu einer neuen Seite hinzugefügt werden muss, und Sie müssen sicherstellen, dass Ihre neue Seite zur Navigation Ihrer Website hinzugefügt wird.

Konfigurieren Sie nun die folgenden Elemente in dieser Reihenfolge:

Neuen benutzerdefinierten Block erstellen

Um den neuen benutzerdefinierten Block zu erstellen, navigieren Sie zum GitHub-Repository, das mit Ihrer Website verknüpft ist.

component-definition.json

Scrollen Sie nach unten, bis Sie die Datei component-definition.json sehen, und öffnen Sie sie

Klicken Sie auf das pencl-Symbol, um mit der Bearbeitung der Datei zu beginnen.

Scrollen Sie nach unten, bis Sie die Blöcke“. Setzen Sie den Cursor unter die schließende Klammer der Komponente Karten

Fügen Sie diesen Code ein und geben Sie nach dem Codeblock ein ein:

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

Klicken Sie Änderungen übernehmen….

Klicken Sie Änderungen übernehmen.

component-models.json

Scrollen Sie nach unten, bis Sie die Datei component-models.json sehen, und klicken Sie auf das Bleistiftsymbol, um mit der Bearbeitung der Datei zu beginnen.

Scrollen Sie nach unten, bis Sie das letzte Element sehen. Setzen Sie den Cursor neben die schließende Klammer der letzten Komponente.

Geben Sie einen ein, drücken Sie dann die Eingabetaste, und fügen Sie in der nächsten Zeile diesen Code ein:

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

Klicken Sie Änderungen übernehmen….

Klicken Sie Änderungen übernehmen.

component-filters.json

Scrollen Sie nach unten, bis Sie die Datei component-filters.json sehen, und klicken Sie auf das Bleistiftsymbol, um mit der Bearbeitung der Datei zu beginnen.

Sie sollten das dann sehen.

Geben unter Abschnitt“ einen , ein und fügen Sie die ID Ihrer "brandconcierge" nach der aktuellen letzten Zeile ein.

Klicken Sie Änderungen übernehmen….

Klicken Sie Änderungen übernehmen.

brandconcierge.css

Beim Erstellen eines Blocks empfiehlt es sich, eine Datei für den Stil des Blocks zu erstellen. Sie sollte denselben Namen wie der Block aufweisen. Jetzt sollten Sie diese Datei erstellen, die wir vorerst leer lassen.

Wechseln Sie zum blocks-Ordner. Klicken Sie dann auf Datei hinzufügen und wählen Sie Neue Datei erstellen aus.

Geben Sie in das Textfeld brandconcierge/brandconcierge.css ein. Die Datei kann vorerst leer bleiben. Klicken Sie Änderungen übernehmen….

Klicken Sie Änderungen übernehmen.

brandconcierge.js

Beim Erstellen eines Blocks empfiehlt es sich, eine Datei für das JavaScript zu erstellen, das sich auf Ihren Block bezieht. Außerdem sollte sie denselben Namen wie der Block haben.

Klicken Sie Datei hinzufügen und wählen Sie Neue Datei erstellen aus.

Geben Sie in das Textfeld brandconcierge.js ein. Die Datei kann vorerst leer bleiben. Klicken Sie Änderungen übernehmen….

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

Klicken Sie Änderungen übernehmen.

Neue Seite erstellen und neuen benutzerdefinierten Block verknüpfen

Navigieren Sie zu https://my.cloudmanager.adobe.com. Klicken Sie auf Programm, um es zu öffnen.

Klicken Sie anschließend auf der Registerkarte Umgebungen auf die mit den drei Punkten und anschließend auf Details anzeigen.

Anschließend werden Ihre Umgebungsdetails angezeigt. Klicken Sie auf die URL Ihrer Author-Umgebung.

Anschließend sollte Ihre AEM-Autorenumgebung angezeigt werden. Navigieren Sie zu Sites.

Gehen Sie zu CitiSignal. Klicken Sie Erstellen und wählen Sie Seite aus.

Wählen Sie Seite aus und klicken Sie auf Weiter.

Geben Sie die folgenden Werte ein:

Klicken Sie auf Erstellen.

Wählen Sie Öffnen aus.

Sie sollten das dann sehen.

Klicken Sie in den leeren Bereich, um die Komponente Abschnitt auszuwählen. Klicken Sie dann im rechten Menü auf das Pluszeichen +.

Anschließend sollte der benutzerdefinierte Block in der Liste der verfügbaren Blöcke angezeigt werden. Zur Auswahl klicken.

Anschließend sollte dieser Seite ein leerer Block hinzugefügt werden. Dieser Block wird dynamisch mit den JavaScript-Bibliotheken geladen, die Sie im nächsten Schritt hinzufügen werden.

Klicken Sie auf Veröffentlichen.

Klicken erneut auf Veröffentlichen“.

Ihre neue Seite ist jetzt veröffentlicht und kann im nächsten Schritt zur Navigationskopfzeile hinzugefügt werden.

Navigationskopfzeilendatei aktualisieren

Gehen Sie in Ihrer AEM Sites-Übersicht zu CitiSignal und aktivieren Sie das Kontrollkästchen für die Datei Header/nav. Klicken Sie auf Bearbeiten.

Wählen Sie das Text-Feld im Vorschaubildschirm aus und klicken Sie dann auf das Text-Feld auf der rechten Bildschirmseite, um es zu bearbeiten.

Erstellen Sie eine neue Menüoption im Navigationsmenü mit dem Brand Concierge. Wählen Sie dann den Text Brand Concierge und klicken Sie auf das Symbol link.

Geben Sie dies für das Feld Pfad oder URL /content/CitiSignal/brandconcierge.html und geben Sie Brand Concierge für das Feld Titel ein. Klicken Sie auf Speichern.

Sie sollten dann diese haben. Klicken Sie auf Fertig.

Sie sollten dann diese haben. Klicken Sie auf Veröffentlichen.

Klicken erneut auf Veröffentlichen“.

Ihre neue Seite wird nun dem Menü hinzugefügt.

1.4.2.2 Konfigurieren Ihrer Website, um Brand Concierge anzuzeigen - GitHub

Nachdem Sie den Inhalt mit Ihrer AEM-Autorenumgebung aktualisiert haben, müssen Sie jetzt den Code im GitHub-Repository aktualisieren, der für Ihre Website verwendet wird.

JavaScript-Bibliotheken

Die folgenden Bibliotheken sind erforderlich, um Brand Concierge auf Ihrer Website zu implementieren, die auf AEM CS/EDS ausgeführt wird:

Laden Sie alle drei Dateien auf Ihren Desktop herunter.

Gehen Sie zum GitHub-Projekt Ihrer AEM CS/EDS-Website. Navigieren Sie zu scripts.

Klicken Sie auf Datei hinzufügen und wählen Sie dann Dateien hochladen aus.

Klicken Sie Dateien auswählen.

Wählen Sie alle drei Dateien styleConfigurations.js, alloy.js und brandconciergemain.js von Ihrem Desktop aus und klicken Sie auf Öffnen.

Klicken Sie Änderungen übernehmen.

head.html aktualisieren

Im vorherigen Schritt haben Sie drei neue Bibliotheken hochgeladen. Diese Bibliotheken müssen jetzt geladen werden, wenn Ihre Website geladen wird. Dazu müssen Verweise auf diese Dateien in der Datei „head." hinzugefügt.

Darüber hinaus müssen Sie auch Anweisungen in der Datei head.html bereitstellen, um sicherzustellen, dass die Bibliotheken in der richtigen Reihenfolge und auf richtige Weise geladen werden.

Gehen Sie dazu zum GitHub-Projekt Ihrer AEM CS/EDS-Website, indem Sie auf Code klicken.

Scroll ein bisschen nach unten. Öffnen Sie die Datei head.html.

Klicken Sie auf Bleistiftsymbol, um diese Datei zu bearbeiten.

Sie sollten das dann sehen.

Scrollen Sie nach unten zu Zeile 43 und fügen Sie Folgendes ein:

Im folgenden Code gibt es zwei Felder, die Sie aktualisieren müssen:

<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>

Klicken Sie Änderung übernehmen….

Klicken Sie Änderung übernehmen.

Sie haben jetzt den erforderlichen Code aktualisiert, um die Bibliotheken auf Ihrer Website zu laden.

1.4.2.3 Testen der Konfiguration

Sie können Ihre Änderungen auf Ihrer Website jetzt testen, indem Sie zu main--citisignal-aem-accs--XXX.aem.page oder main--citisignal-aem-accs--XXX.aem.live wechseln, nachdem Sie XXX durch Ihr GitHub-Benutzerkonto ersetzt haben, was in diesem Beispiel woutervangeluwe ist.

In diesem Beispiel lautet die vollständige URL wie folgt:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page und/oder https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

Es kann einige Zeit dauern, bis alle Assets korrekt angezeigt werden, da sie zuerst veröffentlicht werden müssen.

Sie sollten das dann sehen. Auf Brand Concierge.

Sie sollten dann diese Brand Concierge sehen, in der Sie Ihre Eingabeaufforderung eingeben können.

Zurück zu Brand Concierge

Zurück zu „Alle Module“