Subwidgets

HolidayAgent heeft verschillende subwidgets beschikbaar om het online boeken optimaal te integreren in uw website.

Widgets om te zoeken

1. Searcher
2. Quicksearch (verouderd: Searcher is de nieuwe standaard)
3. Levels, of levels vanuit website CMS aanvullen met dynamische beschikbaarheid

Widgets voor de detail pagina

1. Pricetable, prijzen en beschikbaarheidsoverzicht
2. Periods, selecteer een aankomstdatum en zie alle mogelijk vertrek opties
3. Datepicker, selecteer een aankomst- en vertrekdatum in de kalender
4. Calendar, selecteer aankomst- en vertrekdatum in kalender waarbij er direct prijzen in de kalender worden getoond

Widgets voor de reservering

1. Boekingsstraat en kassabon

Speciale widgets

1. Informatie aanvraag formulier
2. Mijn Omgeving
3. Enquêtes en beoordelingen
   

Widgets om te zoeken

1. Searcher

Een searcher toevoegen aan de website.

<div class="booking-widget-searcher"></div>

De searcher kan geinitialiseerd worden met allerlei instellingen:

• wel of niet automatisch zoeken
• zoeken op: `nearest` of `cheapest` mogelijkheid
• alternatieven in de buurt van opgegeven aankomstdatum
• alternatieven verblijfsduren
• en nog meer…

Indien u hier interesse in heeft, helpen wij u graag verder met uw maatwerk wensen.

Wanneer de searcher op de homepage gebruikt wordt, zal er niet automatisch gezocht worden, want de zoekopdracht zal meestal naar de lijstweergave pagina doorgestuurd worden.
Op de lijstweergave is het dynamisch zoeken weer handig, zodat direct de juiste resultaten zichtbaar zijn.

2. Quicksearch (verouderd: searcher is de nieuwe standaard)

Een quicksearch toevoegen aan de website.

<div class="booking-widget-quicksearch"></div>

Extra opties om mee te geven aan deze subwidget:

• data-booking-search=""             (nearest / cheapest) nearest = default
• data-booking-autosearch=""      (true / false) true = default

Om af te vangen wat er moet gebeuren wanneer er op de 'Zoeken' knop geklikt wordt (data-booking-autosearch="false"), kan de volgende voorbeeld javascript code gebruikt worden:

widget.on('booking:quicksearch:load', function() {
  $(this).find('.item button.button').on('click', function(event) {
    var params = widget.getData('quicksearch', 'booking_');
    this.href = '/page.html?' + $.param( params );
  });
});

3a. Levels

Er is op dit moment nog geen lijst met accommodaties op de website aanwezig, en het is gewenst om deze informatie uit het Online boeken te gebruiken. Dit kan met de widget ‘booking-widget-levels’

<div class="booking-widget-levels"></div>

De mogelijke accommodatie(type)s zullen hier weergegeven worden, deze zijn automatisch gekoppeld aan de quicksearch. Dus de beschikbaarheid en prijzen zullen aangepast worden indien er een nieuwe zoekopdracht plaatsvindt. Om de reservering vervolgens verder af te handelen moeten ook de widgets ‘reservation’ & ‘receipt’ toegevoegd worden.

Een andere mogelijkheid is dat er reeds een lijstweergave van de mogelijke accommodaties op de website aanwezig is, zie hieronder de optie ‘quicksearch levels’.

3b. Levels aanvullen vanuit website CMS

Een lijst met accommodaties koppelen aan beschikbaarheden en prijzen, op de website staat reeds een lijst van mogelijke verblijven. Om deze te koppelen via de booking widget. Geef daarom een 'div' over alle mogelijkheden de className 'levels' mee. Uiteraard kan een div ook een ander HTML element zijn en kunnen er ook meerdere (bv de originele) classNames aan gekoppeld zitten.

<div class="levels [otherClassNames]">
   <!-- Hier staan de verblijfmogelijkheden welke reeds in de website zitten -->
</div>

Om dan een unieke verblijfsmogelijkheid te koppelen, gebruik je de volgende syntax:

<div class="levels [otherClassNames]">
   <!-- Hier komen de verblijfmogelijkheden -->
   <div class="booking-widget-level" data-booking-level="[levelId]">
      <!-- Inhoud van deze verblijfsmogelijkheid -->
   </div>
</div>

De inhoud van dit element zal nu echter compleet vervangen worden door de gevonden beschikbaarheid gegevens, om dit echter alleen in extra HTML element te krijgen, kan het volgende toegevoegd worden, dus als totaal:

<div class="levels [otherClassNames]">
   <!-- Hier komen de verblijfmogelijkheden -->
   <div class="booking-widget-level" data-booking-level="[levelId]">
      <!-- Inhoud van deze verblijfsmogelijkheid, titel, teksten en foto’s, etc.. -->
      <div class="availability">
         <!-- Hier wordt dan dynamisch de juiste beschikbaarheid en prijs informatie in weergegeven -->
      </div>
      <!--Nog meer inhoud van deze verblijfsmogelijkheid -->
   </div>
