Plusmodule: Neue Galerie Karte (GaKa) - TYPO3

Plusmodule: Neue Galerie Karte (GaKa) - TYPO3

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

Info
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

Alert
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.
Info
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
Info
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).
Info
Ihr könnt beide Arten auch kombinieren – zum Beispiel, indem ihr in der hidden query Kategorien fest vorgebt. So bleibt der Nutzer immer innerhalb einer Kategorie fix, während alle weiteren Filterungen über das Frontend gesteuert/verändert 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.


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

Idea
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.

Info
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.

Alert
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. 

Verschiedene Parameter werden dabei jeweils mit einem Schrägstrich / voneinander getrennt. Der Parametername wird vom Wert mit einem Doppelpunkt getrennt.

Beispiel: /category:Museum/
-> Ein Wert ohne Parametername wird als Suchbegriff interpretiert: /suchbegriff/
-> Bei Werten mit Leerzeichen/Sonderzeichen werden diese url-encoded.

Nachfolgend eine Liste der erlaubten Parameter:
  1. globalIds: komma-separierte Auflistung von global ids einzelner Datensätze; nur diese werden dann angezeigt (überschreibt andere Suchparameter)
  2. type: Datentyp (z. B. Event, POI); es können auch mehrere Datentypen komma-separiert aufgelistet werden
  3. erlaubte Werte für type: Article (blog+), City, Convention (mice+), Event, Gastro, Hotel, Package, Page (TYPO3-Seite), POI, Skiresort, Story (TYPO3-Story), Tour, Webcam
  4. category: eine oder mehrere Kategorien; bei mehreren Kategorien kann verodert oder verundet werden; enthält die Kategorie einen Schrägstrich, muss dieser durch zwei Unterstriche ersetzt werden; Beispiel mit Veroderung und ersetztem Schrgstrich: category:(Angeln__Fischen OR Aktiv)/
  5. -category: auszuschließende Kategorie(n)
  6. feature: für Merkmale, funktioniert wie Kategorien
  7. keyword: kommaseparierte Auflistung von keywords (werden dann verodert)
  8. city: für Orte, funktioniert wie Kategorien
  9. highlight: mit /highlight:true/ werden nur Highlights angezeigt
  10. roundtour: mit /roundtour:true/ werden nur Rundtouren angezeigt
  11. hideRecurring: mit /hideRecurring:true/ werden wiederkehrende Termine von Events ausgeblendet
  12. mode: Spezial-Parameter; hiermit kann ein Zeitraum vorbelegt werden, mögliche Optionen sind:
  13. date(...): genaues Start-/Enddatum, z. B. mode:date,2023-12-17T23:00:00.000Z,2023-12-18T23:00:00.000Z
  14. now: jetzt geöffnet
  15. today: Zeitraum heute
  16. this_weekend: Zeitraum nächstes Wochenende
  17. latitude, longitude: für Angabe der Koordinaten, z. B. /latitude:53.0910895984582/longitude:8.773430947513233/
  18. radius: Entfernung in Bezug auf Koordinaten, in km; Beispiel /radius:50/
  19. NWLatitude, NWLongitude, SELatitude, SELongitude: definieren die "Ecken" des Kartenausschnitt, wenn Option "Ergebnisse beim Bewegen der Karte aktualisieren" aktiviert 
  20. peoplecount: für Filterung anhand der Besucherauslastung (mögliche Werte: low, medium, high)
  21. price: Preisspanne, z. B. /price:[500 TO 1000]/
  22. occupation: Belegung; der erste Wert gibt Anzahl Erwachsene an, weitere Werte sind dann die Alter der Kindern z. B. /occupation:2:5/ (= 2 Erw., 1 Kind, das 5 Jahre alt ist)
  23. difficulty: Schwierigkeit (bei Touren); z. B. /difficulty:3/ (erlaubte Werte 1 = einfach, 2 = mittel, 3 = schwer)
  24. length: Länge von Touren in m (von - bis); z. B.: /length:[12000 TO 58000]/
  25. number_Duration: Dauer von Touren in min (von - bis); z. B. /number_Duration:[90 TO 180]/
  26. bookable: mit /bookable:true/ können buchbare Datensätze gefiltert werden
  27. number_CountMeetingroomMaxPerson: für mice+, max. Personenanzahl, von - bis; z. B.: /number_CountMeetingroomMaxPerson:[10 TO 30]/
  28. number_CountMeetingroom: für mice+, Anzahl Tagungsräume (von - bis); z. B. /number_CountMeetingroom:[12 TO 50]/
  29. number_CountRooms: für mice+, Anzahl Hotelzimmer (von - bis); z. B. /number_CountRooms:[714 TO 2000]/
  30. limit: Anzahl Ergebnisse je Seite (Standard: /limit:12/)
  31. view: steuert Sichtbarkeit der Karte; mögliche Werte: 
  32. /view:map,half/ -> Karte neben Teasern
  33. /view:map,hide/ -> Karte aus
  34. /view:map,full/ -> nur Karte 
  35. layout: Layout der Teaser; mögliche Werte: card, compact oder list
  36. sort: Sortierung vorbelegen; mögliche Werte:
  37. title: alphabetisch
  38. distance: Entfernung (nur wenn Koordinaten vorhanden sind)
  39. random: zufällig
  40. highlights: Highlights zuerst
  41. geoNorthToSouth: von Nord nach Süd
  42. geoSouthToNorth: von Süd nach Nord
  43. chronological: chronologisch (Events, Artikel)
  44. priceAsc, priceDesc: Preis auf-/absteigend (Hotel, POI, Package, Convention)
  45. tourLengthAsc, tourLengthDesc, tourDurationAsc, tourDurationDesc, tourDifficultyAsc, tourDifficultyDesc: Länge / Dauer / Schwierigkeit bei Touren
  46. countMeetingroomMaxPersonAsc, countMeetingroomMaxPersonDesc, countMeetingroomsAsc, countMeetingroomsDesc: max. Personenanzahl bzw. Anzahl Tagungsräume bei mice+

5. Sortierungsoptionen

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

Info
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. 

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


FAQ

s. angehängtes Dokument.