Eine interaktive Holzbaukarte
In unserem letzten Beitrag haben wir die Entwicklung eines innovativen Features für die Website unseres Kunden vorgestellt: eine interaktive Kartenfunktion, die es Nutzern ermöglicht, Holzbauprojekte in ganz Sachsen zu erkunden.
Mit dem Ziel, eine nahtlose Integration und eine benutzerfreundliche Erfahrung zu gewährleisten, entschieden wir uns für das leistungsstarke Jetengine-Plugin. Von der Aktivierung der Map-Funktion bis zur Anpassung von Marker-Stilen und der Erstellung einer Listenansicht haben wir die Schritte zur erfolgreichen Implementierung detailliert beschrieben.
Jetzt werfen wir einen Blick auf die Filterfunktion, mit welcher die Holzbauprojekte eingegrenzt werden können.
Erweiterung durch Jet Smartfilters
Die benötigte Funktionalität bietet das Jet Smartfilters Plugin. Es erweitert Jetengine um eine mächtige Filterfunktion. Dabei ist die Handhabung denkbar einfach.
Erstellung der Filter
Im Smartfilters Dashboard können wir unsere benötigten Filter anlegen. In unserem Fall möchten wir drei Checkbox-Filter für die Taxonomien anlegen, sowie eine Suchfunktion für den Ort und einen Range-Filter für die Fertigstellung. Wir wählen also jeweils den gewünschten Filtertyp und die Datenquelle. Zum Teil bieten die Filter noch weitere Anpassungsmöglichkeiten. Diese sind in unserem Fall aber nicht notwendig.
Filter-Widget einfügen
Wir haben uns dazu entschieden unseren Filter in einem Popup anzulegen, um auf der Seite den maximalen Platz für die Karte nutzen zu können. In dem Popup bauen wir uns nun unseren Filter zusammen und wählen dabei jeweils das passende Widget zum Filtertyp.
Filter-Widget einstellen
Nun stellen wir die Widgets ein. Zuerst wählen wir den passenden Filter aus dem Dashboard aus. Dann stellen wir den Filter für das Jetengine Map Listing ein. Für die Anwendung des Filters wählen wir Ajax bei Änderung der Werte. Das heißt unser Filter wird angewendet sobald sich eine Auswahl im Filter ändert und das ohne die Seite neu zu laden. Da wir nur ein Map-Listing auf unserer Seite haben, müssen wir keine Query ID für die Verknüpfung angeben.
Im nächsten Teil sehen wir uns das Formular an, über welches die Website-Besucher Holzbauprojekte einreichen können.
