Finder

Main accommodation search interface allowing guests to input dates, occupancy, and destination.

🔍 Component type: Search interface | Connects to: /booking-rooms page with <rates> component

Basic Implementation

Add the search component to your page:

<div data-mirai-component="finder"></div>

Property Types

The finder form adapts based on your data repository configuration:

Individual Hotel
Hotel Chain

Configuration: data-type="hotel" (default)Shows basic search fields:

Check-in/check-out dates
Occupancy (adults/children)
Promotional code

Associated with the hotel specified in data-mirai-id

Configuration: data-type="chain"Includes additional field:

Destination selector dropdown
All basic search fields

User selects a hotel within the chain before searching

Layout Options

data-layout

Options: inline | column | expand

inline (default): Horizontal fields
column: Vertical stacking
expand: Full parent width (inline only)

data-icon

Options: false | true

false (default): Text button
true: Magnifying glass icon

Layout Examples

<!-- Vertical layout -->
<div data-mirai-component="finder" data-layout="column"></div>

<!-- Full width with icon -->
<div data-mirai-component="finder" data-layout="expand" data-icon="true"></div>

<!-- Vertical with icon (expand ignored) -->
<div data-mirai-component="finder" data-layout="column" data-icon="true"></div>

The data-layout="expand" attribute only works with inline layout. It has no effect when combined with column.

Device-Specific Display

Control component visibility based on device type:

data-mobile

Options: true | falsetrue: Shows only on mobile devices
false (default): No mobile restriction

data-desktop

Options: true | falsetrue: Shows only on desktop
false (default): No desktop restriction

Responsive Examples

<!-- Mobile only -->
<div data-mirai-component="finder" data-mobile="true"></div>

<!-- Desktop only -->
<div data-mirai-component="finder" data-desktop="true"></div>

<!-- Show on all devices (default) -->
<div data-mirai-component="finder"></div>

Automatic Mobile Optimization: The finder automatically switches to a compact, touch-friendly layout on small screens without requiring configuration.

JavaScript Events

Interact with the finder component programmatically:

Set Values
Listen to Changes

Publishing setStore Event

Programmatically set form values:

window.Mirai.Event.publish('setStore', {
  chainSelectorValue: 111222,           // Hotel/chain ID (chain mode)
  calendar: [new Date(), new Date()],   // Check-in/out dates
  hsri: '02080',                       // Optional unique ID
  occupation: [                        // Occupancy details
    { ages: [null, null], amount: 2, type: 2 },  // 2 adults
    { ages: [3], amount: 1, type: 3 },           // 1 child, age 3
  ],
  promocode: 'TEST',                   // Promotional code
});

Send any combination of fields. Omitted fields remain unchanged.

Subscribing to finderChange Event

Detect when users modify form fields:

window.Mirai.Event.subscribe('finderChange', ({ field, previousValue, value } = {}) => {
  console.log(`Modified field: ${field}`);
  console.log(`Previous value: ${previousValue}`);
  console.log(`New value: ${value}`);
});

Field values:

"place" - Destination/hotel selection
"calendar" - Date changes
"occupation" - Occupancy modifications
"promocode" - Promo code updates

Complete Examples

Hotel with custom layout

<!-- Individual hotel, vertical layout, icon button -->
<div data-mirai-id="HOTEL123" data-type="hotel"></div>
<div data-mirai-component="finder" 
     data-layout="column" 
     data-icon="true"></div>

Chain with device targeting

<!-- Chain setup with mobile/desktop specific finders -->
<div data-mirai-id="CHAIN456" data-type="chain"></div>

<!-- Mobile version: Vertical -->
<div data-mirai-component="finder" 
     data-mobile="true" 
     data-layout="column"></div>

<!-- Desktop version: Horizontal, full width -->
<div data-mirai-component="finder" 
     data-desktop="true" 
     data-layout="expand"></div>

Programmatic integration

<!-- Finder with external date picker integration -->
<div data-mirai-component="finder"></div>

<script>
// Set dates from external calendar
function updateFinderDates(checkIn, checkOut) {
  window.Mirai.Event.publish('setStore', {
    calendar: [checkIn, checkOut]
  });
}

// React to finder changes
window.Mirai.Event.subscribe('finderChange', ({ field, value }) => {
  if (field === 'calendar') {
    // Update external calendar
    updateExternalCalendar(value[0], value[1]);
  }
});
</script>

💬 Need help with finder setup? Contact us at support@hotellinkage.com

Getting Started

Components

Booking Process

AI Integration

GTM Integration

Finder

Finder

Basic Implementation

Property Types

Layout Options

data-layout

data-icon

Layout Examples

Device-Specific Display

data-mobile

data-desktop

Responsive Examples

JavaScript Events

Publishing setStore Event

Subscribing to finderChange Event

Complete Examples

​Finder

​Basic Implementation

​Property Types

​Layout Options

data-layout

data-icon

​Layout Examples

​Device-Specific Display

data-mobile

data-desktop

​Responsive Examples

​JavaScript Events

​Publishing setStore Event

​Subscribing to finderChange Event

​Complete Examples

Finder

Basic Implementation

Property Types

Layout Options

Layout Examples

Device-Specific Display

Responsive Examples

JavaScript Events

Publishing setStore Event

Subscribing to finderChange Event

Complete Examples