Plusmodule: Neue Galerie Karte (GaKa) - TYPO3

Galerie/Karte (GaKa) - Darstellen und Filtern von strukturierten Daten

Die GaKa ist unser Modul für die ideale Darstellung von strukturierten Daten aus destination.data oder einer anderen Datenbank, sofern die Daten via Schnittstelle angebunden sind. Dabei funktioniert sie mit allen Datensatztypen - egal, ob POIs, Events, Touren u.s.w. Das Besondere: Hier können die Datentypen auch gemischt werden!

Darstellung im Frontend

Um Euch das Modul im Frontend anzusehen, besucht einfach unsere Demo-Seite: GaKa.

Das Modul besteht aus einer Galerie und einer Kartendarstellung – daher die Abkürzung GaKa. Welche Datentypen und Ergebnisse angezeigt werden, lässt sich im Backend individuell konfigurieren.

Pflege im Backend

Wichtig: Es müssen in destination.data bereits Datensätze hinterlegt (und der Experience zugewiesen) oder die strukturierten Daten anderer Plattformen müssen via Schnittstelle angebunden sein.

Im Folgenden wird die Galerie/Karte anhand von Veranstaltungen (Events) erläutert. Die Vorgehensweise ist für andere Datensatztypen nahezu identisch, weshalb diese nicht gesondert erklärt werden.

Voraussetzungen:

1. Bestehende Landingpage, auf der die GaKa innerhalb einer Rahmenbühne platziert werden kann.

2. Einspaltige Rahmenbühne (äußerer Container) hinterlegt, in welcher die GaKa platziert werden kann.

1. Hinzufügen der Bühne

1.1 Klicke auf +Inhalt in der Rahmenbühne

Die GaKa lässt sich nur in einer einspaltigen Bühne platzieren.

1.2. Wähle "Ergebnisliste" unter Plug-Ins aus:

2. Einstellen des Plug-Ins

2.1 Gehe in die Bearbeitung des Plugins:

2.2 Navigiere in den Reiter "Plugin":

2.3. Wir unterscheiden hier nun zwischen zwei Arten der Vorbelegung

1. Filter- und Sortierkonfiguration (Vorbelegung im Frontend veränderbar)
Diese Suchparameter filtern die Abfrage der Ergebnisse, sind aber durch den Websitenutzer veränderbar. Parameter aus verschiedenen Feldern (z. B. eine Kategorie und ein Merkmal) werden mit "UND" verknüpft. Parameter aus gleichen Feldern (z. B. eine Kategorie) werden mit "ODER" verknüpft.

2. Fixe Filter- und Sortierkonfiguration (hidden query - Backend Vorbelegung)

Diese Suchparameter sind durch den Websitenutzer nicht mehr veränderbar und werden bei jeder Abfrage gesetzt. Parameter aus verschiedenen Feldern (z. B. eine Kategorie und ein Merkmal) werden mit "UND" verknüpft. Parameter aus gleichen Feldern (z. B. eine Kategorie) werden mit "ODER" verknüpft.

Die Filter und Konfigurationen unterscheiden sich nur in der Logik der Ausgabe im Frontend. Die zu pflegenden Felder sind bei beiden Vorbelegungsarten gleich.
Ihr solltet euch also vorab überlegen: Soll der User die Vorauswahl im Frontend verändern, sprich auch gänzlich entfernen können oder nicht?

1. Soll die Vorbelegung nur als Anregung dienen und ein User darf dies verändern, wählt ihr die Frontend-Vorbelegung.
   
2. Soll ein User auf der Zielseite die Ergebnisse nur weiter verfeinern, eure Vorauswahl aber nicht herausnehmen können, wählt ihr die Vorbelegung im Backend (hidden query).

Ihr könnt beide Arten auch kombinieren – zum Beispiel, indem ihr in der hidden query Events fest vorgebt. So bleibt der Nutzer immer innerhalb einer Event-GaKa, während alle weiteren Filterungen über das Frontend gesteuert werden können.

Wichtig: Unterschiedliche Filterungen im Backend und Frontend können sich gegenseitig aufheben. In solchen Fällen hat die Backend-Vorbelegung stets Vorrang vor der Frontend-Konfiguration.

Für die Pflege dieses Artikels entscheiden wir uns als nun für die Backend-Vorbelegung.

3. Vorbelegungsmöglichkeiten

3.1 Wahl des Datentypen

Zunächst wählst Du als ersten Filter den Datentypen aus, den Du im Frontend ausgeben möchtest. Bspw. Events.

Wichtig: Nach der Vorbelegung einmal speichern. Denn dann ändern sich die Filter darunter (Kategorie, Merkmale,...) entsprechend des gewählten Datentypen.

Ob korrekt gespeichert wurde seht ihr, wenn euer Filter nach Datentyp in das ausgegraute Feld "Meta-Query" übernommen wurde:

Wenn Du destination.mix+ gebucht hast, kannst Du hier auch mehrere Datensatztypen auf einmal auswählen und so eine gemischte Ausgabe erstellen.

3.2 Auf Kategorien vorbelegen

