1.4.2 Implementera Brand Concierge på din webbplats

1.4.2.1 Konfigurera webbplatsen så att Brand Concierge - AEM Author visas

För att Brand Concierge ska kunna visas på din webbplats måste du skapa ett nytt anpassat block som ska läggas till på en ny sida, och du måste se till att den nya sidan läggs till i navigeringen på din webbplats.

Du måste nu konfigurera följande i den här ordningen:

Skapa nytt anpassat block

Om du vill skapa det nya anpassade blocket navigerar du till GitHub-databasen som är länkad till din webbplats.

component-definition.json

Bläddra nedåt tills du ser filen component-definition.json och öppna den

Klicka på ikonen pencl för att börja redigera filen.

Bläddra nedåt tills du ser blocken. Ställ in markören under den avslutande parentesen för komponenten Cards

Klistra in den här koden och ange ett kommatecken , efter kodblocket:

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

Klicka på Verkställ ändringar….

Klicka på Verkställ ändringar.

component-models.json

Bläddra nedåt tills du ser filen component-models.json och klicka på ikonen pencil för att börja redigera filen.

Bläddra nedåt tills du ser det sista objektet. Placera markören bredvid den sista komponentens avslutande parentes.

Ange ett kommatecken ,, tryck sedan på Retur och klistra in koden på nästa rad:

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

Klicka på Verkställ ändringar….

Klicka på Verkställ ändringar.

component-filters.json

Bläddra nedåt tills du ser filen component-filters.json och klicka på ikonen penna för att börja redigera filen.

Du borde se det här då.

Under section anger du ett komma , och klistrar in ID:t för komponenten "brandconcierge" efter den aktuella sista raden.

Klicka på Verkställ ändringar….

Klicka på Verkställ ändringar.

brandconcierge.css

När du skapar ett block är det bäst att skapa en fil för formateringen av blocket, och det bör ha samma namn som blocket. bör du nu skapa den filen, som vi lämnar tom tills vidare.

Gå till mappen blocks. Klicka sedan på Lägg till fil och välj Skapa ny fil.

Ange brandconcierge/brandconcierge.css i textrutan. Filen kan vara tom tills vidare. Klicka på Verkställ ändringar….

Klicka på Verkställ ändringar.

brandconcierge.js

När du skapar ett block är det bäst att skapa en fil för javascript-objektet som hör till blocket, och det bör ha samma namn som blocket.

Klicka på Lägg till fil och välj Skapa ny fil.

Ange brandconcierge.js i textrutan. Filen kan vara tom tills vidare. Klicka på Verkställ ändringar….

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

Klicka på Verkställ ändringar.

Skapa ny sida och länka nytt anpassat block

Gå till https://my.cloudmanager.adobe.com. Klicka på ditt program för att öppna det.

Klicka sedan på de 3 punkterna … på fliken Miljö och klicka på Visa detaljer.

Du kommer då att se din miljöinformation. Klicka på URL:en för din författarmiljö.

Du bör då se din AEM Author-miljö. Gå till Webbplatser.

Gå till CitiSignal. Klicka på Skapa och välj Sida.

Välj Sida och klicka på Nästa.

Ange följande värden:

Klicka på Skapa.

Välj Öppna.

Du borde se det här då.

Klicka i det tomma området för att markera komponenten section. Klicka sedan på plusikonen + på den högra menyn.

Du bör sedan se ditt anpassade block visas i listan med tillgängliga block. Klicka för att markera den.

Du bör då se ett tomt block som läggs till på den här sidan. Det här blocket läses in dynamiskt med de javacript-bibliotek som du lägger till i nästa steg.

Klicka på Publicera.

Klicka på Publicera igen.

Den nya sidan publiceras nu och kan nu läggas till i navigeringsrubriken i nästa steg.

Uppdatera navigeringsrubrikfil

Gå till CitiSignal i översikten för AEM Sites och markera kryssrutan för filen Header/nav. Klicka på Redigera.

Markera fältet Text på förhandsgranskningsskärmen och klicka sedan på fältet Text till höger på skärmen för att redigera det.

Skapa ett nytt menyalternativ på navigeringsmenyn med texten Brand Concierge. Markera sedan texten Brand Concierge och klicka på ikonen link .

Ange detta för fältet Sökväg eller URL /content/CitiSignal/brandconcierge.html och ange Brand Concierge som fältnamn Titel. Klicka på Spara.

Du borde ha den här då. Klicka på Klar.

Du borde ha den här då. Klicka på Publicera.

Klicka på Publicera igen.

Den nya sidan läggs nu till på menyn.

1.4.2.2 Konfigurera din webbplats så att den visar Brand Concierge - GitHub

När du har uppdaterat innehållet i AEM Author-miljön måste du nu uppdatera en del av koden i GitHub-databasen som används för webbplatsen.

JavaScript-bibliotek

Följande bibliotek krävs för att implementera Brand Concierge på din webbplats som körs på AEM CS/EDS:

Ladda ned alla tre filerna till skrivbordet.

Gå till GitHub-projektet på din AEM CS/EDS-webbplats. Gå till skript.

Klicka på Lägg till fil och välj sedan Överför filer.

Klicka på Välj dina filer.

Markera alla 3 filerna styleConfigurations.js, alloy.js och brandconciergemain.js på skrivbordet och klicka på Öppna.

Klicka på Verkställ ändringar.

Uppdatera head.html

I föregående steg överförde du tre nya bibliotek. Dessa bibliotek måste nu läsas in när webbplatsen har lästs in och du kan göra det genom att lägga till referenser till dessa filer i filen head.html.

Dessutom måste du ange instruktioner i filen head.html för att se till att biblioteken läses in i rätt ordning och på rätt sätt.

Gå till GitHub-projektet på AEM CS/EDS-webbplatsen genom att klicka på Kod.

Rulla ner lite. Öppna filen head.html.

Klicka på ikonen penna om du vill redigera filen.

Du borde se det här då.

Rulla ned till rad 43 och klistra in följande:

Det finns två fält i nedanstående kod som du behöver uppdatera:

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

Klicka på Verkställ ändring….

Klicka på Verkställ ändring.

Du har nu uppdaterat den kod som krävs för att läsa in biblioteken på webbplatsen.

1.4.2.3 Testa konfigurationen

Du kan nu testa dina ändringar på din webbplats genom att gå till main--citisignal-aem-accs--XXX.aem.page eller main--citisignal-aem-accs--XXX.aem.live efter att du har ersatt XXX med ditt GitHub-användarkonto, som i det här exemplet är woutervangeluwe.

I det här exemplet blir den fullständiga URL:en följande:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page och/eller https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

Det kan ta en stund innan alla resurser visas korrekt, eftersom de måste publiceras först.

Du borde se det här då. Klicka på Brand Concierge.

Du bör då se denna Brand Concierge där du kan skriva din uppmaning.

Gå tillbaka till Brand Concierge

Gå tillbaka till alla moduler