Voorbeeld code, boekingstraat
Kijk onderaan voor een voorbeeld van de onepage-boekingsstraat.
Onderstaande HTML code kan opgeslagen worden als een eigen HTML pagina, wanneer dan de attributen ‘data-booking-resort’ & ‘data-booking-token’ ingevuld worden, is er reeds een werkende versie.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Online boeken</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://booking.holidayagent.nl/css/booking/default.1.css" rel="stylesheet">
</head>
<body>
<div class="booking-widget" data-booking-lng="nl" data-booking-resort="" data-booking-token="">
<div class="col-xs-12 col-sm-12 col-md-3 booking-search">
<div class="well booking-widget-searcher"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 booking-refine">
<div class="well booking-widget-levels"></div>
</div>
<div class="col-sm-8 booking-refine">
<div class="booking-widget-reservation"></div>
</div>
<div class="col-sm-4 booking-overview">
<div class="booking-widget-receipt"></div>
</div>
</div>
<script src="https://lib.hmcms.nl/js/2/ha/booking/hmapi.js"></script>
<script>hmapi.booking.init();</script>
</body>
</html>
Voorbeeld - onepage-boekingsstraat
Er is ook een onepage-boekingsstraat, daarbij is het niet aan te raden om alle sub-widgets op dezelfde pagina te plaatsen, maar juist een eigen pagina om te online boeking af te ronden. Dus een pagina waarop alleen de volgende sub-widgets zijn ingesteld:
- booking-widget-reservation
- booking-widget-receipt
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Online boeken</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://static.holidayagent.nl/css/booking/page-booking.1.css" rel="stylesheet">
</head>
<body>
<div class="booking-widget" data-booking-lng="nl" data-booking-resort="" data-booking-token="">
<div class="booking-widget-reservation"></div>
<div class="booking-widget-receipt"></div>
</div>
<script src="https://lib.hmcms.nl/js/2/ha/booking/hmapi.js"></script>
<script>hmapi.booking.init({
"version": 2
});</script>
</body>
</html>
Zorg ervoor dat vanaf de Accommodatie Detail Pagina een deeplink gegenereerd wordt met minimaal de volgende parameters in de URL:
- booking_level
- booking_arrival
- booking_departure
Een reservering zal dan op deze onepage-boekingsstraat gestart worden.