Erstellen, Aktualisieren und Umgestalten von Blöcken block-development

Verwenden Sie den Experience Modernization Agent sowohl für die laufende Edge Delivery Services-Entwicklung als auch für die Migration. Beginnen Sie mit dem Bedarf der Autorin bzw. des Autors und den tatsächlichen Inhalten, und wählen Sie dann die kleinste Implementierung aus, die sie unterstützt.

Der Agent folgt für diese Arbeit der Content-Driven Development (CDD). Es beginnt mit echten Inhalten und damit, wie Autoren sie erstellen, und schreibt danach Code. Dadurch bleiben Inhaltsmodelle für Autoren einfach zu verwenden, und es werden Blöcke vermieden, die nur von Entwicklern ausgefüllt werden können.

Verbinden Sie das gewünschte Repository und die Verzweigung, bestätigen Sie die Änderungsberechtigungen und identifizieren wo der Inhalt gespeichert ist. Bewahren Sie eine Grundlinie auf, bevor Sie freigegebenen Code oder Inhaltsmodelle ändern.

Vor dem Erstellen eines Blocks erstellen composition

HTML-Elemente sind die grundlegenden Baueinheiten (oder Atome): Überschriften, Absätze, Links, Listen und Bilder. Autoren sollten für diese nach Möglichkeit Standardinhalte verwenden, d. h. Inhalte außerhalb von Blöcken. Globale Stile und benutzerdefinierte CSS-Eigenschaften oder Design-Token definieren gemeinsame Typografie, Farben, Abstände und die Darstellung von Links/Schaltflächen.

Mit einem Block können Autorinnen und Autoren markieren, welche Inhalte eine Komponente bilden, z. B. einen Kartensatz oder ein Karussell, in dem der Code sie nicht vom umgebenden Standardinhalt unterscheiden konnte. In der HTML, die von Ihrer Site bereitgestellt wird, ist ein Block ein div mit dem Blocknamen als Klasse. Das Projekt ist blocks/<name>/<name>.js und blocks/<name>/<name>.css es im Browser dekorieren. Wo der Code ein Muster im Standardinhalt erkennen kann, kann er den Block selbst erstellen, den aem.live aufruft auto-blocking: Das Textbaustein von AEM wandelt beispielsweise einen Link zu einer /widgets/ Seite in einen Widget-Block um. Halten Sie einen Block leicht und fokussiert. Ein visueller Unterschied allein erfordert keinen neuen Block: CSS und JavaScript können Standardinhalte formatieren, und eine Variante oder ein Abschnittsstil kann den Unterschied aufweisen.

David’s Model sammelt die aem.live-Regeln für Inhalte, die Autoren einfach erstellen können: Standardinhalte bevorzugen, Blöcke innerhalb von Blöcken vermeiden, die Anzahl der Blöcke und Varianten klein halten und die Schaltflächen ihren Stil aus dem Block oder Abschnitt übernehmen lassen, in dem sie sich befinden. Wenn ein Block dieselbe Aufgabe erfüllt wie in der Blocksammlung, verwenden Sie das Inhaltsmodell dieses Blocks erneut.

Überprüfen Sie die Konventionen des Projekts, bevor Sie Code generieren:

Edge Delivery Services verfügt über keine integrierte Schaltflächengruppe oder Fußnotensteuerung. Jeder ist eine Konvention, die der Code des Projekts auf die erstellten Inhalte anwendet. Überprüfen Sie daher, wie Ihr Projekt sie implementiert, und testen Sie das gerenderte Ergebnis.

Beispiel: Ein flexibler Teaser ohne Atomblöcke composition-example

Komponentenbasierte Adobe Experience Manager-Projekte bieten häufig eine Teaser-Komponente oder separate Überschriften-, Bild-, Text- und Schaltflächenkomponenten, sodass Autorinnen und Autoren sie kombinieren können. Die -Startseite der WKND-Beispiel-Website fördert beispielsweise jede Reise mit einem Kernkomponenten-Teaser. Mit Edge Delivery Services schreiben Autorinnen und Autoren dieselben Elemente direkt als Standardinhalte, entweder in einen Abschnitt oder in eine Blockzelle:

