BUK Hotel Room Search Widget

The Hotel Room Search Widget is a TypeScript widget that enables users to search for hotel rooms on buktrips.com by location, check-in and check-out dates, and occupancy details. This document provides information on how to use the widget, customize it, and the license.

Installation

You can install the widget as an npm package:

npm i buk-search-widget

Alternatively, you can include the widget in your HTML file via a CDN:

Usage

To use the widget, you need to create an HTML form with the following fields:

• buk-location: A text input field for the location.
• buk-checkin: A date input field for the check-in date.
• buk-checkout: A date input field for the check-out date.
• buk-occupancy: A container element for the occupancy details. This element should have a data-widget="occupancy" attribute.
• buk-search: A submit button for searching the hotel rooms.

Here's an example HTML form:

    <div class="buk-search-container">
      <form id="buk-search-form">
        <div class="buk-form-group">
          <label for="buk-location">Location</label>
          <input required="" placeholder="Enter a location" name="buk-location" id="buk-location" type="text">
          <ul id="buk-suggestions"></ul>
          <div class="buk-error-message" id="buk-location-error"></div>
        </div>

        <div class="buk-form-group">
          <label for="buk-checkin">Check-in</label>
          <input required="" name="buk-checkin" id="buk-checkin" type="date">
          <div class="buk-error-message" id="buk-checkin-error"><p></p>
        </div>

        <div class="buk-form-group">
          <label for="buk-checkout">Check-out</label>
          <input required="" name="buk-checkout" id="buk-checkout" type="date">
          <div class="buk-error-message" id="buk-checkout-error"><p></p>
        </div>

        <div class="buk-form-group">
          <button class="buk-occupancy-dropdown" id="buk-occupancy-dropdown" type="button">
            1 Room, 1 Adult
          </button>
          <div class="buk-occupancy-dropdown-content">
            <div id="buk-rooms-container"></div>
            <button id="buk-add-room" type="button">Add Room</button>
            <div class="buk-error-message" id="buk-occupancy-error"><p></p>
          </div>
        </div>

        <div class="buk-form-group">
          <button id="buk-search-btn" type="submit">Search</button>
        </div>
      
    </div>

Customization

You can customize the widget by applying custom CSS styles to the HTML elements. Here are some of the CSS classes that you can use:

• .buk-form-group: Applies to each form group element.
• .buk-occupancy-dropdown: Applies to the occupancy dropdown container.
• .buk-occupancy-dropdown-content: Applies to the occupancy dropdown content.
• .buk-room-container: Applies to each room container element.
• .buk-remove-room: Applies to each remove room button element.
• .buk-age-select: Applies to each age select element.
• .buk-error-message: Applies to the error messages.
• buk-search-btn: Applies to Search button.

License

This widget is licensed under the MIT license.