Navigation innerhalb von Landingpage-Teasern (Teil 3)

Nach unseren Artikeln zur Einführung in das Landingpage-Management und wie CMS-Objekte in Teaser eingefügt werden können, stellen wir mit diesem Blogeintrag Möglichkeiten für die Navigation innerhalb eines Teasers und somit ein weiteres Feature der inwebco Page Builder Erweiterung für eZ Platform vor.

Sobald ein Redakteur mehrere CMS-Objekte einem Page Builder Teaser hinzugefügt hat, deren Anzahl die limitierte Darstellung nebeneinander überschreitet, kann er zukünftig zwischen zwei Optionen zur Navigation wählen: Infinite Scrolling oder Pagination.

1. Infinite Scrolling (unendliches Scrollen)

Ausgangspunkt der weiteren Demonstration ist wieder das Page Builder-Interface mit dem bereits mit mehreren CMS-Objekten gepflegte Teaser „Column Content Image 2“.

Infinite Scrolling ist die Standard-Einstellung, sobald ein Teaser mehrere CMS-Objekten enthält. Vorraussetzung für Infinite Scrolling und somit für das Laden weiterer Objekte im Teaser ist, dass das Feld "Row Count" (Reihenanzahl) unter "Einstellungen", wie in der folgenden Ansicht zu sehen, leer ist. Natürlich ist es ebenfalls erforderlich, dass genügend Objekte dem Teaser hinzugefügt wurden. Der Wert ab wie vielen Objekten das Infinite Scrolling aktiv wird, lässt sich über die Konfiguration des Systems bestimmen.

Frontend Ergebnis

Alle zuvor ausgewählten CMS-Objekte werden uneingeschränkt über mehrere Reihen innerhalb des angelegten Teasers angezeigt. Die Navigation erfolgt durch Scrollen, wobei die folgenden Inhalte immer wieder nachgeladen werden, bis das letzte Objekt und somit eine komplette Übersicht aller Inhalte erreicht ist.

2. Pagination

Um den Teaser bzw. die darin angezeigten CMS-Objekte in der Höhe zu beschränken und somit ein (endloses) Scrollen zu vermeiden, kann eine Pagination eingestellt werden. Dazu setzt der Redakteur unter dem Reiter "Einstellungen" im Feld "Row Count" den Wert, auf den die Reihenanzahl beschränkt werden soll. Der Wert kann entweder am rechten Rand des Feldes über die Pfeiltasten oder per direkte Eingabe gesetzt werden. 

Frontend Ergebnis

Zu sehen ist, dass die Anzahl der Reihen, in der die CMS-Objekte angeordnet werden, auf den zuvor gesetzten Wert von drei limitiert wurden. Unterhalb wurde automatisch eine Seitennummerierung generiert, die zum einen angibt, in wie viele Abschnitte alle Elemente aufgeteilt wurden und zum anderen die gezielte Navigation per Klick darauf oder vor und zurück über die nebenstehenden Pfeiltasten ermöglicht.

Durch diese flexible Auswahl der Navigation kann der Redakteur je nach Anwendungszweck in kürzester Zeit beispielsweise eine Übersichtsseite mit diversen CMS-Inhalten erstellen, durch die der Besucher scrollen kann oder bei einer Seite mit weiteren bzw. umfangreicheren Teasern und Inhalten die Navigation auf horizontaler Ebene durch Pagination beschränken und somit übersichtlich halten. Mehrere Teaser mit Pagination pro Landingpage werden ebenfalls unterstützt.

Auch diese Erweiterung zeigt einen weiteren Meilenstein in der fortgeschrittenen Page Builder-Entwicklung von inwebco, um Content dynamisch nutzen, strukturieren und darstellen zu können. Den Fokus behalten wir bei und werden Neuerungen in den folgenden Artikeln unseres Blogs vorstellen.