1.1.3 Utveckla ett enkelt anpassat block

1.1.3.1 Konfigurera din lokala utvecklingsmiljö

Gå till https://desktop.github.com/download/, hämta och installera Github Desktop.

När du har installerat Github Desktop går du till GitHub-versionen som du skapade i föregående övning. Klicka på <> Kod och sedan på Öppna med GitHub Desktop.

Din GitHub-repo öppnas sedan i GitHub Desktop. Du kan ändra den lokala sökvägen. Klicka på Klona.

En lokal mapp kommer nu att skapas.

Öppna Visual Studio-kod. Gå till Arkiv > Öppna mapp.

Välj den mapp som används av GitHub-konfigurationen för citisignal-aem-accs.

Nu ser du att mappen är öppen i Visual Studio Code. Nu kan du skapa ett nytt block.

1.1.3.2 Skapa ett enkelt anpassat block

Adobe rekommenderar att du utvecklar block i tre faser:

component-definition.json

Öppna filen component-definition.json i Visual Studio Code.

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": "FiberOffer",
  "id": "fiberoffer",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "FiberOffer",
          "model": "fiberoffer",
          "offerText": "<p>Fiber will soon be available in your region!</p>",
          "offerCallToAction": "Get your offer now!",
          "offerImage": ""
        }
      }
    }
  }
}

Spara ändringarna.

component-models.json

Öppna filen component-models.json i Visual Studio Code.

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": "fiberoffer",
  "fields": [
     {
       "component": "richtext",
       "name": "offerText",
       "value": "",
       "label": "Offer Text",
       "valueType": "string"
     },
     {
       "component": "richtext",
       "valueType": "string",
       "name": "offerCallToAction",
       "label": "Offer CTA",
       "value": ""
     },
     {
       "component": "reference",
       "valueType": "string",
       "name": "offerImage",
       "label": "Offer Image",
        "multi": false
     }
   ]
}

Spara ändringarna.

component-filters.json

Öppna filen component-filters.json i Visual Studio-koden.

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

Spara ändringarna.

1.1.3.3 Genomför dina ändringar

Du har nu gjort flera ändringar i ditt projekt som behöver implementeras i GitHub-databasen igen. Öppna GitHub Desktop om du vill göra det.

Du bör sedan se de 3 filer som du just redigerade under Ändringar. Granska ändringarna.

Ange ett namn för din PR, Fiber Offer custom block. Klicka på Verkställ för huvudsidan.

Du borde se det här då. Klicka på Push origin.

Efter några sekunder har dina ändringar överförts till din GitHub-databas.

Gå till ditt GitHub-konto i webbläsaren och till databasen som du skapade för CitiSignal. Du bör då se något liknande och visa att dina ändringar har tagits emot.

1.1.3.4 Lägg till blocket på en sida

Nu när ditt grundläggande offertblock har definierats och implementerats i CitiSignal-projektet kan du lägga till ett fiberoffer -block på en befintlig sida.

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.

Då visas fält som Erbjud text, Erbjud CTA och Erbjud bild som läggs till i redigeraren. Klicka på + Lägg till i fältet Erbjud bild för att välja en bild.

Du borde se det här då. Klicka för att öppna mappen citisign.

Välj bilden product-enrichment-1.png. Klicka på Markera.

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

Klicka på Publicera igen.

Din nya sida har publicerats.

1.1.3.5 Lägg till din nya sida på navigeringsmenyn

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.

Lägg till ett menyalternativ på navigeringsmenyn med texten Fiber. Markera texten Fiber och klicka på ikonen link .

Ange den här för URL /content/CitiSignal/fiber.html och klicka på ikonen V för att bekräfta.

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

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

Klicka på Publicera igen.

Du kan nu visa ändringarna av din webbplats genom att gå till main--citisignal--XXX.aem.page/us/en/ och/eller main--citisignal--XXX.aem.live/us/en/ efter att du 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--woutervangeluwe.aem.page/us/en/ och/eller https://main--citisignal--woutervangeluwe.aem.live/us/en/.

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

Här är ditt grundläggande anpassade block, men det återges nu på webbplatsen.

Nästa steg: Avancerat anpassat block

Gå tillbaka till Adobe Experience Manager Cloud Service & Edge Delivery Services

Gå tillbaka till alla moduler