Collections

Eine Collection stellt die Sammlung mehrerer Einträge dar und ermöglicht so Vorlagen für Unterseiten mit immer gleicher Struktur zu erstellen. Beliebte Beispiele sind der  Blog, Stellen- oder Immobilienangebote. Wie du Collections nutzt, zeigen wir dir in diesem Artikel.

ABSCHNITT

Basiswissen

Schau dir das Video an

Collection hinzufügen

Felder

Collection Container

Neue Einträge erstellen

Vorschauansicht

Collection Vorlage

URL-Filter


Basiswissen

Eine Collection wie z. B. ein Blog besteht aus 4 Teilen:

  1. Die Collection, die die Struktur (Felder) aller Einträge vorgibt, z. B. Titel, Name, Datum, etc.
  2. Die Einträge, die den jeweiligen Content enthalten
  3. Der Collection Container, der die Vorschau organisiert
  4. Die Collection Vorlage, die das einheitliche Design der Eintragsseiten regelt

Schau dir das Video an

Wistia video thumbnail

Collection hinzufügen

Zuallererst ist zwischen einer "Collection" und einem "Collection Container" zu unterscheiden:

Was genau eine Collection ist, haben wir ja bereits in der Einleitung dieses Artikels erklärt.

Eine Collection fügst du dem Projekt hinzu, indem du folgende Schritte durchführst:

  1. Bewege deine Maus im Website Builder (CMS) über "Website" in der Menüleiste am oberen Rand
  2. Klicke auf "Collections"

Am rechten Rand öffnet sich nun die Collections-Übersicht, die alle im Projekt bereits angelegten Collections auflistet. Über "Neue Collection" kannst du eine neue Collection anlegen. Trage einen Namen ein und klicke das Disketten-Symbol, um die Collection anlegen zu lassen. Anschließend werden dir in der gleichen Ansicht die Felder der Collection angezeigt. 

Dabei wird eine leere Collection mit Standardwerten für Felder und die Collection-Vorlage erstellt. 

Standardmäßig enthält eine Collection nach der Erstellung keine Einträge. Möchtest du vorher gern ein Beispiel mit Einträgen sehen, um dich mit Collections vertraut zu machen, schau dir unseren Blog-Hilfeartikel an. Für unser Beispiel "Stellenangebote" würdest du hier festlegen, dass ein Collection Eintrag die Felder "Title", ein "Verfügbarkeitsdatum" und einen "Ansprechpartner" hat.


Felder

Felder halten in einem standardisierten Format bestimmte Informationen und Daten zum jeweiligen Eintrag bereit. Diese Felder kannst du entweder im Eintrag selbst oder im Collection Container ähnlich wie Databindings verwenden. Zu jedem Eintrag wird automatisiert aus der "Collection-Vorlage" und den Feldern eine eigene Seite erstellt.

Verfügbare Felder

Standardmäßig werden in Collections zwei Felder angelegt:

  • Der Name ist der Titel des Eintrags
  • Slug ist ein menschen- und suchmaschinenfreundlicher Teil der URL der genutzt wird, um den jeweiligen Post zu identifizieren und wird automatisch aus dem Namen generiert, kann aber auch angepasst werden

Weitere Felder hinzufügen

Du kannst weitere Felder hinzufügen indem du oben rechts in der Einträgeverwaltung auf "Felder" klickst. Am rechten Bildschirmrand wird dir nun das Collections-Menü angezeigt. Hier kannst du alle vorhandenen Collections sehen und zu deren Ansicht wechseln. Im Abschnitt "Blog: Felder" werden dir die Felder der Collection "Stellenangebote" angezeigt, da diese aktuell ausgewählt ist. Würde die Collection "Aktuelle Infos" heißen, so hieße der Abschnitt "Aktuelle Infos: Felder". So kannst du schnell und einfach überprüfen, ob du auch gerade die Felder für die richtige Collection bearbeitest.

In diesem Abschnitt kannst du nicht nur die vorhandenen Felder bearbeiten, sondern auch weitere hinzufügen, indem du auf "Neues Feld" klickst.

Um ein neues Feld zu definieren kannst du aus verschiedenen Feldtypen wählen:

  • Textfeld kann für alle möglichen Arten von Texten verwendet werden
  • CMS bietet dir die Möglichkeit einzelne Sitejet-Elemente, -Presets oder ganze Seiten einzubinden
  • Editor
  • Datei(en)
  • Checkbox
  • Auswahl
  • Datum

Im Eingabefeld "Label" trägst du den Namen des Felds ein. Sobald du dich für einen Typ entschieden hast, wird dir ein weiteres Eingabefeld "Hilfetext" angezeigt. Gib hier eine kurze Beschreibung des Feldes an, damit deine Kollegen, dein Kunde oder auch du, nachdem du längere Zeit keinen Eintrag mehr erstellt hast, weißt, wofür dieses Feld gedacht war.