[Image]
## Downhill Skiing Wyoming
A skier's paradise far from crowds and close to nature.
**[View trip](/adventures/downhill-skiing-wyoming)**
_[All adventures](/adventures)_

Im aktuellen AEM-Textbaustein wird ein Link, der nur in seinem Absatz enthalten ist, zu einer Schaltfläche, wenn er formatiert ist: fett für eine primäre Schaltfläche, kursiv für eine sekundäre Schaltfläche und fett plus kursiv für eine Akzent-Schaltfläche. Ein einfacher Link oder ein Link innerhalb eines Satzes bleibt ein Link. Globale Stile geben diesen Schaltflächen dasselbe Erscheinungsbild in Standardinhalten und in Blöcken.

Autoren können Überschriften, Texte, Bilder und Links ohne neue Komponenten hinzufügen, entfernen oder neu anordnen. Ein Teaser- oder Hero-Block ist nur erforderlich, wenn Autoren markieren müssen, welche Elemente zusammengehören. CSS und JavaScript können das Bild auch im Standardinhalt neben dem Text platzieren. Projekte können diese Konventionen ändern. Bitten Sie daher den Agenten, die Skripte und Stile des Projekts zu überprüfen, bevor er sich auf sie verlässt.

Zu einer Blockierung auffordern block-prompts

Sie können mit einer kurzen Eingabeaufforderung beginnen, z. B. „Erstellen eines Blocks für Empfehlungen“. Fügen Sie einen Kontext hinzu, in dem der Agent dabei hilft, etwas Bestimmtes zuzuordnen:

Eine Referenzseite oder ein Screenshot zeigt das Aussehen der Zielgruppe. Es definiert nicht, was Autoren bearbeiten, also sag es auch.

Wiederverwenden vorhandener Blöcke reuse-blocks

Bevor der Agent einen Block erstellt, sucht er nach einem, der wiederverwendet oder angepasst werden kann: im blocks-Ordner Ihres Projekts und in der Blocksammlung und Blockpartei als Referenz-Code. Während der Migration wird auch Ihre Blockbibliothek“ überprüft sofern vorhanden.

Bausteine einzeln erstellen iterate-blocks

Wenn Sie mehrere Blöcke benötigen, fragen Sie nicht nach allen an einer Eingabeaufforderung. Erstellen Sie zunächst einen oder zwei repräsentative Bausteine und überprüfen Sie deren Inhaltsmodell, Stil und Authoring. Fahren Sie dann mit den anderen fort, damit die von Ihnen getroffenen Entscheidungen, wie Namen, Varianten und Leerzeichen, übernommen werden. Generieren und validieren Sie bei einer Migration die Blöcke einer repräsentativen Vorlage vor dem Rest. Siehe Workflow für den Massenimport.

Festlegen des Blockverhaltens vor einer Migration block-instructions

Die Migration generiert Blöcke aus dem Inhalt, der auf den Quellseiten zu finden ist. So steuern Sie, wie ein Block erstellt wird, bevor er vom Agenten generiert wird:

Der Auto-Modus akzeptiert während eines Durchgangs keine Anweisungen. Verfeinern Sie die Blöcke anschließend in der Konsole.

Erstellen eines Bausteins create

Geben Sie die Autorenaufgabe an, z. B. den Inhalt, das gewünschte Verhalten und Design​ den Speicherort des Inhalts ​ eine Testseite.

Beispiel:

Erstellen Sie einen Block für Empfehlungen für unsere dokumentbasierten Seiten. Beginnen Sie mit diesen realen Beispielen für Inhalte: /about und /customers. Überprüfen Sie zunächst die vorhandenen Blöcke. Autoren müssen Zitate, Attributionen und optionale Bilder ohne Layout-Konfiguration bearbeiten. Benutze unsere Token. Langtext- und Nicht-Bild-Beispiele einschließen. Nicht hochladen, pushen oder veröffentlichen.