</div>

Standaard wordt er een HTML element ‘button’ weergegeven welke je kunt afvangen met javascript, bijvoorbeeld:

var widget = $(".booking-widget");
widget.on('booking:quicksearch:search', function() {
   $(this).find('.booking-widget-level .availability button').on('click', function(event) {
      event.preventDefault();
   });
});

Je kunt er ook voor kiezen om geen gebruik van de standaard button te maken, je voegt dan een HTML element toe in het '.booking-widget-level' element met de className 'booking-widget-extend-link', door middel van een stuk javascript code kan ervoor gezorgd worden dat er bijvoorbeeld parameters aan de link toegevoegd worden, om direct te deeplinken naar de juiste, reeds geselecteerde, periode. Vergeet dan niet om de standaard button te verbergen via CSS. Bijvoorbeeld zoals:

widget.on('booking:quicksearch:search', function() {
  $(this).find('.booking-widget-extend-link').on('click', function(event) {
    var prefix = 'booking_',
        params = widget.getData('quicksearch', prefix),
        availability = $(this).parents('.booking-widget-level').find('.availability');

    if (availability.length) {
      params[prefix+'arrival'] = availability.data('booking-arrival');
      params[prefix+'departure'] = availability.data('booking-departure');
      params[prefix+'level'] = availability.data('booking-level');
    }

    this.href = widget.parseURI(this.href, params);
  });
});

Widgets voor de detail pagina

1. PriceTable Kalender

De opvolger van de PBO-widget, een duidelijk overzicht met alle mogelijke perioden en prijzen.

Zorg ervoor dat de basis stylesheet altijd geladen is: https://static.holidayagent.nl/css/booking/pricetable/default.css, anders zal het systeem de pricetable slider niet goed initialiseren. Verder is er een hm-markup stylesheet, welke gebruikt kan worden om het één en ander naar wens te stylen: https://static.holidayagent.nl/css/booking/pricetable/hm-markup.css

<div class="booking-widget-pricetable"></div>

2. Periods kalender

Bij de periods sub-widget wordt in de kalender een mogelijke aankomstdatum gekozen. De mogelijke vakantieperiodes worden dan weergegeven en de bezoeker maakt zijn keuze.

De subwidget wordt alsvolgt aangeroepen:

<div class="booking-widget-periods"></div>

Extra opties om mee te geven aan deze subwidget:

• data-booking-level=""               levelId (het is beter om dit in dehoofdwidget van de pagina af te vangen)
• data-booking-months=""            (integer) default = 2

Het is mogelijk om de weergave van de verschillende data aan te passen, deze kun je met het volgende data-attribuut instellen.
Default zal de lokale datum notatie van de gebruikte taal weergegeven worden:

• NL: d-m-yy
• DE: d.m.yy
• EN: m/d/yy
• FR: d/m/yy

Om deze waarden te gebruiken hoef je onderstaande data-attributen dus niet op te nemen in de code.

data-booking-format-date="D d M yy"
data-booking-format-arrival="DD d MM yy" 

Middels het attribuut 'data-booking-format-date', zullen alle data aangepast worden, dus ook de arrivalDate. Indien je deze anders wenst weer te geven, kan daar het attribuut 'data-booking-format-arrival' voor gebruikt worden.

 Mogelijke instellingen:

• d: day of month (no leading zero)
• dd: day of month (two digit)
• D: day name short
• DD: day name long
• m: month of year (no leading zero)
• mm: month of year (two digit)
• M: month name short
• MM: month name long
• y: year (two digit)
• yy: year (four digit)

Het systeem zal zelf, afhankelijk van de ingestelde taal, de vertalingen weergeven.

3. Datepicker Kalender

Als u op een pagina een kalender wilt om een begin- en einddatum te selecteren voor de boeking dan kunt u deze widget gebruiken.

Deze kan als volgt worden ingesteld:

<div class="booking-widget-datepicker"></div>

Extra opties om mee te geven aan deze subwidget:

• data-booking-level=""               levelId, zodat de juiste informatie geladen wordt
• data-booking-months=""            (integer) default = 2
• data-booking-extend="xx"         xx = aantal nachten boven de standaard 21
  
• data-booking-showperiod="true" toont prijs na selecteren van begin -en einddatum

Widgets voor de reservering

1a. Boekingsstraat en kassabon

Aangeraden wordt om de onepage-boekstraat te gebruiken, zie daarvoor 1b.

Een accommodatie detail pagina kan uitgebreid worden met de ‘reservation’ en ‘receipt’ widgets. Deze zorgen ervoor dat er een online boeking gemaakt kan worden. In de ‘reservation’ widget wordt de samenstelling opgegeven, kiest de boeker zijn optioneel gewenste artikelen en kan hij eventueel een voorkeursboeking maken. In de volgende stappen geeft hij zijn gegevens op en ziet hij het resultaat van de reservering. In de ‘receipt’ widget worden zijn keuzes vervolgens opgesomd.

