コンテンツまでスキップ
  • 検索フィールドが空なので、候補はありません。

ウィジェット(予約画面)に表示する内容を変更する方法

JTB BÓKUNのウィジェット画面に表示される内容のアレンジ方法を解説

JTB BÓKUNのウィジェット(予約画面)の表示内容について、デフォルトでは、商品設定において入力された全項目の内容が表示されます。また、「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などの文言がデフォルトとなっています。

下記ではそれぞれの表示変更について説明します。

1.商品ページに表示される項目の非表示の設定方法

2.カレンダーの表示を変更する方法

3.商品リスト画面の表示を変更する方法

4.「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などのデフォルト文言の変更方法

1.商品ページに表示される項目の非表示の設定方法

商品ページのウィジェット画面には、写真、難易度、所要時間、含まれるもの、キャンセルポリシーなどの項目が表示されています。そのうちの一部の項目を非表示に設定したい場合、予約チャンネルの編集より非表示設定ができます。

①設定>販売関連>予約チャンネルより該当予約チャンネルの編集画面を開きます。

②ウィジェット>商品ページをクリックし、非表示にしたい項目のチェックを外すと、該当項目が非表示になります。

③右側にあるプレビュー画面より確認してください。

【注意】これらの設定は予約チャンネルに対して行うため、この予約チャンネルで生成したすべてのウィジェットに対して適用されます。

商品ページ表示設定画面

 

2.カレンダーの表示を変更する方法

設定>販売関連>予約チャンネル>ウィジェット>カレンダー画面には、以下の設定ができます。

  • 初期設定のカテゴリが自動的に選択されます:チェックを入れた場合、ウィジェットを開く際に料金カテゴリがあらかじめ選択された状態で表示されます。
  • 完売を表示する:チェックを入れた場合、完売した日付の右上の三角マークが赤で表示されます。
  • すべての開始時刻の料金・タイトルを表示する:チェックを入れた場合、カレンダー画面より日付を選択した次の画面に料金タイトルが表示されます。
  • カレンダーに料金を表示:チェックを入れた場合、日付の下に金額が表示されます。
  • 日曜日スタートのカレンダー表示:チェックを入れた場合、カレンダー表記が日曜日スタートとなります。
  • 残りのスロットが少なくなったら警告を表示する:チェックを入れた場合、「しきい値の警告」に入力されている数より在庫が少ない場合、日付の右上の三角マークが黄色で表示され、該当日付/開始時間を選択した際に画面上に「残りわずか」の文言が表示されます。(残数は表示されません)

【注意】これらの設定は予約チャンネルに対して行うため、この予約チャンネルで生成したすべてのウィジェットに対して適用されます。

カレンダー表示設定画面

 

また、「残りわずか」の表記設定について、商品ごとにしきい値の設定もできます。

設定方法は、商品の編集画面>アドバンス>予約画面の設定>この商品に残数が少ない表示を設定するをオンにして、残数を入力します。

予約チャンネルと商品設定の両方に「しきい値」が設定されている場合、商品に設定されているしきい値が優先して適用されます。

商品別しきい値設定画面

 

3.商品リスト画面の表示を変更する方法

設定>販売関連>予約チャンネル>ウィジェット>商品リストでは、以下の設定ができます。

  • 商品リスト検索可能にする:オンにすると、リスト上部に検索欄が表示されます。詳細はこちらをご参考ください。
  • ページ上の商品数:1ページあたりの表示する商品数を設定することができます。
  • 商品リストでエクスペリエンスが選択される場合、何を開く必要がありますか?:商品ページを開くか、または予約カレンダーのみ表示させるかを選択することができます。
  • 商品リスト項目のレイアウトを選択する:タイル状の並び、またはリスト式の並びを選択することができます。
  • 商品リストに表示される内容をカスタマイズする:
    ①簡単な説明を表示:商品の概要の表示
    ②サプライヤー名を表示する:商品の提供事業者名の表示
商品リスト表示設定画面

 

4.「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などのデフォルト文言の変更方法

まず、ウィジェット画面に表示される料金カテゴリを選択する項目の「利用人数」という文言は商品ごとに変更できます。

商品の編集画面>アドバンス>予約画面の設定>顧客の選択種別より該当商品に近い選択肢を選んでください。

顧客選択種別設定画面

 

また、CSSとSASSを使って、ウィジェット(予約画面)の一部の文言や色などをカスタマイズすることができます。※ウィジェットのカスタマイズドキュメントはこちらをご参照ください。

書き換えたいelementの名称は、デベロッパーツールなどでHTMLコードよりご確認ください。Google Chromeであれば該当のホームページで右クリックで「検証」をクリックして開くか、F12で開くこともできます。

【注意】sc-abCDe cbdEFg形式のクラス名は、自動生成されたものであり、変更されることがありますので絶対に使用しないでください

ただし、CSSやSASSなどをご利用される場合、以下についてご注意ください:

  • ウィジェットで表示される情報は、通常、商品登録のデータに紐づいています。従いまして、この機能を用いてウィジェットで表示される内容自体を書き換えますと、商品登録データから紐づいた情報とは異なるものが表示されることになります。例えば、商品登録データである多言語対応の情報などが表示できなくなりますのでご注意ください。
  • この変更を行うことで、予約プロセスに影響を与える可能性がありますのでご注意ください。
  • 変更内容を十分にテストして使用してください。

下記では「予約内容」の変更方法を説明します。

①設定>販売関連>予約チャンネルより該当予約チャンネルの編集画面を開きます。

②ウィジェット>テーマをクリックします。

③「アドバンスオプションを表示する」にチェックし、以下を入力すると変更が出来ます。赤字の部分は内容に応じて文言の変更をしてください。

.SummaryHeader:after{
 content:"(旅行代金および出発日)";
 visibility:visible;}
.SummaryTitle {visibility:hidden;}
CSS文言変更設定画面