Ersetzen Sie die Beispielpfade durch Ihre eigenen.

Das Ergebnis ist wiederverwendbarer Code, ein Modell, bei dem Autoren einen Code benötigen, und Beispielinhalte, die Autoren bearbeiten können.

Was der Agent mit einem Block bereitstellt block-deliverables

Vorhandenen Block aktualisieren update

Geben Sie den Blocknamen, aktuelle Beispiele/Varianten, die angeforderte Änderung und die Kompatibilitätsanforderungen an.

Beispiel:

Aktualisieren Sie cards, damit die genehmigte Variante des sekundären Links in /products und /blog funktioniert. Vorhandene Standard- und Bildvarianten und deren erstellten Inhalt beibehalten. Überprüfen Sie die Tastaturinteraktion und den Umbruch für Mobilgeräte. Keine anderen Seiten umschreiben oder Inhalte hochladen.

Ersetzen Sie die Beispielpfade durch Ihre eigenen.

Übergeben Sie das geänderte Verhalten, die betroffenen Varianten, Autorenanweisungen und alle erforderlichen Inhaltsänderungen.

Refaktorieren ohne Änderung des Ergebnisses refactor

Die Refaktorierung verbessert die Implementierung bei gleichzeitiger Beibehaltung des vereinbarten Verhaltens. Dies ist nicht dasselbe wie das Umgruppieren eines Katalogs, das Neugestalten eines Blocks oder das Migrieren seines Inhaltsmodells.

Beispiel:

Refaktorierung der duplizierten Kartendekorationslogik in blocks/cards/cards.js und blocks/teaser/teaser.js. Bewahren Sie die erstellten Modelle, die Ausgabesemantik, das Erscheinungsbild, das Link-Verhalten, den Tastaturzugriff und Analytics-Hooks auf. Verwenden Sie /products und /blog als Regressionsbeispiele. Berichte zu Kompatibilitätsrisiken und Testergebnissen Migrieren Sie keine Inhalte und keine Push-Änderungen.

Ersetzen Sie die Beispielpfade durch Ihre eigenen.

Es gibt keinen separaten Umgestaltungsbefehl: Sie fragen im Chat nach, und der Agent ändert den Code wie ein Entwickler innerhalb der von Ihnen festgelegten Grenzen.

Erstellen eines dynamischen Blocks dynamic-blocks

Ein dynamischer Block lädt oder berechnet seinen Inhalt im Browser, anstatt nur das anzuzeigen, was von den Autoren geschrieben wird. Beispiele sind eine Liste der neuesten Artikel, Suchergebnisse oder eine gefilterte Liste. Bitten Sie den Agenten, nach der Migration einen Block wie jeden anderen Block zu erstellen oder einen migrierten Block zu ändern, um so zu arbeiten. Beschreiben Sie:

Beispiel:

Erstellen Sie einen Block mit einer Liste von Artikeln, der die sechs neuesten Artikel aus dem Abfrageindex der Website mit Bild, Titel und Datum anzeigt. Autoren legen die Anzahl der Artikel und den Ordner fest, die in einer Schlüssel-Wert-Tabelle aufgelistet werden sollen. Eine kurze Nachricht anzeigen, wenn keine Artikel vorhanden sind. Testen Sie es unter /news. Nicht hochladen, pushen oder veröffentlichen.

Der Abfrageindex enthält nur veröffentlichte Seiten und nur die Eigenschaften, die durch seine Konfiguration extrahiert werden. Überprüfen Sie daher beide, bevor Sie testen. Validieren den Status „leer“ und „Fehler“ sowie das normale Ergebnis.

Verbinden von Services und Anwendungen integrations

Der Agent schreibt den Code, der Ihre Site mit anderen Systemen verbindet, einschließlich Systemen, die von den Add-ons nicht abgedeckt werden. Über Edge Delivery Services hinaus arbeiten erklärt, wie eine Integration damit durchgeführt werden kann. In diesem Abschnitt wird beschrieben, wo dieser Code ausgeführt wird.