<div class="booking-widget-reservation"></div>
<div class="booking-widget-receipt"></div>

1b. Onepage boekingsstraat en kassabon

De vernieuwde standaard is de boekingsstraat op 1 pagina, deze werkt het beste wanneer er op de website en eigen pagina, waarop de reserveringen afgerond kan worden. In de ‘reservation’ widget wordt de samenstelling opgegeven, kiest de boeker zijn optioneel gewenste artikelen en kan hij eventueel een voorkeursboeking maken. In de volgende stappen geeft hij zijn gegevens op en ziet hij het resultaat van de reservering. In de ‘receipt’ widget worden zijn keuzes vervolgens opgesomd.

<div class="booking-widget-reservation"></div>
<div class="booking-widget-receipt"></div>

Om gebruik te maken van de onepage-boekstraat moet aangegeven worden dat versie 2 gebruikt moet worden, dit kan als volgt:

<script>
hmapi.booking.init({
  "version": 2
}).then(function(widget){
  var $ = jQuery,
      lng = document.documentElement.lang || 'nl';

  // Hier komen de mogelijke uitbreidingen
});
</script>

Kijk hier voor de voorbeeld code.

Speciale widgets

1. Informatie aanvraag formulier

Een informatie aanvraag widget toevoegen op uw website.

<div class="booking-widget-information"></div>

2. Mijn Omgeving

De Mijn Omgeving widget toevoegen op uw website.

<div class="booking-widget-mybooking"></div>

Enquêtes en beoordelingen

3.1 Resultaten van enquêtes toevoegen aan de website

<div class="booking-widget-survey" data-booking-survey=""></div>

Extra opties om mee te geven aan deze subwidget:

• data-booking-survey="" verplicht, mini-token waardoor widget weet welke enquête widget er moet worden ingeladen. Deze mini token is te vinden in het enquête widget overzicht
• data-booking-lng="" optioneel, restrictie van taal van beoordelingen (op dit moment maar 1 taal mogelijk)
• data-booking-level="" optioneel, meerdere mogelijk (komma gescheiden)
• data-booking-search="" optioneel, kan worden gebruikt om losse enquête elementen op de pagina te vullen (true/false), default=false

Bovenstaande instellingen kunnen worden gecombineerd zodat de juiste beoordelingen en resultaten van enquêtes opgehaald kunnen worden.

Voor de widget zijn de volgende triggers af te vangen: ready, load (booking:survey:ready etc.).

3.2 Tonen van beoordelingen per objecttype

Om beoordelingen per objecttype te kunnen tonen dient voor elk van de gewenste objecttypes de volgende html structuur aanwezig te zijn. Daarnaast zal data-booking-search de waarde true moeten hebben:

<div class="booking-widget-level" data-booking-level="">
    <div class="booking-survey"></div>
</div>

De enquête widget zal (door data-booking-search=”true”) zelf op zoek naar booking-widget-level elementen en het booking-survey element daarbinnen vullen met de html van de enquête widget.
Het is logischerwijs van belang dat de booking-widget-level elementen zich bevinden binnen de hoofd booking widget.

3.3 Tonen van beoordelingen per resort

Om beoordelingen per park te kunnen tonen dient voor elk park de volgende html structuur aanwezig te zijn. Daarnaast zal data-booking-search de waarde true moeten hebben:

<div class="booking-widget-resort" data-booking-resort="">
    <div class="booking-survey"></div>
</div>

De enquête widget zal (door data-booking-search=”true”) zelf op zoek naar booking-widget-resort elementen en het booking-survey element daarbinnen vullen met de html van de enquête widget. Het data-booking-resort attribute dient de tekstuele identifier van de het park te bevatten (bijv. tibos_demo).
Het is logischerwijs van belang dat de booking-widget-resort elementen zich bevinden binnen de hoofd booking widget.

3.4 Voorbeeld code

Met onderstaande code worden bijvoorbeeld de gemiddelde beoordelingen van het tibos demo park getoond en de gemiddelde beoordelingen van objecttype 2 en 3.
Daarnaast wordt de enquête div met mini-token ja8Hb3jsB34 automatisch gevuld met html van bijbehorende widget.

<div class="booking-widget" data-booking-lng="nl" data-booking-resort="demo_tibos" data-booking-token="">
  <div class="booking-widget-survey" data-booking-survey="nH7BV5Jnsb" data-booking-search="true"></div>
  <div class="booking-widget-resort" data-booking-resort="demo_tibos">
    <div class="booking-survey"></div>
  </div>
  <div class="booking-widget-level" data-booking-level="2">
    <div class="booking-survey"></div>
  </div>
  <div class="booking-widget-level" data-booking-level="3">
    <div class="booking-survey"></div>
  </div>
  <div class="booking-widget-survey" data-booking-survey="ja8Hb3jsB34"></div>
</div>