Collections 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:

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

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

Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.