Auf Edge Delivery Services-Seiten wird dieser Code im Browser des Besuchers ausgeführt, sodass jede Verbindung Teil eines Blocks, eines Widgets oder der Skripte des Projekts ist. Wenn der Agent eine API aufrufen muss, die einen Schlüssel benötigt, während er funktioniert, fügen Sie den Schlüssel in Einstellungen hinzu, nicht im Chat.

Add-ons sind optionale Funktionen die der Agent anbietet, um sie zu aktivieren, wenn eine Aufgabe sie benötigt. Welche Systeme miteinander verbunden sind, wem sie gehören und wer das Ergebnis akzeptiert, sind Projektentscheidungen. Siehe Was bleibt an einem Projekt ​?

Formularübermittlungen form-submissions

Edge Delivery Services stellt ein Formular bereit, speichert jedoch keine Übermittlungen und führt auch nicht das aus, was folgt. Auf der Quell-Site hat ein Server jede Übermittlung verarbeitet, und der Seitenimport kann diesen Server nicht sehen. Das Verbinden eines Ziels ist dieselbe Arbeit an jeder Edge Delivery Services-Site, unabhängig davon, ob sie migriert wurde oder nicht. Da der Agent ein Allzweck-Kodierungs-Agent ist, können Sie jederzeit danach fragen.

Funktionsweise des Forms-Add-ons forms-add-on

Das Forms-Add-on wurde für Unternehmen entwickelt, die Adobe Experience Manager Forms lizenzieren. Dadurch werden Formulare für Edge Delivery Services für Experience Manager Forms vorbereitet. Für jedes Quellformular mit zwei oder mehr Feldern zeichnet es die Felder in einer Formulardefinition auf, einem Blatt, das neben der Seite mit einer Zeile pro Feld gespeichert wird: Name, Beschriftung, Typ, Optionen und Validierung. Anschließend wird ein Formularblock mit einer Verknüpfung zur Definition auf der Seite platziert. Bei den Feldern und Beschriftungen handelt es sich um Inhalte in dieser Definition, nicht um Daten, die in einem Formular-Backend gespeichert sind. Jedes Formular verwendet denselben Block mit dem Namen “form”, und die Definition entscheidet, was angezeigt wird. Der Agent erstellt also keine Varianten des Blocks. Das Add-on speichert jede Definition im Ordner der Seite, der nach dem Quellformular benannt ist, und sucht nicht nach demselben Formular auf anderen Seiten. Um ein Formular beizubehalten, das mehrere Seiten an einem Ort anzeigen, bitten Sie den Agenten, diese Seiten mit einer einzigen Definition zu verknüpfen.

Wenn das Projekt noch keinen Formularblock hat, fügt das Add-on den Formularblock von Experience Manager Forms hinzu. Dieser Block sendet jede Übermittlung an den Forms Submission Service, der das Formular anhand des Pfads seiner Definition identifiziert und die Daten in der Tabelle speichert, die in der Übermittlungszeile der Definition verknüpft ist. Das Add-on verknüpft keine Tabelle und behält nicht die Adresse bei, an die das Quellformular gesendet wurde. Verbinden Sie daher ein Ziel, bevor das Formular live geschaltet wird. Siehe Auswählen eines Ziels. Das Add-on selbst benötigt keine Lizenz, aber der Formularblock und der Forms Submission Service erfordern eine Lizenz für Experience Manager Forms.

Ohne Experience Manager Forms ist der Feldbestand des Add-ons der Teil, der immer noch hilft: Er erfasst die Felder, Kennzeichnungen, Typen, Optionen und Validierungen jedes Formulars. Der Agent hat keine Kenntnisse für andere Formularplattformen. Lesen Sie daher zuerst die Dokumentation Ihrer Plattform, wie in "​ über Edge Delivery Services hinaus“ ​. Anschließend kann er einen Formularblock erstellen, der dieselben Definitionen liest und an Ihre Plattform sendet, oder das Formular einbetten, das auf Ihrer Plattform gehostet wird.

