1.4.2 Implementare Brand Concierge sul sito web

1.4.2.1 Configura il tuo sito Web per mostrare Brand Concierge - AEM Author

Affinché Brand Concierge venga visualizzato sul sito web, devi creare un nuovo blocco personalizzato che deve essere aggiunto a una nuova pagina e assicurarti che la nuova pagina sia aggiunta alla navigazione del sito web.

Ora devi configurare i seguenti elementi in questo ordine:

Crea nuovo blocco personalizzato

Per creare il nuovo blocco personalizzato, accedi all’archivio GitHub collegato al tuo sito web.

component-definition.json

Scorri verso il basso fino a visualizzare il file component-definition.json e aprilo

Fai clic sull'icona pencl per iniziare a modificare il file.

Scorri verso il basso fino a visualizzare i blocchi. Imposta il cursore sotto la parentesi quadra di chiusura del componente Schede

Incolla questo codice e immetti una virgola , dopo il blocco di codice:

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

Fare clic su Commit changes….

Fai clic su Commit changes.

component-models.json

Scorri verso il basso fino a visualizzare il file component-models.json e fai clic sull'icona pencil per iniziare a modificare il file.

Scorri verso il basso fino a visualizzare l’ultimo elemento. Impostare il cursore accanto alla parentesi quadra di chiusura dell'ultimo componente.

Inserisci una virgola ,, quindi premi Invio e, alla riga successiva, incolla questo codice:

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

Fare clic su Commit changes….

Fai clic su Commit changes.

component-filters.json

Scorri verso il basso fino a visualizzare il file component-filters.json e fai clic sull'icona pencil per iniziare a modificare il file.

Dovresti vedere questo.

In sezione, inserisci una virgola , e incolla l'ID del componente "brandconcierge" dopo l'ultima riga corrente.

Fare clic su Commit changes….

Fai clic su Commit changes.

brandconcierge.css

Durante la creazione di un blocco, è consigliabile creare un file per lo stile del blocco e deve avere lo stesso nome del blocco. ora devi creare il file, che per il momento rimarrà vuoto.

Vai alla cartella blocca. Quindi fare clic su Aggiungi file e selezionare Crea nuovo file.

Nella casella di testo immettere brandconcierge/brandconcierge.css. Il file può rimanere vuoto per il momento. Fare clic su Commit changes….

Fai clic su Commit changes.

brandconcierge.js

Durante la creazione di un blocco, è consigliabile creare un file per il codice JavaScript correlato al blocco e deve avere lo stesso nome del blocco.

Fare clic su Aggiungi file e selezionare Crea nuovo file.

Nella casella di testo immettere brandconcierge.js. Il file può rimanere vuoto per il momento. Fare clic su Commit changes….

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

Fai clic su Commit changes.

Crea nuova pagina e collega nuovo blocco personalizzato

Vai a https://my.cloudmanager.adobe.com. Fai clic sul Programma per aprirlo.

Fare clic sui tre punti … nella scheda Ambienti e quindi su Visualizza dettagli.

Visualizzerai quindi i dettagli dell’ambiente. Fai clic sull'URL dell'ambiente Author.

Dovresti quindi visualizzare l’ambiente AEM Author. Vai a Sites.

Vai a CitiSignal. Fai clic su Crea e seleziona Pagina.

Seleziona Pagina e fai clic su Avanti.

Immetti i seguenti valori:

Fai clic su Crea.

Seleziona Apri.

Dovresti vedere questo.

Fare clic nell'area vuota per selezionare il componente sezione. Quindi, fai clic sull'icona più + nel menu a destra.

Dovresti quindi visualizzare il blocco personalizzato nell’elenco dei blocchi disponibili. Fai clic su per selezionarlo.

Dovresti quindi vedere un blocco vuoto aggiunto a questa pagina. Questo blocco verrà caricato dinamicamente utilizzando le librerie JavaScript che aggiungerai nel passaggio successivo.

Fai clic su Pubblica.

Fai di nuovo clic su Pubblica.

La nuova pagina è ora pubblicata e può essere aggiunta all’intestazione di navigazione nel passaggio successivo.

Aggiorna file di intestazione di navigazione

Nella panoramica di AEM Sites, vai a CitiSignal e seleziona la casella di controllo per il file Header/nav. Fai clic su Modifica.

Seleziona il campo Testo nella schermata di anteprima, quindi fai clic sul campo Testo sul lato destro della schermata per modificarlo.

Creare una nuova opzione di menu nel menu di navigazione con il testo Brand Concierge. Quindi, seleziona il testo Brand Concierge e fai clic sull'icona link.

Immetti questo valore per il campo Percorso o URL /content/CitiSignal/brandconcierge.html e Brand Concierge per il campo Titolo. Fai clic su Salva.

Dovresti avere questo. Fai clic su Fine.

Dovresti avere questo. Fai clic su Pubblica.

Fai di nuovo clic su Pubblica.

La nuova pagina viene aggiunta al menu.

1.4.2.2 Configura il tuo sito Web per mostrare Brand Concierge - GitHub

Dopo aver aggiornato il contenuto utilizzando l’ambiente di authoring di AEM, ora è necessario aggiornare parte del codice nell’archivio GitHub utilizzato per il sito web.

Librerie JavaScript

Per implementare Brand Concierge sul sito web in esecuzione su AEM CS/EDS sono necessarie le seguenti librerie:

Scarica tutti e 3 i file sul desktop.

Vai al progetto GitHub del tuo sito web AEM CS/EDS. Vai a script.

Fare clic su Aggiungi file, quindi selezionare Carica file.

Fai clic su Scegli i file.

Seleziona tutti e 3 i file styleConfigurations.js, alloy.js e brandconciergemain.js dal desktop e fai clic su Apri.

Fai clic su Commit changes.

Aggiorna head.html

Nel passaggio precedente hai caricato 3 nuove librerie. Queste librerie ora devono essere caricate quando il sito Web viene caricato e il modo per farlo è aggiungere riferimenti a questi file nel file head.html.

Inoltre, devi fornire le istruzioni nel file head.html per garantire che le librerie siano caricate nell'ordine corretto e in modo corretto.

A tale scopo, vai al progetto GitHub del tuo sito Web AEM CS/EDS facendo clic su Codice.

Scorri verso il basso un po'. Apri il file head.html.

Fai clic sull'icona matita per modificare questo file.

Dovresti vedere questo.

Scorri verso il basso fino alla riga 43 e incolla quanto segue:

Il codice seguente contiene 2 campi che è necessario aggiornare:

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

Fare clic su Commit change….

Fai clic su Commit change.

Ora hai aggiornato il codice richiesto per caricare le librerie sul tuo sito web.

1.4.2.3 Verifica la configurazione

Ora potrai verificare le modifiche sul tuo sito web andando su main--citisignal-aem-accs--XXX.aem.page o main--citisignal-aem-accs--XXX.aem.live, dopo aver sostituito XXX con l'account utente GitHub, che in questo esempio è woutervangeluwe.

In questo esempio, l’URL completo diventa:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page e/o https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

Potrebbero essere necessari alcuni minuti prima che tutte le risorse vengano visualizzate correttamente, in quanto devono essere pubblicate prima.

Dovresti vedere questo. Fare clic su Brand Concierge.

Dovresti quindi visualizzare questo Brand Concierge dove puoi inserire la richiesta.

Torna a Brand Concierge

Torna a tutti i moduli