buk-search-widget

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:

<script src="https://unpkg.com/buk-search-widget/dist/index.js"></script>

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
            type="text"
            id="buk-location"
            name="buk-location"
            placeholder="Enter a location"
            required
          />
          <ul id="buk-suggestions"></ul>
          <div id="buk-location-error" class="buk-error-message"></div>
        </div>

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

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

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

        <div class="buk-form-group">
          <button type="submit" id="buk-search-btn">Search</button>
        </div>
      </form>
    </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.