Mit dieser Filteroption kannst Du die Ergebnisse so vorfiltern, dass im Frontend nur Veranstaltungen einer bestimmten Kategorie ausgegeben werden.

3.3 Bestimmte Kategorien aus der Ausgabe ausschließen

Mit dieser Filteroption kannst du gezielt bestimmte Veranstaltungskategorien im Frontend ausschließen. Wenn du beispielsweise eine Seite mit allen Veranstaltungen hast, aber Weihnachtsmärkte nicht angezeigt werden sollen, kannst du diese einfach ausschließen – anstatt umgekehrt 50 andere Kategorien auszuwählen.

3.4 Auf Merkmale vorbelegen

Mit dieser Filteroption kannst Du die Ergebnisse so vorfiltern, dass im Frontend nur Veranstaltungen mit bestimmten Merkmalen ausgegeben werden.

3.5 Auf Orte vorbelegen

Mit dieser Filteroption kannst Du die Ergebnisse so vorfiltern, dass im Frontend nur Veranstaltungen innerhalb eines bestimmten (oder mehrerer) Orte ausgegeben werden.

3.6 Auf Keywords vorbelegen

Du kannst in destination.data (und weiteren Datenbanken) Keywords hinterlegen und diese hier ebenfalls pflegen, um danach zu filtern.

Dieses Feld ist in destination.data und TYPO3 ein Freitextfeld. Hier ist also die gleiche Schreibweise wichtig, ansonsten wird der Filter nicht funktionieren. 

3.7 Auf Objekte vorbelegen

Mit dieser Filteroption kannst Du die Ergebnisse so vorfiltern, dass im Frontend nur explizit definierte Veranstaltungen ausgegeben werden.

Vorsicht: wenn Du einzelne Veranstaltungen auswählst, werden die darüber getroffenen Konfigurationen für Kategorien, Merkmale, Orte und Keywords überschrieben.

4. Meta-Querys

Meta-Querys sind sog. "Expertenvorbelegungen". Über die oben stehenden Filter (aus 3.) ergeben sich schon einige Filterungsoptionen. Diese spiegelt sich auch immer im grauen Feld der "Meta-Query" wider. Wurde bspw. auf Veranstaltungen und bestimmte Kategorien vorbelegt, sieht dies so aus:

Hier kannst du die Logik nachvollziehen, wie die einzelnen Filter miteinander kombiniert werden:

Innerhalb eines Filters sind sie verODERt. Mehrere Filter in Kombination sind verUNDet.

Wenn man also oben stehenden Filter anschaut: "Art der Veranstaltung" (sind die Kategorien) -> wählt man hier mehrere aus, filtert das System nach Veranstaltungen bspw. der Kategorien "Ausstellung" ODER "Brauchtum/Kultur" -> Man erhält also sowohl Veranstaltungen der Kategorie "Ausstellung" alsauch (ODER)  "Brauchtum/Kultur".

Kombiniert man hierzu einen weiteren Filter bspw. einen Ort, so sucht das System nach Veranstaltungen der Kategorien "Ausstellung" ODER "Brauchtum/Kultur" UND im Ort "Aach". Kombiniert man auch hier wieder mehrere Orte, würde man suchen nach Veranstaltungen der oben genannten Kategorien UND stattfindend in den Orten "Aach" ODER "Aachen". 

Bei der Logik gibt es drei Ausnahmen, die sich innerhalb des Filters anders verhalten: Barrierefreiheit, Ausstattung und Eigenschaften. Hier wird innerhalb dieser Filter verUNDet, da hier der Usecase ein anderer ist. I.d.R. sucht ein User bspw. nach einem Hotel mit Ausstattung "WLAN" UND "All Inclusive". Hier macht eine VerODERung keinen Sinn.

4.1 Eigene Meta-Query verwenden

Neben den Filterungen, die das System vorgibt, können auch eigene Filterungen hinterlegt werden. Diese überschreiben dann alle anderen getroffenen Vorbelegungen.

Da man nicht alle Queries auswendig kennen kann, gibt es eine praktische Möglichkeit, sie zu generieren. Dafür kann man einfach eine GaKa im Frontend aufrufen, z. B. eine GaKa für Events.

Hier wähle ihr nun bestimmte Filter im Frontend aus. Bspw. mehrere Kategorien und nur Highlights, die angezeigt werden sollen.

Diese Filterungen hängen sich nun an die URL an.

Diesen Teil ab nach /all könnt ihr nun kopieren und ins Backend übernehmen:

/layout:card/type:Event/limit:12/category:(Ausstellung%20OR%20Brauchtum__Kultur)/highlight:true/

Daraus ergibt sich im Frontend nun eine GaKa, die auf Events der Kategorien Ausstellung oder Brauchtum/Kultur vorbelegt sind, die Highlights sind. Zusätzlich wird die Cardsansicht ausgegeben. 

5. Sortierungsoptionen

Neben den Vorbelegungen könnt ihr auch verschiedene Sortierungsoptionen der Ergebnisse vorgeben. 

Die Sortierung nach Entfernung greift nur, sofern der User seinen Standort freigibt. 

6. Erscheinungsbild