Das Add-on liest jedes Formular aus der HTML, das der Quell-Server sendet, einschließlich Formularen von Drittanbietern, wenn deren Felder in dieser HTML vorhanden sind. Ein Formular, das ein Skript im Browser hinzufügt, z. B. ein Formular, das von einer Marketing-Plattform eingebettet wurde, befindet sich nicht in dieser HTML. Daher importiert das Add-on es nicht. Bitten Sie den Agenten, dieses Formular neu zu erstellen oder es erneut von Ihrer Plattform einzubetten.

Auswählen eines Ziels form-destination

Lead-Formulare gehören dort hin, wo Ihre Teams bereits Leads bearbeiten, in eine Marketing-Automatisierungsplattform oder ein CRM-System (Customer Relationship Management), z. B.:

Wenn Übermittlungen mehrere Systeme erreichen müssen, senden Sie sie an eine Integrationsplattform, z. B. Adobe Workfront Fusion oder Microsoft Power Automate, oder an Ihre eigene API. Bei Experience Manager Forms speichert der Forms-Übermittlungsdienst Übermittlungen in einer Tabelle oder sendet sie per E-Mail und Übermittlungsaktionen, die auf Experience Manager ausgeführt werden, leiten sie an andere Systeme weiter, z. B. Marketo Engage, Workfront Fusion, Power Automate oder einen REST-Endpunkt. Siehe Konfigurieren von Übermittlungsaktionen.

Viele dieser Plattformen akzeptieren eine Übermittlung vom Browser an einen Formular-Endpunkt, der keine geheimen Daten benötigt. Wenn die API der Plattform einen Schlüssel benötigt, senden Sie die Übermittlung über einen Server-seitigen Service, der ihn speichert, wie oben unter beschrieben.

Dem Agenten mitteilen:

Beispiel:

Lesen Sie zunächst die CRM-Dokumentation zu Formularübermittlungen unter https://developer.example.com/forms. Verbinden Sie dann das Formular unter /contact mit dem CRM-Formular-contact-us unter https://forms.example.com/submit/contact-us. Ordnen Sie Vorname, Nachname, E-Mail, Unternehmen und Land den CRM-Feldern FirstName, LastName, Email, Company und Country zu. E-Mail und Unternehmen sind erforderlich. Fügen Sie ausgeblendete Felder für die Lead-Quelle „Website“, die Seiten-URL und die UTM-Parameter des Besuchs hinzu. Diese Einverständnis-Checkbox anzeigen, nicht markiert: „Ich erkläre mich damit einverstanden, Produktnachrichten per E-Mail zu erhalten.“ Zeigen Sie nach erfolgreicher Übermittlung „Vielen Dank, wir werden uns melden“ an. Wenn dies fehlschlägt, behalten Sie die Besuchereinträge bei und zeigen Sie einen Fehler mit einer Wiederholung an. Testen Sie mit der CRM-Sandbox unter https://sandbox.example.com. Nicht hochladen, pushen oder veröffentlichen.

Ersetzen Sie die Beispiel-URLs, Namen und Formulierungen durch Ihre eigenen.

Der Agent aktualisiert die Formulardefinition und den Code des Formularblocks. Es kann auch den Code eines Server-seitigen Service schreiben, den Ihr Team mit den geheimen Daten bereitstellt. Auf der empfangenden Plattform konfiguriert der Administrator:

Senden Sie einen Testeintrag von der Vorschau-Site. Überprüfen Sie, ob es bei jedem Feld einging, den erwarteten Workflow startete und als Test markiert wurde. Wiederholen Sie die Prüfung auf der Produktions-Domain nach dem Wechsel.

Commerce-Seiten commerce-pages

