Verwenden von Experience Fragments using-experience-fragments

Auf dieser Seite werden die folgenden Themen behandelt:

  • Überblick
  • Verwenden von Experience Fragments in AEM Screens
  • Übertragen von Änderungen auf die Seite

Überblick overview

Ein Experience Fragment ist eine Gruppe aus einer oder mehreren Komponenten (einschließlich Inhalt und Layout), die innerhalb von Seiten referenziert werden können. Experience Fragments können beliebige Komponenten enthalten, beispielsweise eine oder mehrere Komponenten mit beliebigen Elementen innerhalb eines Absatzsystems, das für das Gesamterlebnis referenziert oder von einem dritten Endpunkt angefordert wird.

Verwenden von Experience Fragments in AEM Screens using-experience-fragments-in-aem-screens

NOTE
Im folgenden Beispiel wird We.Retail als Demoprojekt verwendet, bei dem das Experience Fragment von einer Sites-Seite in ein AEM Screens-Projekt übernommen wird.

Der folgende Workflow veranschaulicht beispielsweise die Verwendung von Experience Fragments aus Web.Retail in Sites. Sie können eine Web-Seite auswählen und diese Inhalte in Ihrem AEM Screens-Kanal in einem Ihrer Projekte nutzen.

Voraussetzungen pre-requisites

Erstellen eines Demoprojekts mit einem Kanal

Erstellen eines Projekts

  1. Klicken Sie auf Screens-Projekt erstellen, um ein neues Projekt zu erstellen.
  2. Geben Sie DemoProject als Titel ein.
  3. Klicken Sie auf Speichern.

AEM Screens wird ein DemoProject hinzugefügt.

Erstellen eines Kanals

  1. Navigieren Sie zum erstellten DemoProject und wählen Sie den Ordner Kanal aus.

  2. Klicken Sie in der Aktionsleiste auf Erstellen, um den Assistenten zu öffnen.

  3. Wählen Sie im Assistenten die Vorlage Sequenzkanal aus und klicken Sie auf Weiter.

  4. Geben Sie TestChannel  als Titel ein und klicken Sie auf Erstellen.

Ein TestChannel wird Ihrem DemoProject hinzugefügt.
screen_shot_2019-07-29at105101am

Erstellen eines Experience Fragment creating-an-experience-fragment

Gehen Sie wie folgt vor, um den Inhalt von We.Retail in Ihrem TestChannel in DemoProject zu nutzen.

  1. Navigieren zu einer Sites-Seite in We.Retail

    1. Navigieren Sie zu „Sites“ und wählen Sie We.Retail > USA > Englisch > Ausrüstung aus. Wählen Sie diese Seite aus, um sie als Experience Fragment für Ihren Screens-Kanal zu verwenden.

    2. Klicken Sie in der Aktionsleiste auf Bearbeiten, um die Seite zu öffnen, die Sie als Experience Fragment für Ihren Screens-Kanal verwenden möchten.

  2. Wiederverwenden des Inhalts

    1. Wählen Sie das Fragment aus, das Sie in den Kanal aufnehmen möchten.
    2. Klicken Sie auf das letzte Symbol rechts, um das Dialogfeld In Experience Fragment konvertieren zu öffnen.

    screen_shot_2019-07-29at105314am

  3. Erstellen eines Experience Fragments

    1. Wählen Sie unter Aktion die Option Neues Experience Fragment erstellen aus.

    2. Wählen Sie den übergeordneten Pfad aus.

    3. Wählen Sie die Vorlage aus. Wählen Sie hier die Vorlage Experience Fragment - Screens-Variante aus (Wert im Feld /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens).

    4. Geben Sie unter Fragmenttitel den Wert ScreensFragment ein.

    5. Klicken Sie auf das Häkchen, um die Erstellung eines neuen Experience Fragments abzuschließen.

    screen_shot_2019-07-29at105918am

    Hinweis: Um eine Option einfacher auszuwählen, klicken Sie auf das Häkchen rechts neben den Feldern, um das Auswahldialogfeld zu öffnen.

  4. Erstellen einer Live Copy des Experience Fragments

    1. Navigieren Sie zur AEM-Homepage.
    2. Wählen Sie Experience Fragments aus, markieren Sie ScreensFragment und klicken Sie auf Variante als Live Copy, wie in der folgenden Abbildung dargestellt:

    screen_shot_2019-07-29at110443am

    c. Wählen Sie die Option ScreensFragment im Assistenten Live Copy erstellen aus und klicken Sie auf Weiter.

    d. Geben Sie unter Titel und unter Namen den Wert Screens ein.

    e. Klicken Sie auf Erstellen, um die Live Copy zu erstellen.

    f. Klicken Sie auf Fertig, um zur Seite ScreensFragment zurückzukehren.

    screen_shot_2019-07-29at110616am

    note note
    NOTE
    Nachdem Sie das Screens-Fragment erstellt haben, können Sie die Eigenschaften des Fragments bearbeiten. Wählen Sie das Fragment aus und klicken Sie in der Aktionsleiste auf Eigenschaften.

    Bearbeiten von Eigenschaften eines Screens-Fragments

    1. Navigieren Sie zum ScreensFragment (das Sie in den vorherigen Schritten erstellt haben) und klicken Sie in der Aktionsleiste auf Eigenschaften.

    2. Wählen Sie die Registerkarte Offline-Konfiguration aus, wie in der Abbildung unten dargestellt.

    Sie können Ihrem Experience Fragment die Client-seitigen Bibliotheken (Java und CSS) und statischen Dateien hinzufügen.

    Das folgende Beispiel zeigt das Hinzufügen Client-seitiger Bibliotheken und Schriften als Teil statischer Dateien zu Ihrem Experience Fragment. fragment

  5. Verwenden des Experience Fragments als Komponente im Screens-Kanal

    1. Navigieren Sie zum Screens-Kanal, in dem Sie das Screens-Fragment verwenden möchten.

    2. Wählen Sie den TestChannel aus und klicken Sie in der Aktionsleiste auf Bearbeiten.

    3. Klicken Sie in der Seitenleiste auf das Komponentensymbol.

    4. Ziehen Sie das Experience Fragment in Ihren Kanal.

    screen_shot_2019-07-29at123115pm

    e. Wählen Sie die Komponente Experience Fragment aus und klicken Sie auf das Symbol oben links (Schraubenschlüssel), um das Dialogfeld Experience Fragment zu öffnen.

    f. Wählen Sie im Feld Pfad.die Live Copy Screens des Fragments aus, die Sie in Schritt 3 erstellt haben.

    screen_shot_2019-07-26at82650pm

    f. Wählen Sie im Feld Experience Fragment die Live Copy Screens des Fragments aus, die Sie in Schritt 3 erstellt haben.

    screen_shot_2019-07-26at82509pm

    h. Geben Sie die Millisekunden in Dauer ein.

    i. Wählen Sie im Dialogfeld Experience Fragments die Offline-Konfiguration aus, um die Client-seitigen Bibliotheken und statischen Dateien zu definieren.

    note note
    NOTE
    Wenn Sie zusätzlich zu dem, was Sie in Schritt 4 konfiguriert haben, Client-seitige Bibliotheken oder statische Dateien hinzufügen möchten, können Sie diese im Dialogfeld Experience Fragment auf der Registerkarte Offline-Konfiguration hinzufügen.

    screen_shot_2019-07-26at82844pm

    j. Klicken Sie auf das Häkchen, um den Vorgang abzuschließen.

