Ein Filter für die Holzbaukarte

Erfahren Sie, wie wir das leistungsstarke Jet Smartfilters Plugin nutzen, um die Projekte auf der Holzbaukarte nach individuellen Kriterien zu filtern.

Sarah

Webentwicklerin/Webdesignerin bei code.pixies

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.

01

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.

02

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.

03

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.

Custom Wordpress SolutionElementorJetengineJetSmartFiltersPage 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.