検索バーの設置

検索バーの設置方法をご案内いたします。

前へ施設情報の設定次へヘッダー/フッター・デザイン設定

最終更新 1 年前

triplaが提供する検索バーの設置方法

子供設定により表示される検索バーが異なります。

詳しい設定方法は下のリンクからご確認ください。

https://docs.tripla.jp/reserved-engine-settings/children-setting

施設管理画面の [設定] → [ウィジェット設定] → [予約ウィジェット]で設定画面を開きます。

予約ウィジェットを選択します。

[検索バーを設置]のチェックボックスをオンにします。

複数部屋検索を行わない場合、[複数部屋検索]のチェックボックスをオフにしてください。

検索バー設定ページ

[検索バー設置ページ]以下の設定で表示したいページを指定します。

[全てのページ]を選択した場合の設定

プルダウンから、検索ウィジェットの設定箇所を選択してください。

[以下のページ]を選択した場合の設定

検索バーの表示はブラウザの言語によって自動的に変更されます。

検索バーの検索条件の選択肢を開いた際、要素が隠れてしまう場合は、検索バーのwrapper要素のCSS設定に、”overflow: hidden”が設定されていないかご確認ください。

CSSセレクタを使用される際の注意

CSSセレクタでは、検索バーの表示位置を修正することが可能です。上記のCSSセレクタ欄に適宜コードを記載し、ご自身のホームページのCSSに検索バーの位置を指定する記述をしてください。（CSSの記述方法はtriplaではご案内しておりませんので、ホームページ制作担当者様にご相談ください。）

なお、検索バー内の表示、及び各項目（日付・人数プルダウンなど）については、CSSでの編集を行わないでください。こちらはシステムのバージョンアップなどの際に表示が崩れる可能性がありますのでご注意ください。

検索バーの表示はブラウザの言語によって自動的に変更されます。

検索バーの検索条件の選択肢を開いた際、要素が隠れてしまう場合は、検索バーのwrapper要素のCSS設定に、”overflow: hidden”が設定されていないかご確認ください。

CSSセレクタを使用される際の注意

CSSセレクタでは、検索バーの表示位置を修正することが可能です。上記のCSSセレクタ欄に適宜コードを記載し、ご自身のホームページのCSSに検索バーの位置を指定する記述をしてください。（CSSの記述方法はtriplaではご案内しておりませんので、ホームページ制作担当者様等にご相談ください）

部屋・予約ごとの検索制限

予約ページで一度に検索をかけられる室数は９室です。

※初期設定で9室に設定されます。

部屋検索制限の変更は施設管理画面から[設定]→[ウィジェット設定]の中の予約ウィジェットから可能です。

予約ごとの部屋数制限は1回の予約につき35室です。

この数を超えて予約することはできません。

予約ごとの検索制限の変更は、施設管理画面から[設定]→[ウィジェット設定]の中の予約ウィジェットから可能です。

※子供の区分が設定されている場合、予約制限は検索制限と同じです。

※日付指定なしの検索の場合、予約制限は検索制限と同じです。

自前のデザインや既存の検索パネルが既にある場合、javascriptのファンクションで、予約ウィジェットを呼び出すことができます。

window.TriplaBookingWidgetメソッド

window.TriplaBookingWidget
(
 action,
{params},
 'tripla_hotel_code_optional'  // triplabotCode
)

パラメータ（子供区分を利用する場合）

パラメータ（添い寝を利用する場合または子供の宿泊を許可していない場合）

例：

window.TriplaBookingWidget('search_multiple_room',
 {
 checkIn: '2023/07/17',
 checkOut: '2023/07/18',
 rooms: [
 {
 adults: 2  // 1部屋目に2人
 }, 
 {
 adults: 1  // 2部屋目に1人
 }
 ] 
 }, '60afebc3ac8e15c5d0a497b1ec41d611' // 施設のコード
)

// roomsのArrayに部屋ごとの人数をセットすることで、複数部屋の検索が可能となっています。

弊社予約エンジンの施設の設定コードを読み込むことで、window.TriplaBookingWidget メソッドが利用できるようになります。

メソッドを呼ぶ際に該当するパラメータを引数として渡すことで予約ウィジェットを立ち上げることができます。

※ここでの設定コードとは、tripla管理画面の該当施設のページへ移動後、[設定] → [ウィジェット設定] → [設定]で確認できる設定コード全体を意味します。

設定コードサンプル：

注意事項

既存の検索パネルで施設選択できるドロップダウン・リストがある場合(ブランド施設の場合)、選択された施設の検索結果を表示するために、対象施設のtriplabotCodeを動的に設定していただく必要があります。

※triplabotCodeは、tripla管理画面の該当施設のページへ移動後、[設定] > [ウィジェット設定] > [設定]にある設置コード内より確認できます。

検索バーの設定

施設管理画面の [設定] → [ウィジェット設定] → [予約ウィジェット]で設定画面を開きます。

予約ウィジェットを選択し表示させます。

[検索バーを設置]を[オフ]にします。

子供区分を利用する場合と添い寝を利用する場合、または子供の宿泊を許可していない場合、それぞれ設定方法が異なるため、子供設定に応じてご設定ください。

・子供区分を利用する場合

・添い寝を利用する場合（または子供の宿泊を許可していない場合）

子供区分を利用する場合

「子供の区分毎に人数を指定する」の子供設定を行っている場合は、パラメータに区分IDの指定ができます。

子供設定のページで、各区分IDと詳細を確認できます。

子供の区分設定について詳しくは、下のリンクからご確認いただけます。

window.TriplaBookingWidgetメソッドの設定例

window.TriplaBookingWidget('advanced_search', 
{ 
 checkIn: '2021/10/19',
 checkOut: '2021/10/20',
 adults: 3,
 kidsTiers: [{ code: 'A', children: 1 }, { code: 'B', children: 1 }], 
 roomCount: 2, 
 isDayUse: false
},
 '60afebc3ac8e12c5d0a493b1ec41d611')  //  triplabotCode

添い寝を利用する場合（または子供の宿泊を許可していない場合）

以下のいずれかの設定であることを確認します。

・子供の宿泊可否：不可

・子供の宿泊可否：可能、添い寝する子供の人数を指定する

添い寝する子供の人数を指定する　方法について詳しくは、下のリンクからご確認いただけます。

window.TriplaBookingWidgetメソッドの設定例

window.TriplaBookingWidget('advanced_search',
{ 
 checkIn: '2021/10/19',
 checkOut: '2021/10/20',
 rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }], 
 isDayUse: false
}, 
 '60afebc3ac8e12c5d0a493b1ec41d611') //  triplabotCode

日付未定検索設定方法

ねっぱん・らく通・手間いらず・サイトコントローラーをご利用でない施設様のみ設定可能です。

[日付未定検索]をONにすると日付を指定せず検索をかける設定を行う事が可能です。

設定を行うと検索バーに[日付未定]のチェックボックスが表示されます。

検索後の画面は下の画像のように表示されます。

日付未定検索設定についての詳しい情報は下のリンクからご確認ください。

URLパラメーターを使用した立ち上げ

日付未定検索機能を有効にしたうえで、なおかつ検索バーではなく、予約ウィジェットをリンクから立ち上げるように設定されている場合、URLパラメータを指定することで、日付未定検索が有効になった状態（日付未定のスイッチがオンになった状態）で予約ウィジェットを立ち上げることが可能です。

また、上記日付未定検索のパラメータとあわせて、1泊ではなく2泊以上の連泊指定をしたい場合は、&nights=〇のパラメータを追加することで複数泊の条件で予約ウィジェットを立ち上げるように指定することが可能です。