Für eine Collection "Stellenangebote" wäre es beispielsweise sinnvoll folgende Felder anzulegen:

Name Typ Kommentar
Bild Datei(en) Hiermit kannst du beispielsweise ein Bild im oberen Bereich der Seite einbinden
Beschreibung Textfeld Hier gibst du eine Beschreibung der Stelle an
Ansprechperson Textfeld/Auswahl Trage hier jeweils die Ansprechperson des Stellenangebots an. Sollten hierfür immer wieder die gleichen Personen in Frage kommen würde sich auch ein "Auswahl"-Feld anbieten. Dann ließe sich die jeweilige Ansprechperson aus einer Liste bequem auswählen.
Email-Adresse Textfeld/Auswahl Hier trägst du entsprechend die Email-Adresse der Ansprechperson ein. Was für "Ansprechperson" galt, gilt auch hier: Solltest du dich zuvor bereits für ein "Auswahl"-Feld entschieden haben, bietet es sich hier vermutlich ebenfalls an.

Im Abschnitt "Stellenangebote: Vorlage für Collection-Eintrag findest du einen Button, der dich zur Vorlage für die Einträge der Collection "Stellenangebote" bringt. Auch hier gilt das Prinzip, dass das Wort vor dem Doppelpunkt dem Namen der Collection entspricht.


Collection Container

Ein Collection Container ist das Element, indem eine Vorschau der Collection Einträge angezeigt wird. In den Einstellungen hast du die Möglichkeit, Vorgaben zu Sortier- und Filterfunktionen zu machen. Einem Collection Container kann immer nur eine Collection zugewiesen werden. 

Möchtest du den Inhalt der Collection an mehreren Stellen auf deiner Website anzeigen, kannst du mehrere Collection Container mit der gleichen Collection verknüpfen oder den bereits hinzugefügten Collection Container duplizieren. 

Den Collection Container fügst du folgendermaßen auf deiner Seite ein:

  1. Bewege deine Maus im Website Builder (CMS) über "+ Inhalte hinzufügen" in der Menüleiste am oberen Rand
  2. Klicke auf "Element"
  3. Ziehe das "Collection" Element an die Stelle, an der du die Vorschau-Ansicht deiner Collection-Einträge anzeigen lassen möchtest

Nachdem du einen Collection-Container zur Website hinzugefügt hast, wird standardmäßig die erste Collection ausgewählt. Diese kannst du jederzeit wechseln, sofern du weitere Collections angelegt hast.

Da bisher keine Einträge für diese Collection angelegt wurden, erscheint ein entsprechender Hinweis. Ein Klick auf "Einträge verwalten" bringt dich in die Collection Verwaltung, in der du nun die Einträge anlegen, löschen und bearbeiten kannst.


Neue Einträge erstellen

Um neue Einträge zu erstellen, klicke auf "Einträge verwalten". Du gelangst hierdurch in die Einträgeverwaltung. Klicke auf "Neuer Eintrag" um einen neuen Eintrag anzulegen.

Anschließend siehst du deinen ersten Collection Eintrag. Dieser Eintrag besteht in der Einträgeverwaltung aus einer Übersicht aller zugewiesenen Felder. Diese kannst du nun entsprechend deiner Wünsche mit Inhalt füllen. Klicke auf "Speichern", sobald du mit deinen Änderungen fertig bist. 


Vorschauansicht

Die Vorschauansicht gibt eine Vorschau auf vorhandene Einträge und deren Inhalt. Dabei kannst du festlegen, welche Informationen angezeigt werde sollen und welche erst auf der jeweiligen Eintragsseite angezeigt werden.

Die Vorschauansicht wird wie bereits angesprochen mit einem Collection Container ermöglicht. Wie dieser eingefügt wird, haben wir im Abschnitt " Collection Container" bereits angesprochen.

Für den Collection Container gibt es insgesamt 3 Einstellungsfenster, die jeweils unterschiedliche Aufgaben haben:

  • Die Preset-Einstellungen, wie es sie für jedes Preset gibt
    • Lege fest, wie der Collection Container aussehen soll
  • Die Collection-Einstellungen, die es nur bei Collection-Containern gibt
    • Lege die zu verwendende Collection fest
    • Lege Filter an
    • Gebe vor, wonach sortiert werden soll
    • Gelange über einen Button zur Eintragsvorlage
    • uvm.

  1. Lege die zu verwendende Collection fest
  2. Lege die Sortierreihenfolge sowie das Feld, nach dem sortiert werden soll, fest
  3. Gelange über diesen Button zur Einträgeverwaltung
  4. Gelange über diesen Button zur Vorlage der Collection-Einträge
  5. Füge optional Filter hinzu, die die Auswahl an anzuzeigenden Einträgen begrenzt
  6. Gib in den Preset-Einstellungen vor, wie viele Spalten in der Eintragsvorschau angezeigt werden sollen


