検索バーの設置

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

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

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

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

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

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

​

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

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

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

検索バー設定ページ

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

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

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

設定	表示
ページ中央​​	ページの中央に配置されます。
ページ下部固定	左下に配置されます。スクロールをすると追随されます。​
CSSセレクタでの指定	CSSセレクタを入力する事で、HP側のCSSで場所やサイズの指定が可能です。　CSSセレクタでの指定を指定した場合のみ表示されます。また、CSSセレクタの設定はHP制作会社での作業となるので、HP制作会社に問い合わせをを行ってください。

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

表示/除外	表示：検索バーを表示させます。 除外：検索バーを非表示にします。
マッチさせるURLL文字列	URLを入力します。
パターンマッチ	完全一致：入力したURLが全て一致している場合の設定が可能です。 前方一致：入力したURLの前方が一致している場合の設定が可能です。 含む：入力したURLが含まれていた場合の設定が可能です。
表示位置	ページ中央	ページの中央に配置されます。
	ページ下部固定	左下に配置されます。スクロールをすると追随されます。​
	CSSセレクタでの指定	CSSセレクタを入力する事で、HP側のCSSで場所やサイズの指定が可能です。　CSSセレクタでの指定を指定した場合のみ表示されます。また、CSSセレクタの設定はHP制作会社での作業となるので、HP制作会社に問い合わせをを行ってください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

既存の検索パネルから予約ウィジェットを呼び出す

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

window.TriplaBookingWidgetメソッド

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

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

action	'advanced_search'
params	次の属性を持つオブジェクト
	checkIn:	必須：'yyyy/mm/dd' フォーマットでチェックイン日の指定
	checkOut:	必須：'yyyy/mm/dd' フォーマットでチェックアウト日の指定
	adults:	必須：大人人数の指定
	kidsTiers: [{ code: 'A', children: 1 }]:	任意：子供の区分と人数を配列で指定 code は区分IDを指定
	roomCount:	任意：部屋数の指定。デフォルトでは1が設定
	isDayUs:	任意：日帰りプランを検索する場合に指定。 デフォルトではfalse isDayUse値がtrueの場合、チェックアウト日は不要です。（指定した場合には、無視されます）
'tripla_hotel_code_optional'	任意：ブランド施設の場合には、予約ウィジェットを起動する施設のtriplabotCodeの指定が必要です。 デフォルトでは、 設定コードのtriplabotCodeが指定されています。

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

action	'advanced_search'
params	次の属性を持つオブジェクト
	checkIn:	必須：'yyyy/mm/dd' フォーマットでチェックイン日の指定
	checkOut:	必須：'yyyy/mm/dd' フォーマットでチェックアウト日の指定
	rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }]	部屋毎の大人人数、子供人数を配列で指定 大人の人数は必須 最低1部屋は必須
	isDayUse:	任意：日帰りプランを検索する場合に指定。 デフォルトではfalse isDayUse値がtrueの場合、チェックアウト日は不要です。（指定した場合には、無視されます）
'tripla_hotel_code_optional'	任意：ブランド施設の場合には、予約ウィジェットを起動する施設のtriplabotCodeの指定が必要です。 デフォルトでは、 設定コードの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パラメータを指定することで、日付未定検索が有効になった状態（日付未定のスイッチがオンになった状態）で予約ウィジェットを立ち上げることが可能です。

種別	パラメーター
パラメーター	/?tripla_booking_widget_open=search&search_type=undated
サブドメインイ利用時のパラメーター	/#/booking/result?code=[triplaボットコード]&search_type=undated

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

​

権限	作業・閲覧可否
ブランド管理者	施設管理画面から作業・閲覧可
施設管理者	作業・閲覧可
施設運営者	作業・閲覧不可