Developers handleiding

Integratie via CDN

De gemakkelijkste manier om de kalender en zoekmodule te integreren in een website is via de cdn.

Dit doe je heel eenvoudig door het plaatsen van de benodigde bestanden:

Boven in de website plaats je het css bestand:

<link rel="stylesheet"href="https://portal.bukazu.com/main.css"type="text/css"media="all" />

In de footer van de website plaats je het javascript bestand:

<script src="https://portal.bukazu.com/main.js"></script>

 

Je kan daarna overal op de website ons zoeksysteem aanroepen door een div te plaatsen, je hoeft alleen de portal code in te vullen en je ziet direct het zoeksysteem verschijnen:

<div id="bukazu-app" class="bukazu-app" portal-code="xxxxx" language="nl"></div>

 Mocht je een kalender willen aan roepen dan plaats je dezelfde div met de object-code

<div id="bukazu-app" class="bukazu-app" portal-code="xxxxxx" object-code="xxxxxx" language="nl"></div>

Variabelen

Variable Type Uitleg
id string Is benodigd voor javascript om de portal te laden. Is tevens benodigd voor de css.
class string Wordt gebruikt om meerdere portals op dezelfde pagina te laden
portal-code string Portal code van de portal dat getoond moet worden.
object-code string De code van het object dat getoond moet worden, indien geen object-code wordt standaard de zoekpagina weergegeven
language string (standaard: "nl") Taal waarin de portal weergegeven dient te worden
filters string (object to json string) Hiermee kunnen alvast filters worden ingevuld in de zoekpagina. Bijvoorbeeld: {"persons_min":"2"}

Integratie via NPM

Installeer het npm package:

npm install bukazu-portal-react

Laad de portal en de css in je project

import Portal from 'bukazu-portal-react'
import 'bukazu-portal-react/build/index.css'

 

Je kan daarna de portal aanroepen:

<Portal portalCode={} locale={} />

 

Variabelen

Variable Type Uitleg
id string Is benodigd voor javascript om de portal te laden. Is tevens benodigd voor de css.
className string Wordt gebruikt om meerdere portals op dezelfde pagina te laden
portalCode string Portal code van de portal dat getoond moet worden.
objectCode string De code van het object dat getoond moet worden, indien geen object-code wordt standaard de zoekpagina weergegeven
locale string (standaard: "nl") Taal waarin de portal weergegeven dient te worden
filters Object Hiermee kunnen alvast filters worden ingevuld in de zoekpagina. Bijvoorbeeld: {persons_min: 2}

Zoekfilters vooraf invullen via de URL

Je kan vanaf iedere pagina (bijvoorbeeld een landingspagina, blog of nieuwsbrief) linken naar de zoekpagina met filters die al ingevuld zijn. Dit doe je door query parameters toe te voegen aan de URL van de pagina waarop de portal staat. De portal heeft geen eigen routing: de zoekpagina is iedere pagina waarop de bukazu-app div staat zonder object-code.

Voorbeeld:

https://jouw-website.nl/aanbod?arrival_date=2026-07-01&departure_date=2026-07-08&persons_min=4&countries=12&properties=12,34

Ondersteunde parameters

  • arrival_date – datum in het formaat YYYY-MM-DD. Alleen een aankomstdatum zoekt op minimaal 1 nacht.
  • departure_date – datum in het formaat YYYY-MM-DD. Wordt alleen gebruikt in combinatie met arrival_date; het aantal nachten wordt hieruit berekend.
  • persons_min – geheel getal, minimaal aantal personen.
  • persons_max – geheel getal, maximaal aantal personen.
  • bedrooms_min – geheel getal, minimaal aantal slaapkamers.
  • bathrooms_min – geheel getal, minimaal aantal badkamers.
  • weekprice_max – geheel getal, maximale weekprijs in hele valuta-eenheden.
  • countries – numeriek id van het land (geen ISO-code of slug). De id's vind je via GET /portal_api/v1/config/filter-fields.
  • regions – numeriek id van de regio. Moet bij het opgegeven land horen als countries ook is ingevuld.
  • cities – numeriek id van de plaats. Moet bij het opgegeven land of de opgegeven regio horen.
  • extra_search – vrije zoektekst, URL-encoded.
  • properties – komma-gescheiden lijst met numerieke ids van eigenschappen, bijvoorbeeld 12,34,56.
  • category_<id> – één numeriek eigenschap-id per eigenschapscategorie, waarbij <id> het id van de categorie is. Bijvoorbeeld category_13=101. Wordt samengevoegd met properties.

Niet via de URL in te stellen: paginering, aantal resultaten per pagina, valuta, taal en de portal- of object-code.

Gedrag

  • URL-parameters gaan per filter vóór op de waarde uit het filters attribuut (CDN) of de filters prop (NPM).
  • Zodra minimaal één herkende parameter aanwezig is, worden eerder onthouden filters en de onthouden pagina uit localStorage overgeslagen; de resultaten starten op pagina 1.
  • Filters uit de URL worden niet opgeslagen in localStorage. Wijzigingen die de bezoeker daarna in de filters maakt, worden niet teruggeschreven naar de URL.
  • Lege waarden worden overgeslagen en onbekende parameters (zoals utm_*) worden genegeerd. Staat een parameter meerdere keren in de URL, dan geldt de laatste.
  • Waarden worden niet gevalideerd: datums worden ongewijzigd doorgegeven en niet-numerieke waarden voor numerieke filters vallen weg.
  • Deze functie staat standaard aan en kan per portal worden uitgeschakeld met de instelling filters_form.prefill_filters_from_url.