Wie wir mit Jetengine eine interaktive Holzbaukarte schufen

Entdecken Sie, wie wir die Vision unseres Kunden von einer interaktiven Kartenfunktion à la Airbnb in die Realität umgesetzt haben! Erfahren Sie, wie wir mithilfe des vielseitigen Jetengine-Plugins eine benutzerfreundliche Karten- und Listenansicht für Holzbauprojekte in ganz Sachsen entwickelt haben.

Sarah

Webentwicklerin/Webdesignerin bei code.pixies

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

01

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.

02

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.

03

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.

04

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.

05

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.

06

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.

Custom Wordpress SolutionElementorJetenginePage BuilderWordpress

Mehr Insights

Umweltschutz leben: Stiftung Wald für Sachsen

Erfahren Sie mehr über unsere benutzerdefinierte Lösung für die Stiftung Wald für Sachsen mit Fortschrittsbalken und dynamischen Formularen für eine nahtlose Benutzerinteraktion….
Custom Wordpress SolutionWebentwicklung

Ticketkauf Neu Definiert

Erleben Sie, wie wir die Online-Ticketkauf-Erfahrung neu gestalten! Unsere maßgeschneiderte Lösung bietet intuitive Navigation, flexible Preise und nahtlose Integrationen….
Custom Wordpress SolutionWebentwicklung

Effizientes Angebotsmanagement

Entdecken Sie, wie wir mit benutzerdefinierten Lösungen und innovativen Integrationen die Verwaltung und Kommunikation wöchentlicher Angebote für unseren Kunden revolutionierten….
Custom Wordpress SolutionWebentwicklung

Bleiben Sie auf dem neuesten Stand - Newsletter abonnieren!

Melden Sie sich für unseren Newsletter an und bleiben Sie mit allen neuesten Updates, Nachrichten und Trends in Ihrem Postfach auf dem Laufenden. Ihre E-Mail-Adresse wird nur verwendet, um Ihnen unseren Newsletter und Informationen über die Aktivitäten von code.pixies zuzusenden. Sie können sich jederzeit über den im Newsletter enthaltenen Link abmelden.