SearchApp op maat programmeren

De SearchApp (zie ook de beheerderspagina over de zoekpagina) is een zoek- en filtercomponent die technisch is opgebouwd als een losstaande, herbruikbare front-end component (React, uit de gedeelde componentbibliotheek van i-Reserve). Dat betekent dat er — naast de zelfbedieningsopties die een beheerder in het configuratiescherm heeft — op maatwerkbasis meer mogelijk is dan wat er standaard te configureren is. Deze pagina beschrijft wat er technisch mogelijk is; de implementatie hiervan is maatwerk dat je door Teqa (of een implementatiepartner met sjabloontoegang) laat inrichten.

Waar de configuratie leeft

Een SearchApp-instantie wordt aangeroepen vanuit een pagina-sjabloon met één functie-aanroep, per sector (Evenementen, Bootverhuur of Vergaderruimtes). De filters die een beheerder via “Zoekfilters beheren” toevoegt, worden automatisch in die aanroep geschreven; alles daaromheen (weergave-opties, extra filtertypen, kaartweergave, sorteeropties) wordt handmatig in diezelfde configuratie toegevoegd.

Filtertypen: meer dan de beheerder ziet

Het beheerscherm “Zoekfilters beheren” genereert altijd filters van hetzelfde type: keuzevakjes waarvan de opties automatisch uit de data worden afgeleid (“checkbox group”, met automatisch bepaalde opties). De component zelf ondersteunt daarnaast ook:

• een vrij tekstveld (zoeken op omschrijving);
• een keuzelijst met één waarde (“select”);
• een datumbereik, één datum, of een tijdvak/periode-keuze;
• een volledig zelf gedefinieerde filterfunctie voor situaties die niet in de standaardtypen passen.

Deze extra typen zijn niet zichtbaar of aanpasbaar in het beheerscherm; ze worden alleen door een developer direct in de configuratie toegevoegd.

Zoeken op kaart

De component kan resultaten naast een lijst ook op een kaart tonen: een lijst/kaart-schakelaar, met een marker per resultaat, automatisch clusteren van resultaten op dezelfde locatie, en automatisch inzoomen op de zichtbare resultaten.

Dit stel je in via twee opties in dezelfde configuratie waar ook de filters staan: views (voeg 'map' toe naast 'list') en map. De belangrijkste velden van map:

• center — verplicht, de startpositie van de kaart (breedtegraad/lengtegraad).
• coordsField — verplicht, de naam van de resultaatkolom die de coördinaten bevat als tekst “breedtegraad,lengtegraad”, bijvoorbeeld “52.3676,4.9041”.
• zoom — optioneel, startzoomniveau.
• mapId — optioneel, voor de modernere marker-stijl van Google Maps.
• clusterSameLocation — optioneel, standaard aan: resultaten op dezelfde locatie worden samengevoegd tot één marker met een aantal.
• fitBounds — optioneel, standaard aan: de kaart past zichzelf automatisch aan zodat alle zichtbare resultaten in beeld zijn.
• getMarkerIcon / renderInfoWindow — optioneel, voor een eigen marker-stijl of eigen inhoud in het info-venster per resultaat.

map: {
  center: { lat: 52.37, lng: 4.90 },
  zoom: 8,
  coordsField: 'COORDS'   // kolom met bv. "52.3676,4.9041"
},
views: ['list', 'map'],
defaultView: 'list'

De coördinaten moeten als kolom in de resultaten van de zoekpagina staan. Voor objecten legt i-Reserve intern al een breedte- en lengtegraad vast, maar als twee losse velden — de kaartweergave verwacht ze juist als één samengevoegde tekstwaarde per resultaat. Voor andere resultaattypen (bijvoorbeeld losse locaties zonder gekoppeld object) legt i-Reserve nog geen coördinaten vast. In beide gevallen is de eerste stap dus dat een developer, aan de kant van de zoekresultaten-API, een kolom toevoegt die de coördinaten als één samengevoegde waarde teruggeeft, en die kolomnaam invult bij coordsField.

Eigen weergave van resultaten en sortering

Naast de standaardweergave van een resultaat kan een developer een volledig eigen opmaak per resultaat opgeven, eigen sorteeropties toevoegen (bijvoorbeeld op prijs of populariteit als die als data beschikbaar zijn), en bepalen wat er gebeurt als een bezoeker op een resultaat klikt (bijvoorbeeld direct doorschakelen naar de boekingsflow in plaats van eerst een detailpagina tonen).

Wat kan de beheerder zelf, wat is maatwerk?

Wil je een van de maatwerkopties laten inrichten? Neem contact op met Teqa — zie ook de beheerderspagina over de zoekpagina voor wat je als beheerder al zelf kunt instellen.