Collection Vorlage

Die Collection Vorlage definiert das einheitliche Design aller Eintragsseiten. Du kannst sie von verschiedenen Orten aus aufrufen.

  • Aus den Collection Container Einstellungen heraus per Klick auf "Vorlage für Collection-Eintrag öffnen"
  • Aus der Einträgeverwaltung per Klick auf den Link-Button neben dem "Name"-Feld im Collections-Menü

Hast du die Collection Vorlage aufgerufen, kannst du sie wie jede andere Sitejet-Seite editieren. Zusätzlich stehen dir nun alle Collection-Felder zur Verfügung. 

Für das Beispiel "Stellenangebote" fügen wir auf der Vorlage ein Überschriftenelement ein. Das Überschriftenelement soll das Feld "Titel" enthalten. Öffne die Elementeinstellungen der gerade hinzugefügten Überschrift. Dort findest du den Abschnitt "Collection". Hier kannst du unter "Inhalte zuordnen von *Collection-Name*" aus der Auswahlliste das jeweilige Feld auswählen - in unserem Fall "Titel". Möchtest du lieber statischen, also für alle Seiten gleichbleibenden Inhalt bereitstellen, so lässt du die Auswahl hier auf "Keine Zuordnung, Inhalt bleibt statisch" und trägst den gewünschten Text in das Textelement ein.


URL-Filter

Auf Seiten mit einem "Collection Container" können "URL Filter" benutzt werden, um beispielsweise aufgrund eines Link-/Button-Klicks die angezeigten Einträge im Collection Container zu Filtern. So können per Klick auf einen Button beispielsweise alle Einträge über Häuser angezeigt werden. Auch die Sortierreihenfolge kann angepasst werden. Dadurch gibst du dem Website-Besucher die Möglichkeit, nur Einträge anzeigen zu lassen, für die er sich besonders interessiert.

Damit du URL-Filter nutzen kannst, müssen diese über den Haken "URL-Filter berücksichtigen" im Collection Container aktiviert werden:

Befindet sich das Element mit dem Link innerhalb eines Collection Containers, kann dieser URL Filter sogar automatisch von Sitejet gesetzt werden. Wechsle dazu einfach in den "Verlinken" Tab und wähle als Linktyp "Collection Filter" aus:

In diesem Abschnitt geht es allerdings um die Verwendung von individuell zusammengestellten URL Filtern. Wie all das funktioniert, wird im Folgenden erklärt:

Nach Feldern filtern

Generell kann nach Auswahl-, Checkbox-, Datums- und Textfeldern gefiltert werden. Um nach einem (oder mehreren) Feldern zu filtern, ist immer die gleiche URL-Struktur notwendig:

*COLLECTION-CONTAINER-SEITE*#!filter[columns.*FELDKENNUNG*]=*VERGLEICHSOPERATOR*:*WERT*

Dabei sind *COLLECTION-CONTAINER-SEITE*, *FELDKENNUNG*, *VERGLEICHSOPERATOR* und *WERT* je nach gewünschtem Filter mit folgenden Werten zu ersetzen:

  • *COLLECTION-CONTAINER-SEITE*: Hier wird der "Slug" oder "Pfad" zur Seite, auf der sich der Collection-Container befindet, angegeben: 
    • befindet sich der Collection Container auf derselben Seite, kann dieser Teil auch einfach weggelassen werden
    • sollte sich der Collection Container beispielsweise auf der "Blog"-Seite befinden und der "Slug" zur Blog-Seite "/blog" lauten, ersetzt du *COLLECTION-CONTAINER-SEITE* einfach durch "/blog"
  • *FELDKENNUNG*: Die Feldkennung entspricht in der Regel dem Feldnamen in der Collection selbst. Dabei gilt es jedoch folgende Punkt zu beachten:
    • Alle Leer- und Sonderzeichen sind durch "_" zu ersetzen 
    • Umlaute wie ä,ö und ü werden durch ae, oe bzw. ue ersetz
    • Über die Blog-Erweiterung werden Felder mit fest vorgegebenen Kennungen erstellt, die nicht zwangsläufig dem Feldnamen entsprechen
    • Um ganz sicher zu gehen, kannst du in der Felder-Übersicht die "Kennung" überprüfen: 
  • *VERGLEICHSOPERATOR*: Als Vergleichsoperator können folgende Optionen verwendet werden, wenn der Wert des Feldes nicht genau dem *WERT* entsprechen soll. 
    • lt: lower than kleiner als
    • lte: lower than / equal kleiner als oder gleich
    • gt: greater than größer als
    • gte: greater than / equal größer als oder gleich
    • notEqual: ungleich
  • *WERT*: Je nach Feld-Typ ist es erforderlich, dass der Wert, nach dem gefiltert werden soll, in einem bestimmten Format vorgegeben wird.
    • Auswahlfelder: Der Wert muss inkl. Groß- und Kleinschreibung URL-codiert, das heißt, dass Zeichen (z. B. das Leerzeichen) durch eine bestimmte Zeichenfolge (%20) ersetzt werden müssen.
    • Checkbox: Der Wert ist entweder "1" für "ausgewählt" oder "0" für "nicht ausgewählt (jeweils ohne Anführungszeichen)
    • Datum: Das Datum muss im Format "JJJJ-MM-TT" ohne Anführungszeichen angegeben werden wobei "JJJJ" für das Jahr, "MM" für den Monat und "TT" für den Tag (jeweils mit führender "0" bei Zahlen unter "10"). Zusätzlich zu einem exakten Datum kann auch "now" (="jetzt") eingesetzt werden. In Kombination mit dem Vergleichsoperator "lte" kann so nach allen Einträgen gefiltert werden, die ein Datumswert von heute oder in der Vergangenheit haben.
    • Textfelder: Bei Texten kann nur nach exakten Texten gefiltert werden

