„Eine Karte wie bei Airbnb"
– so beschrieb unser Kunde, die Holzbaukompetenz Sachsen GmbH, seine Vision für ein neues Feature auf ihrer Website.
Die Aufgabe bestand darin, eine Kartenfunktion zu entwickeln, die es den Nutzern ermöglicht, Holzbauprojekte aus ganz Sachsen leicht und übersichtlich dargestellt zu bekommen. Hierbei sollte zwischen einer Karten- und Listenansicht gewechselt werden können, und die Ergebnisse sollten umfassend filterbar sein. Die Karte sollte zudem nahtlos in das Design der Website integriert werden und anpassbare Marker verwenden. Zusätzlich war es wichtig, das Erfassen neuer Holzbauprojekte über ein Formular abzubilden.
Bei der Wahl eines geeigneten Plugins für die Kartendarstellung war uns wichtig, eine Lösung zu finden, die sowohl leistungsstark als auch flexibel ist. Unsere Wahl fiel auf Jetengine von Crocoblock, ein Multitalent, wenn es um die dynamische Darstellung von Custom Post Types geht. Neben der Map-Funktionalität bietet Jetengine durch seine Erweiterung Jet Smartfilters auch eine umfassende und individualisierbare Filterfunktion.
Schritte zur Integration:
Von der Aktivierung bis zur Anpassung
Im Folgenden beschreiben wir die Schritte, die wir unternommen haben, um die Map-Funktion von Jetengine erfolgreich in die Website der Holzbaukompetenz Sachsen GmbH zu integrieren.
Aktivierung und Einstellung der Map-Funktion
Als erstes müssen wir über die Jetengine Settings die Map Listings aktivieren. Über den Reiter Map Settings können nun die Basics für die Karte eingestellt werden. So kann man unter anderem den Map Provider und den Geocoding Provider auswählen und gegebenfalls einen API-Key hinterlegen.
Konfiguration des Custom Post Types
Über das Jetengine-Dashboard legen wir einen neuen Custom Post Type an und definieren die erforderlichen Felder wie Projektname, Standort, Beschreibung usw.
Erstellung der Templates
Nun definieren wir wie der neue Custom Post Type aussehen soll. Wir erstellen sowohl ein Single Post Template für die Detailseite, als auch ein Jetengine Listing-Template für die Kurzdarstellung in der Karte und der Liste.
Einbindung der Karte
Auf der Seite fügen wir das "Map-Listing" von Jetengine ein. Dort wählen wir unser vorher definiertes Template aus und geben das Adressfeld an. Um die Adresse aus mehreren Meta-Feldern zu erhalten, kombinieren Sie die Namen dieser Felder mit einem "+"-Zeichen.
Anpassung der Karte
Über das Widget können wir das Verhalten der Karte und einen Custom Map Style hinterlegen. Im Reiter "Marker" können wir spezifische Marker für unterschiedliche Taxonomien definieren.
Listenansicht erstellen
Ähnlich wie das Map-Widget funktioniert auch die Listenansicht. Über das Widget "Listing Grid". Wir wählen unser Listing-Template aus und stylen die Liste nach unseren Vorgaben.
Im nächsten Teil sehen wir uns die Filterfunktion an, über welche die Website-Besucher die Holzbauprojekte auf der Karte filtern können.