Validieren des Ergebnisses validating-the-result

Nach Abschluss der vorherigen Schritte können Sie Ihr Experience Fragment in ChannelOne wie folgt validieren:

  1. Navigieren Sie zum TestChannel.
  2. Wählen Sie in der Aktionsleiste die Vorschau aus.

Sie sehen den Inhalt der Sites-Seite (Live Copy des Experience Fragments) in Ihrem Kanal, wie in der folgenden Abbildung dargestellt:
screen_shot_2018-06-08at120739pm

Übertragen von Änderungen auf die Seite propagating-changes-from-the-master-page

Live Copy bezieht sich auf die Kopie (der Quelle), die durch Synchronisierungsaktionen aufrechterhalten wird, wie in den Rollout-Konfigurationen definiert.

Da es sich bei dem von uns erstellten Experience Fragment um eine Live Copy der Sites-Seiten handelt, werden die Änderungen in Ihrem Kanal oder dem Ziel, in dem Sie das Experience Fragment verwendet haben, angezeigt, wenn Sie auf der primären Seite Änderungen an diesem bestimmten Fragment vornehmen.

NOTE
Weitere Informationen zum Thema Live Copy finden Sie unter „Wiederverwenden von Inhalten: Multi Site Manager und Live Copy“.

Gehen Sie wie folgt vor, um Änderungen vom primären Kanal auf den Zielkanal zu übertragen:

  1. Wählen Sie auf der Sites-Seite (primäre Seite) das Experience Fragment aus und klicken Sie auf das Stiftsymbol, um die im Experience Fragment enthaltenen Elemente zu bearbeiten.

    screen_shot_2018-06-08at122655pm

  2. Wählen Sie das Experience Fragment aus und klicken Sie auf das Schraubenschlüsselsymbol, um das Dialogfeld zum Bearbeiten der Bilder zu öffnen.

    screen_shot_2018-06-08at25031pm

  3. Das Dialogfeld Produktraster wird geöffnet.

    screen_shot_2018-06-08at25306pm

  4. Sie können alle Bilder bearbeiten. Hier wird beispielsweise das erste Bild in diesem Fragment ersetzt.

    screen_shot_2018-06-08at25608pm

  5. Wählen Sie das Experience Fragment aus und klicken Sie auf das Rollout-Symbol, um Änderungen an dem Fragment zu übertragen, das in Ihrem Kanal verwendet wird.

    screen_shot_2018-06-08at31352pm

  6. Klicken Sie auf „Rollout“, um die Änderungen zu bestätigen.

    Sie werden sehen, dass die Änderungen übertragen werden.

    screen_shot_2018-06-08at32148pm

Validieren der Änderungen validating-the-changes

Gehen Sie wie folgt vor, um die Änderungen in Ihrem Kanal zu bestätigen:

  1. Navigieren Sie zu Screens > Kanäle > TestChannel.

  2. Klicken Sie in der Aktionsleiste auf Vorschau, um die Änderungen zu bestätigen.

Die folgende Abbildung zeigt die Änderungen in Ihrem TestChannel:
screen_shot_2018-06-08at33351pm

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053