Bevrijd jezelf van Big Tech!
Eerder werd de bovenstaande functionaliteit met gebruik van Toolset geregeld met behulp van de Google Maps API’s.
Binnen Toolset is het wel mogelijk om om te schakelen naar gebruik van OpenStreetMap (OSM), maar OSM heeft binnen Toolset geen functionaliteit om met een radius rondom een postcode te werken.
Met een maatwerk PHP-code en door gebruik te maken van de Nominatim API is dit wel te realiseren. Toolset wordt dan alleen gebruikt als view en content template. Er is voor deze optie gekozen aangezien Toolset toch al veelvuldig gebruikt wordt binnen de website.
PHP
Om dit te laten werken is er in PHP een functie gemaakt om bij elk adres in de database een longitude en latitude in een custom veld te zetten op basis van de postcode. Ook is er een bulkscript gemaakt dat eenmalig alle adressen update met de lat/lng informatie. Voor nieuwe adressen is er een functie die dit uitvoert op het moment dat dit adres wordt opgeslagen.
De zoekresultaten worden steeds in een transient opgeslagen om gelijke zoekopdrachten sneller te kunnen tonen. Ook de lat/lng data van de zoekpostcode worden in een transient bewaard voor een sneller resultaat bij herhaling. De transients leven slechts 1 uur.
Het zoekformulier en resultaten worden geïntegreerd via een shortcode.
De afstand in kilometers kan in de contenttemplate worden getoond via een shortcode.
HTML
Het zoekformulier heeft 2 tabs: een voor postcode en filters en een tab voor zoeken op naam. Na het zoeken wordt er onder het formulier getoond hoeveel adressen er gevonden zijn binnen de aangegeven radius en op basis van welke postcode.
Daaronder verschijnen dan de resultaten die in de toolset view worden gemaakt op basis van de content template.
Elk resultaat toont het aantal kilometers t.o.v. de gebruikte postcode. De kilometers worden in de content template geplaatst via een shortcode. De resultaten staan in oplopende volgorde op basis van de kilometers.
jQuery
Het postcodeveld heeft een jQuery-functie die ervoor zorgt dat er altijd een nette postcode wordt ingevoerd. Vergeet je de spatie tussen de cijfers en letters, dan wordt deze toegevoegd. Op de positie van cijfers kun je alleen cijfers invoeren en op de positie van letters kun je alleen letters invoeren.
CSS
De styling van het zoekformulier en de resultaten komt uit een apart CSS-bestand dat alleen op de betreffende zoekpagina wordt geladen.
Alle betreffende bestanden worden via het child-thema geladen.
