Overslaan en naar hoofdcontent gaan

Voorbeeld code

  • Bijgewerkt

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.

Verwante artikelen