Teaser mit CMS-Objekten in Landingpages anreichern (Teil 2)

Der erste Artikel unserer Reihe von Blogeinträgen zur inwebco Page Builder Erweiterung für eZ Platform hat die Basisfunktionaliäten des Page Builder vorgestellt. Zeit sich der ersten Erweiterung zu widmen.

1. Verwendung von CMS-Objekten im Page Builder

Der wertvolle Kern einer jeden Webpräsenz sind die im CMS als Objekte gespeicherten Inhalte. Es liegt nahe, dass diese Inhalte ebenfalls in Page Builder-Teasern dargestellt oder verlinkt werden sollen.

Um dies zu ermöglichen, haben wir das Page Builder-Interface um einen Reiter "Inhalte" erweitert. Während unter "Einstellungen" wie beim Page Builder gewohnt die individuellen Teaser-Inhalte wie Headlines oder Anlesertexte gepflegt werden können (wie im 1. Blog-Artikel gezeigt), ermöglicht der Reiter "Inhalte" das Anreichern eines Teasers um CMS-Objekte, die anschließend im Teaser dargestellt werden.

Für diese Demonstration verwenden wir einen Teaser mit dem Namen "Column Content Image 2" aus dem Pool unserer vordefinierten Teaser. Der Teaser ist dafür ausgelegt eine Headline (optional), einen Anlesertext (optional) sowie mehrere angeteaserte CMS-Objekte darzustellen.

Um einem Teaser CMS-Objekte hinzuzufügen, ist es nötig nach dem Aufruf der Teaser-Einstellungen auf den Reiter "Inhalte" zu wechseln. Durch einen weiteren Klick auf "Add content" wird die Durchsuchen-Maske von eZ Platform geöffnet. Diese erlaubt die Navigation durch die CMS-Struktur und das Auswählen der gewünschten CMS-Objekte. Wurde ein CMS-Objekt aufgerufen, kann dieses über den Button "Choose this content" der Auswahl hinzugefügt werden. Es ist wichtig zu verstehen, dass unsere Erweiterung für eine Mehrfachauswahl an CMS-Objekten ausgelegt ist, um ebenfalls Teaser zu unterstützen, welche mehrere CMS-Objekte darstellen können, wie Slider oder Karussells. Über einen Klick auf "Confirm selection" werden die ausgewählten CMS-Objekte dem Teaser hinzugefügt.

Frontend Ergebnis

In unserem Demonstrationsvideo wurden dem Teaser mehrere CMS-Objekte hinzugefügt. Wie zu sehen werden diese CMS-Objekte jeweils mit Headline, Subheadline und Bild im Teaser dargestellt.

2. Hinzufügen von CMS-Unterobjekten aus Containern

Beim Hinzufügen von CMS-Objekten zu einem Page Builder-Teaser gehen wir noch einen Schritt weiter. Oftmals möchte ein Redakteur nicht gezielt bestimmte Inhalte dem Teaser hinzufügen, wie im oberen Beispiel gezeigt, sondern alle Unterobjekte eines bestimmten Ortes anteasern. Um dies zu ermöglichen genügt es die hinzugefügten CMS-Objekte mit einem Klick auf das Pfeil-Icon aufzuklappen und eine Einstellung vorzunehmen.

Die darauf folgende Ansicht bietet 3 Einstellung zur Auswahl:

1. Dieses Objekt: Es wird das ausgewählte Objekt im Teaser angezeigt. Es handelt sich um die voreingestellte Auswahl.
2. Direkte Unterobjekte (List): Es werden alle direkten Unterobjekte im Teaser angezeigt. Sollten diese weitere Unterobjekte enthalten, werden diese nicht dem Teaser hinzugefügt. Lediglich die 1. Ebene.
3. Alle Unterobjekte (Tree): Es werden alle Unterobjekte im Teaser angezeigt. Somit ebenfalls die Unterobjekte der Unterobjekte (Alle Ebenen).

Wichtig: Die Auswahl von Option 2 oder 3 ermöglicht die automatische Darstellung neuer CMS-Objekte, wenn diese unter einem zuvor ausgewählten Ort angelegt werden. So lassen sich dynamische Teaser und ganze Landingpages in einem System erstellen, die mit Anlegen von neuen Objekten automatisch wachsen.

Für die Demonastration wählen wir "Direkte Unterobjekte".

Frontend Ergebnis

Zu sehen ist, dass nicht das ausgewählte CMS-Objekt dargestellt wird, sondern die vorhandenen Unterobjekte, die unterhalb des ausgewählten Objektes angelegt wurden.

Über diesen einfachen Weg ermöglichen wir das Hinzufügen der CMS-Objekte in Teaser / Landingpages mit dem Page Builder.

Viele unserer Page Builder-Erweiterungen, die wir in den weiteren Artikeln in unserem Blog vorstellen werden, bauen auf dieser Verbesserung auf und schaffen völlig neue Möglichkeiten Landingpages mit dem gewünschten Grad an Dynamik zu erstellen.