1.4.2 Brand Concierge implementeren op uw website

1.4.2.1 Uw website configureren om Brand Concierge - AEM Author te tonen

Brand Concierge wordt alleen op uw website weergegeven als u een nieuw aangepast blok maakt dat aan een nieuwe pagina moet worden toegevoegd. U moet ervoor zorgen dat de nieuwe pagina aan de navigatie van uw website wordt toegevoegd.

U moet nu de volgende dingen in deze orde vormen:

Nieuw aangepast blok maken

Als u het nieuwe aangepaste blok wilt maken, navigeert u naar de GitHub-opslagplaats die aan uw website is gekoppeld.

component-definition.json

De rol neer tot u het dossier component-definition.json ziet en het opent

Klik het pictogram 0} pencl {beginnen het dossier uit te geven.

De rol neer tot u de Blokken ziet. Plaats uw curseur onder de sluitende steun van de component Kaarten

Plak deze code en voer een komma ​​na het codeblok in:

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

Klik Veranderingen vastleggen….

Klik veranderingen vastleggen.

component-models.json

De rol neer tot u het dossier component-models.json ziet en klikt het potlood pictogram beginnen het dossier uit te geven.

Schuif omlaag totdat u het laatste item ziet. Plaats uw curseur naast de sluitende steun van de laatste component.

Voer een komma ​​in en druk op Enter en op de volgende regel en plak deze code:

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

Klik Veranderingen vastleggen….

Klik veranderingen vastleggen.

component-filters.json

De rol neer tot u het dossier component-filters.json ziet en klikt het potlood pictogram beginnen het dossier uit te geven.

Dan moet je dit zien.

Onder sectie, ga een komma , in en kleef identiteitskaart van uw component "brandconcierge" na de huidige laatste lijn.

Klik Veranderingen vastleggen….

Klik veranderingen vastleggen.

brandconcierge.css

Wanneer u een blok maakt, kunt u het beste een bestand voor de opmaak van het blok maken. Dit bestand moet dezelfde naam hebben als het blok. nu moet u dat bestand maken , dat we voorlopig leeg laten .

Ga naar de blokken omslag. Dan, klik voeg dossier toe en selecteer creeer nieuw dossier.

Typ brandconcierge/brandconcierge.css in het tekstvak. Het bestand kan voorlopig leeg blijven. Klik Veranderingen vastleggen….

Klik veranderingen vastleggen.

brandconcierge.js

Wanneer het creëren van een blok, is het beste praktijken om een dossier voor javascript te creëren met betrekking tot uw blok, en het zou de zelfde naam moeten hebben zoals uw blok.

Klik toevoegen dossier en selecteren nieuw dossier creëren.

Typ brandconcierge.js in het tekstvak. Het bestand kan voorlopig leeg blijven. Klik Veranderingen vastleggen….

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

Klik veranderingen vastleggen.

Nieuwe pagina maken en nieuw aangepast blok koppelen

Ga naar ​ https://my.cloudmanager.adobe.com ​. Klik uw Programma om het te openen.

Daarna, klik de 3 punten … op het milieu's lusje en klik Details van de Mening.

Dan zie je de omgevingsdetails. Klik URL van uw milieu van de Auteur.

Je moet dan de AEM Author-omgeving zien. Ga naar Plaatsen.

Ga naar CitiSignal. Klik creëren en selecteren Pagina.

Selecteer Pagina en klik daarna.

Voer de volgende waarden in:

Klik creëren.

Selecteer Open.

Dan moet je dit zien.

Klik op het lege gebied om de sectie component te selecteren. Klik vervolgens op de plusknop + in het rechtermenu.

Vervolgens wordt het aangepaste blok weergegeven in de lijst met beschikbare blokken. Klik om het te selecteren.

Vervolgens wordt er een leeg blok aan deze pagina toegevoegd. Dit blok wordt dynamisch geladen met de JavaScript-bibliotheken die u in de volgende stap toevoegt.

Klik publiceren.

Klik publiceren opnieuw.

De nieuwe pagina wordt nu gepubliceerd en kan nu in de volgende stap worden toegevoegd aan de navigatiekop.

Navigatiekopbestand bijwerken

In uw overzicht van AEM Sites, ga CitiSignal en controleer checkbox voor het dossier Kopbal/nav. Klik uitgeven.

Selecteer het gebied van de Tekst in het voorproefscherm en klik dan het 3} gebied van de Tekst {op de rechterkant van het scherm om het uit te geven.

Maak een nieuwe menuoptie in het navigatiemenu met de tekst Brand Concierge . Dan, selecteer de tekst Brand Concierge en klik het verbindings pictogram.

Ga dit voor het gebied Weg of URL /content/CitiSignal/brandconcierge.html in en ga Brand Concierge voor het gebied Titel in. Klik sparen.

Dan moet je dit hebben. Klik Gedaan.

Dan moet je dit hebben. Klik publiceren.

Klik publiceren opnieuw.

De nieuwe pagina wordt nu toegevoegd aan het menu.

1.4.2.2 Uw website configureren om Brand Concierge - GitHub weer te geven

Na het bijwerken van de inhoud die uw milieu van de Auteur van AEM gebruikt, moet u nu enkele code in de bewaarplaats bijwerken GitHub die voor uw website wordt gebruikt.

JavaScript-bibliotheken

U hebt de volgende bibliotheken nodig om Brand Concierge te implementeren op uw website die wordt uitgevoerd op AEM CS/EDS:

Download alle 3 bestanden naar uw bureaublad.

Ga naar het GitHub-project van uw AEM CS/EDS-website. Ga naar manuscripten.

Klik toevoegen dossier en selecteer dan dossiers uploaden.

Klik kiezen uw dossiers.

Selecteer alle 3 dossiers styleConfigurations.js, alloy.js en brandconciergemain.js van uw Desktop en klik Open.

Klik veranderingen vastleggen.

head.html bijwerken

In de vorige stap hebt u 3 nieuwe bibliotheken geüpload. Deze bibliotheken moeten nu worden geladen wanneer uw website en de manier wordt geladen om dat te doen verwijzingen naar deze dossiers in het dossier head.html toevoegen.

Bovendien, moet u ook instructies in het {dossier verstrekken 0} head.html om ervoor te zorgen dat de bibliotheken in de juiste orde en op een correcte manier worden geladen.

Om dat te doen, ga naar het project GitHub van uw website van AEM CS/EDS door Code te klikken.

Schuif een beetje omlaag. Open het dossier head.html.

Klik het potlood pictogram om dit dossier uit te geven.

Dan moet je dit zien.

Schuif omlaag naar regel 43 en plak de volgende tekst:

De onderstaande code bevat twee velden die u moet bijwerken:

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

Klik Verandering vastleggen….

Klik Verandering vastleggen.

U hebt nu de vereiste code bijgewerkt om de bibliotheken op uw website te laden.

1.4.2.3 De configuratie testen

U kunt nu uw wijzigingen op uw website testen door naar main--citisignal-aem-accs--XXX.aem.page of main--citisignal-aem-accs--XXX.aem.live te gaan, nadat u XXX hebt vervangen door uw GitHub-gebruikersaccount, die in dit voorbeeld woutervangeluwe is.

In dit voorbeeld wordt de volledige URL als volgt:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page en/of https://main--citisignal-aem-accs--woutervangeluwe.aem.live .

Het kan enige tijd duren voordat alle activa correct zijn weergegeven, aangezien deze eerst moeten worden gepubliceerd.

Dan moet je dit zien. Klik Brand Concierge.

Je moet dan deze Brand Concierge zien waar je je vraag kunt invoeren.

Ga terug naar ​ Brand Concierge ​

​ ga terug naar Alle Modules ​