The ultimate Booking Engine

# Getting started

Our Booking Engine has an modulair structure. You can use ready-to-use widgets directly in your website. Or you can simply create your own booking eingine by using the components seperately.

# Installation

# Via the browser

In order to run the booking engine we need Vue JS to be available. You can include this in the head of your page with the following code.

<script src="https://unpkg.com/vue"></script>

# Default settings

With the cc_settings you can set the default Attributes for your Booking Engine. All the attributes are option except admin_id and public_key.


<script src="https://unpkg.com/vue"></script>
<script src="https://booking-engine.camping.care/cc-book-form.js"></script>

<script>

    const cc_settings = {
        admin_id : 77,
        public_key : '',
        arrival: 'YYYY-MM-DD',
        departure: 'YYYY-MM-DD',
        accommodation_id : 0,
        language : 'nl',
        book_url: 'https://example-camping/book-online'
    }

</script>

<cc-book-form></cc-book-form>

# Attributes

# admin_id (required)

  • Type: Number

This is the Camping id or park number that is required to load the booking engine.

# public_key (required)

  • Type: String

This is the Camping id or park number that is required to load the booking engine.

# arrival

  • Type: string
  • Format: YYYY-MM-DD
  • Default: today's date

If you want to force an arrival date into the widget you can use this attribute.

# departure

  • Type: string
  • Format: YYYY-MM-DD
  • Default: today's date

If you want to force a departure date into the widget you can use this attribute.

# accommodation_id

  • Type: string
  • Format: YYYY-MM-DD
  • Default: today's date

If you want to force an accommodation id into the widget you can use this attribute.

# accommodation_id

  • Type: string
  • Format: YYYY-MM-DD
  • Default: today's date

If you want to force an accommodation id into the widget you can use this attribute.

# style_url

  • Type: string
  • Default: null

To implement additional styling, you are able to add a custom stylesheet.

# success_url

  • Type: string
  • Default: null

The url we should redirect the user to when the booking has been made successfully.

# age_tables

  • Type: Array
  • Default: null

You can specify the amount of the persons popup by adding the age_tables property in the cc_settings. It will override the default amount of persons. The property requires an array with objects. In the object, you will set the id of the age_table, and a count with the amount of persons for that age table.

You can find the age_tables ids in the response of the get administration request of our api. It is located the age_tables property in the response.

age_tables from Url: The age_tables, which are set in the bookingengine, will also be set in the url. This only happens in the following occasions:

  • When the Search and Book button is pressed in the Search and Book component
  • When book button is pressed on an accommodation in the list of accommodations (List view)
  • When the More button is pressed on an accommodation in the list of accommodations (List view)
  • When the Book button is pressed on the accommodation detail page.

You can retrieve the age_tables from the url and put them in the cc_settings object. They will be listed as: "bc_age_table_input". You can get them using the URL object in javascript.

Note: You need to make shure that you define all the age_tables that are defined. So if you have 5 age tables, the amount of objects in the age_tables array are 5. The count property can be set to 0.

Example:


<script>

    const cc_settings = {
        age_tables : [
            {
                id: 4365,
                count:1
            }, 
            {
                id: 4366,
                count:2
            }
        ]
    }

</script>

# birth_tables

  • Type: Array
  • Default: null

With the birth tables you can force persons into the widget. By giving the birthdates and the amount of persons on that date we can match them with the ages defined by the camping.

Example: If you have 2 adults and 1 child, it could look like this:


<script>

    const cc_settings = {
        birth_tables : [
            {
                birthdate: "2017-08-02", 
                count:1
            }, 
            {
                birthdate: "1986-03-07", 
                count:2
            }
        ]
    }

</script>

# place_id

  • Type: Number

If you want to force an place id into the widget you can use this attribute.