Das Add-on „Commerce-Seiten“ erweitert den Seitenimport-Workflow des Experience Modernization Agents für Adobe Commerce-Storefronts. Sie erkennt Produktdetailseiten und Produktlistenseiten auf der Quell-Site unabhängig von der Plattform, auf der sie ausgeführt wird, aus Signalen wie produktstrukturierten Daten, URL-Mustern und Seitenelementen wie einem Mengenfeld, einem Produktraster oder Filtern. Dabei wird jede Seite als Seite neu erstellt, die nur die SKU des Produkts oder den Pfad der Kategorie in einem Commerce-Block und den zugehörigen Inhalt wie Banner und Werbeaktionen in Standardblöcken enthält. Die Produktdaten werden nicht importiert: Der Commerce-Block lädt sie jedes Mal aus dem Katalog, wenn ein Besucher die Seite öffnet. Der Agent migriert andere Seiten mit dem Standard-Workflow.

Das Add-on schreibt die Commerce-Blöcke nicht. Es verwendet die Produkt- und Listenblöcke, die das Projekt bereits hat, und erwartet ansonsten die product-details- und product-list-page des Textbausteins Commerce-Storefront. Beginnen Sie das Projekt mit diesem Textbaustein und verbinden Sie die Storefront mit Ihrem Katalog, sodass die importierten Seiten Produkte anzeigen, wenn Sie sie überprüfen. Das Add-on selbst benötigt keine Lizenz. Für die Dropdown-Komponenten der Storefront ist jedoch eine Lizenz für Adobe Commerce as a Cloud Service oder Adobe Commerce Optimizer erforderlich. Adobe Commerce Optimizer kann den Katalog auch bereitstellen, wenn eine andere Commerce-Plattform den Warenkorb, den Checkout und die Bestellungen verarbeitet. Siehe Backend-Optionen.

Für eine andere Commerce-Plattform ohne Adobe Commerce Optimizer gilt das Add-on nicht. Der Agent erstellt Produkt- und Listenblöcke, die ihre Daten aus der API der Plattform laden, und arbeitet dabei über die Dokumentation der Plattform, wie in Arbeiten über Edge Delivery Services hinaus beschrieben.

Das Add-on funktioniert mit dokumentbasierten Inhalten. Für Projekte, die das Experience Manager-Authoring verwenden, verwendet der Agent die Standardmigration. Dadurch wird importiert, was jede Produktseite zu diesem Zeitpunkt anzeigt. Entscheiden Sie mit Ihrem Team, wie diese Seiten mit dem Katalog verbunden werden.

Validieren und Bereitstellen validation

Verwenden Sie die deklarierten Link- und Testbefehle des Projekts sowie Browser-Prüfungen für echte Inhalte. Bitten Sie den Agenten, die Befehle und Ergebnisse zu melden, nicht nur, dass er getestet hat.

Überprüfen Sie Folgendes:

Wenn eine Prüfung fehlschlägt, behalten Sie das fehlerhafte Beispiel bei und beheben Sie die kleinste betroffene Ebene. Veraltete Vorschau-/Code-Verzweigungsprobleme von Modell- oder Implementierungsfehlern zu unterscheiden. Führen Sie die fehlgeschlagene Prüfung und die entsprechenden Regressionen erneut aus.

Überprüfen Sie die Vergleichsfunktion, inszenieren Sie nur die vorgesehenen Dateien und durchlaufen Sie die Repository-Richtlinie. Test- oder Produktionsinhalte nur bei entsprechender Autorisierung hochladen; ein Push-Code speichert sie nicht. Nach der Zusammenführung mit main gilt der Block-Code für alle Seiten auf der Live-Site, die den Block verwenden. Siehe So werden Änderungen live geschaltet.

Für die Wiederherstellung stellen Sie den Code über Git zurück und stellen geänderte Remote-Inhalte separat wieder her. Beibehalten kompatibler alter Beispiele, bis eine erforderliche Inhaltsmigration akzeptiert wird.

Verwenden Sie die Projektübergabe, um geänderte Dateien, Modelle, Beispiele, Validierungsergebnisse, verbleibende Risiken und den Wiederherstellungsansatz für die nächste Person oder den nächsten Agenten beizubehalten.