Konfiguriere nun unter "Erscheinungsbild" Deine Ausgabe so, wie Du sie Dir im Frontend Deiner Website später wünschst:

6.1 Darstellungsansichten der Ergebnisse

Es können drei Darstellungsansichten gewählt werden. Jede dient unterschiedlichen Usecases

Card:

Liste:

Kompakt:

6.2 Darstellung der Karte

Jede der oben gewählten Ergebnisansichten funktioniert mit den Kartenansichten. Hier können unterschiedliche Optionen gewählt werden. 

1. Karte initial ausblenden:
   Ergebnisse werden nur in einer der Ansichten aus 6.1 ohne Karte ausgegeben, der User kann die Karte im Frontend aber aktivieren
   
2. Karte neben den Ergebnissen ausgeben:
   Standardausgabe der Galerie/Karte
   
3. Nur Karte anzeigen:
   Die Ergebnisse werden nur in Form der Karte ausgegeben. Diese können im Frontend auch nicht eingeblendet werden.
   
4. Karte deaktivieren:
   Es werden nur die Ergebnisse (6.1) angezeigt. Die Karte kann hier auch nicht im Frontend aktiviert werden.
   
   

6.3 Filterleiste ausblenden
Durch diese Option kann die Filterleiste über der GaKa gänzlich ausgeblendet werden

6.4 Sortierungsleiste ausblenden
Durch diese Option kann die Sortierungsleiste über der GaKa gänzlich ausgeblendet werden. Die Wechsel der Ergebnisansichten (roter Rahmen) bleiben dabei bestehen. 

6.4 Anzahl der Ergebnisse je Seite

Hier kann die Anzahl der Ergebnisse, die vorgeladen werden sollen bestimmt werden. 

Hier sollte keine zu große Anzahl gewählt werden, da die angegebenen Ergebnisse initial geladen werden. Eine zu hohe Zahl kann die Ladezeit der Seite erheblich beeinflussen. Es empfiehlt sich daher, eine moderate Anzahl einzutragen.

Die weiteren Ergebnisse werden dann jeweils über "Weitere Ergebnisse anzeigen" geladen. Wählt man in der Option bspw. 24, kommen beim Button dann bei jedem Klick 24 Ergebnisse hinzu.

7. Pins und Punkte auf der Karte

7.1 Pins

Die größeren Pins auf der Karte stellen die Ergebnisse dar, die auf der linken Seite der Galerie bereits vorgeladen wurden. Klickt man auf einen Pin, wird dieser farblich hervorgehoben. Hovert man über ein Ergebnis auf der linken Seite, färbt sich der Pin entsprechend ein. Klickt man auf das Ergebnis, wird man zur entsprechenden Detailseite geleitet. Klickt man immer wieder auf "Weitere Ergebnisse anzeigen" wird die Anzahl der Pins natürlich größer.

7.2 Punkte

Die Punkte auf der Karte sind die Ergebnisse, die auch in das Raster der vorbelegten GaKa fallen, aber noch nicht in den vorgeladenen Ergebnissen auf der linken Seite beinhaltet sind. Diese können auch angeklickt werden. Logischerweise gibt es dazu dann noch kein Ergebnis auf der linken Seite, daher öffnet sich hier stattdessen ein Popup, über das der User dann schon auf die Detailseite gelangen kann:

• Related Articles

• Plusmodule: Galerie Karte (GaKa) - TYPO3

  Galerie/Karte (GaKa) - Darstellen und Filtern von strukturierten Daten Die GaKa ist unser Modul für die ideale Darstellung von strukturierten Daten aus destination.data oder einer anderen Datenbank, sofern die Daten via Schnittstelle angebunden sind. ...

• Galerie/Karte, Quicksearch, Kacheln, Slider strukturierte Daten - destination.pages+

  destination.pages+ Plusmodule In diesen Videos zeigen wir Dir , wie Du mithilfe unserer pages+ Module strukturierte Daten auf Deiner Website ausspielen kannst. destination.pages+ Plusmodule Teil 1 - (0:30) Intro - (2:00) Ansicht Frontend - (2:30) ...

• Plusmodule: Quicksearch - TYPO3

  Die Suche für Deine strukturierten Daten Bei der Quicksearch handelt es sich um ein Modul, welches eine individuelle und detaillierte Suche für strukturierte Daten auf einer Landingpage ermöglicht; beispielsweise für Veranstaltungen. Das Modul im ...

• Plusmodule: destination.multisearch - TYPO3

  destination.multisearch - Eine Schnellsuche für mehrere Datensatztypen Das Modul destination.multisearch ermöglicht den Einsatz mehrerer Suchmasken für unterschiedliche Datensatztypen in einem Modul. Es können nur diejenigen Suchmasken hier ...

• Neue Seiten anlegen und Seiteneigenschaften - TYPO3

  Seitentypen Standard-Seite Funktion Der Seitentyp Standard ist der beim Aufbau einer Website mit TYPO3 am häufigsten verwendete Seitentyp. Eine Seite vom Typ Standard kann mit Inhalten befüllt werden, die dann im Frontend angezeigt werden. Erstellen ...