Beispiel:

Folgende Beispielrahmenbedingungen seien gegeben: 

  • Es sollen nur Einträge angezeigt werden, die ein Datumsfeld mit dem Namen "veröffentlicht am" haben und in dem ein Datum nach dem 23.03.2020 eingetragen wurde 
  • Der Collection Container befindet sich auf der Seite mit dem Slug "/blog"
  • Die Einträge sollen nach Klick auf einen Button angezeigt werden

Tipp: Die Standard-Kennung für das Veröffentlichungsdatum bei einer über die Blog-Erweiterung erstellten Collection lautet "publishing_date".

Folgender Link ist dem Button zuzuweisen:

/blog#!filter[columns.veroeffentlicht_am]=gt:2020-03-23

Mehrere Filter werden mit Hilfe eines "&"-Zeichens aneinandergehängt. So könnte beispielsweise zusätzlich noch nach dem Autor gefiltert werden. Dann sähe die Filter-URL wie folgt aus:

/blog#!filter[columns.veroeffentlicht_am]=gt:2020-03-23&filter[columns.autor]=Max%20Mustermann

Reihenfolge anpassen

Auch die Reihenfolge der anzuzeigenden Collection Einträge kann angepasst werden. Dabei wird ein weiterer Parameter an die URL angehangen. Das allgemeine Format zum Ändern der Reihenfolge sieht wie folgt aus:

order=columns.*FELDKENNUNG*_*REIHENFOLGE*

Dabei werden *FELDKENNUNG* und *REIHENFOLGE* folgendermaßen ersetzt:

  • *FELDKENNUNG*: Wie schon in Abschnitt "Nach Feldern filtern" angesprochen, wird über die Feldkennung das jeweilige Feld eindeutig angegeben
  • *REIHENFOLGE*: Hier gibst du an, in welcher Reihenfolge die Collection Einträge anhand des über "Feldkennung" angegebenen Feldes sortiert werden sollen:
    • aufsteigend mithilfe von "ASC" oder 
    • absteigend mithilfe von "DESC"

Sollen nun alle Einträge des oben beschriebenen Blogs absteigend nach dem Veröffentlichungsdatums sortiert werden, könnte der einsprechende URL-Teil für die Reihenfolge wie folgt aussehen:

/blog#!order=columns.veroeffentlicht_am_DESC

Möchtest du nun beide Filter aus dem Abschnitt "Nach Feldern filtern" und die Reihenfolge aus diesem Abschnitt kombinieren, sieht die URL wie folgt aus:

/blog#!filter[columns.veroeffentlicht_am]=gt:2020-03-23&filter[columns.autor]=Max%20Mustermann&order=columns.veroeffentlicht_am_DESC

Anzahl limitieren

Zusätzlich zum Filtern und Sortieren kannst du auch die Anzahl der anzuzeigenden Einträge beschränken. Dies machst du mit dem Schlagwort "limit". Willst du nun beispielsweise nur 3 Einträge anzeigen lassen, würde die URL wie folgt lauten:

/blog#!limit=3

Außerdem kannst du festlegen, dass nicht die ersten Einträge angezeigt werden sollen, sondern Einträge an einer bestimmten Stelle. Verwende dazu das Schlagwort "Offset". "Offset" verschiebt die Auswahl an anzuzeigenden Einträgen. Möchtest du also z. B. den 4., 5. und 6. Eintrag anzeigen, verwende folgende URL:

/blog#!limit=3&offset=3

Zurück zum Anfang

Hat dir der Hilfeartikel geholfen? Vielen Dank für dein Feedback! Bei der Übertragung ist ein Fehler aufgetreten. Bitte versuche es später erneut.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen