Entwickeln des Edge Delivery Services-Blocks

Unser Ziel ist es​ einen ​ Edge Delivery Services-Block zu erstellen, der eine AEM Edge-Funktion aufruft, um dynamische Daten aus einer Drittanbieter-API abzurufen.

Im zweiten Schritt wird der Edge Delivery Services-Block entwickelt, der ein JSON-Modell, JavaScript und CSS als Strukturvorlage verwendet und im universellen Editor verfasst. Informationen zur Blockmodellsyntax und zu den Grundlagen der JavaScript- und CSS-Struktur finden Sie unter Erstellen eines Blocks und Erstellen eines Blocks. Nur die für dieses Tutorial spezifischen Teile werden hier behandelt.

Dieser Schritt ruft die AEM Edge-Funktion, die wir im vorherigen ​ erstellt haben, noch ​ auf. Der Edge Delivery Services-Block rendert ein Platzhalterergebnis, bis Der Block mit der AEM-Edge-Funktion ​ ist.

Erstellen einer Verzweigung

Erstellen Sie in Ihrem Edge Delivery Services-Site-Projekt eine Verzweigung für diese Funktion.

$ git checkout -b estimated-delivery

Blockmodell definieren

Bevor Sie JavaScript schreiben, definieren Sie, welche Felder ein Autor steuert und welche Felder der Code eigenständig rendert, sodass das Inhaltsmodell klein bleibt.

Das Modell in _estimated-delivery.json stellt nur zwei Felder bereit: die Überschrift und die Schaltflächenbeschriftung. Die Produktliste, das Formular-Markup und die Ergebnisstatus werden von der JavaScript des Edge Delivery Services-Blocks und nicht von erstellten Inhalten gerendert.

// blocks/estimated-delivery/_estimated-delivery.json
{
  "definitions": [
    {
      "title": "Estimated Delivery",
      "id": "estimated-delivery",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Estimated Delivery",
              "model": "estimated-delivery",
              "title": "When will it arrive?",
              "ctaText": "Check estimated delivery"
            }
          }
        }
      }
    }
  ],
  "models": [
    {
      "id": "estimated-delivery",
      "fields": [
        {
          "component": "text",
          "valueType": "string",
          "name": "title",
          "value": "When will it arrive?",
          "label": "Heading",
          "description": "Main heading shown above the delivery checker form."
        },
        {
          "component": "text",
          "valueType": "string",
          "name": "ctaText",
          "value": "Check estimated delivery",
          "label": "CTA Text",
          "description": "Label for the submit button."
        }
      ]
    }
  ],
  "filters": []
}

Befolgen Sie für Feldtypen über text hinaus die Modellsyntax in Erstellen eines Blocks.

Registrieren des Blocks für den universellen Editor

Die Blockmodelldatei allein reicht nicht aus, damit der universelle Editor den Block in seiner Einfügeauswahl anbieten kann. Zwei weitere Dateien benötigen zunächst einen manuellen Eintrag, da sie Blöcke nach Namen auflisten, anstatt sie automatisch zu erkennen.

Fügen Sie den Block in der models/_component-definition.json der Gruppe „Blöcke“ hinzu:

{ "...": "../blocks/estimated-delivery/_*.json#/definitions" }

Wenn der Block innerhalb eines Abschnitts eingefügt werden kann, fügen Sie auch seine ID zum filters[0].components von models/_section.json hinzu:

"estimated-delivery"

models/_component-models.json braucht diese Behandlung nicht. Sie enthält jeden Block automatisch über einen Platzhalter ../blocks/*/_*.json#/models, sodass nur das Feldschema des Blocks ausreicht, um component-models.json zu erreichen. models/_component-definition.json und models/_section.json verwenden keinen Platzhalter für dieses Projekt. Daher ist ein neuer Block in der Auswahl unsichtbar, bis er beiden mit Namen hinzugefügt wird, obwohl sein Modell korrekt kompiliert wird.

Kompilieren Sie beide Bearbeitungen in die Aggregatdateien des Projekts (component-definition.json, component-filters.json und component-models.json), die unter „Erstellen ​ Projekt-JSON“ ​ werden.

Implementieren des Bausteins

Dateien, die Sie hinzufügen werden

blocks/estimated-delivery/
├── _estimated-delivery.json   # the block model, shown above
├── estimated-delivery.js      # decorate() renders the form and result states
└── estimated-delivery.css     # form layout and result state styling

Rendern des Formulars und eines Platzhalterergebnisses

Erstellen Sie die decorate(), um eine Produktauswahl, eine Postcodeeingabe, eine Senden-Schaltfläche und einen leeren Ergebnisbereich zu rendern. Behalten Sie den Übermittlungs-Handler vorerst als Stub bei.

Der readBlockContent() liest die beiden erstellten Felder aus dem DOM des Blocks. Der universelle Editor rendert jedes Modellfeld als untergeordnetes <div> in der Feldreihenfolge, sodass die Überschrift der Text des ersten untergeordneten Elements und die Schaltflächenbeschriftung der zweiten ist. Dadurch wird auf einen Standardwert zurückgegriffen, wenn ein Feld leer ist:

// blocks/estimated-delivery/estimated-delivery.js
const DEFAULTS = {
  title: 'When will it arrive?',
  ctaText: 'Check estimated delivery',
};

const PRODUCTS = [
  { value: 'house-blend-medium-roast', label: 'House Blend - Medium Roast' },
  { value: 'frescopa-smart-machine', label: 'Fréscopa Smart Machine' },
  { value: 'insulated-travel-thermos', label: 'Insulated Travel Thermos' },
];

const PRODUCT_OPTIONS_HTML = PRODUCTS.map(
  (p) => `<option value="${p.value}">${p.label}</option>`,
).join('');

function getBlockText(el, fallback) {
  const text = el?.textContent?.trim();
  return text || fallback;
}

function readBlockContent(block) {
  const props = [...block.children].map((row) => row.firstElementChild);

  return {
    title: getBlockText(props[0], DEFAULTS.title),
    ctaText: getBlockText(props[1], DEFAULTS.ctaText),
  };
}

export default function decorate(block) {
  const { title, ctaText } = readBlockContent(block);

  block.innerHTML = `
    <div class="estimated-delivery">
      <h3 data-aue-prop="title" data-aue-label="Heading" data-aue-type="text">${title}</h3>
      <form class="estimated-delivery__form">
        <select name="sku">${PRODUCT_OPTIONS_HTML}</select>
        <input name="postcode" type="text" placeholder="e.g. 10001" required />
        <button type="submit" data-aue-prop="ctaText" data-aue-label="CTA Text" data-aue-type="text">${ctaText}</button>
      </form>
      <div class="estimated-delivery__result" aria-live="polite">
        <p>Select a product, enter your postcode, and click the button.</p>
      </div>
    </div>
  `;

  // form submit logic added in the next step
}

data-aue-prop, data-aue-label und data-aue-type kennzeichnen die Überschrift und den Schaltflächentext als bearbeitbare Felder im universellen Editor, das gleiche Muster wie in Block erstellen. Dies ist die Strukturvorlage, nicht die endgültige Datei. Die estimated-delivery.js der Referenzimplementierung enthält auch die Abruflogik aus "​ des Blocks mit der AEM Edge-Funktion verbinden, die auf die vollständige Datei verweist, sobald diese Logik eingerichtet ist.

Gestalten des Blocks

Fügen Sie CSS für das Formular-Layout, den Platzhalterstatus und die Ergebnisstatus hinzu, die der Edge Delivery Services-Block später rendert (Laden, Fehler, Erfolg), gefolgt von Entwickeln eines Blocks mit CSS und JavaScript. Ein repräsentativer Auszug aus estimated-delivery.css:

/* blocks/estimated-delivery/estimated-delivery.css */
.estimated-delivery__form {
  display: grid;
  gap: var(--spacing-small);
  padding: var(--spacing-medium);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
}

.estimated-delivery__placeholder {
  display: grid;
  gap: var(--spacing-xsmall);
  align-content: center;
  border: 2px dashed var(--color-neutral-400);
  border-radius: 12px;
  text-align: center;
}

Die vollständige -Datei formatiert auch den Ladeschleuder und die Statusfarben der Erfolgskarte (in-stock, low-stock, out-of-stock), die der Edge Delivery Services-Block erst rendert, wenn den Block mit der AEM Edge-Funktion verbinden.

Code pushen und Block erstellen

Lokale Vorschau des Blocks

Führen Sie die Edge Delivery Services-Site lokal aus und bestätigen Sie die Darstellung des Platzhalters, bevor Sie den Abrufaufruf verkabeln.

$ aem up

Öffnen Sie die unter http://localhost:3000/dev/branches/estimated-delivery erstellte Seite und bestätigen Sie, dass Überschrift, Formular und Platzhaltertext als erstellt gerendert werden. Die Senden-Schaltfläche bewirkt noch nichts.

Nächste Schritte

In Verbinden des Bausteins mit der AEM Edge-Funktion verkabeln Sie diesen Edge Delivery Services-Baustein mit der AEM Edge-Funktion, die Sie im vorherigen Schritt erstellt haben, und ersetzen das Platzhalterergebnis durch Live-Daten.

Zusätzliche Ressourcen