Grids
グリッドはサプライヤーと在庫のリストを表し、インタラクティブで予約可能なグリッドUIを通じて詳細を表示します。 グリッドは、キュレーションリストまたは保存した検索から任意の在庫を表示できます。 ユーザーは、個々の顧客とやり取りするのと同じようにグリッドを操作します。カード1 つの追加機能:
- グリッド内をページ送りするには、
Show more
ボタン (より多くのアイテムが利用可能になったとき)。
上記は、部屋タイプ カードのリストを表示するグリッドの例です。
この記事の残りの部分では、グリッドを作成し、カスタマイズしてユーザーに公開する方法について説明します。
グリッドタイプ
Section titled “グリッドタイプ”グリッドには次の 3 つの種類があります。
キュレーションされたリストグリッド
Section titled “キュレーションされたリストグリッド”これは、キュレーションされたリストの 1 つで収集した在庫を使用し、そのリストをユーザーに表示できる予約可能な旅行在庫に変換するグリッドです。
移動先Inventory > Curated Lists
メインナビゲーションバーから。この例では、Favorites
リストに追加していない場合は、Favorites
、へ検索方法を学ぶために。
- クリック
Actions
ボタンのFavorites
リスト。 - クリック
Create a grid
ボタン。 - 新しいウィンドウが表示され、グリッドに名前を付けることができます。 以下を参照してください。
- クリック
OK
続行するにはボタンをクリックしてください。
グリッドが作成されました。Tools > Grids
メインナビゲーションバーからCurated Grids
タブをクリックして新しいグリッドを表示します。
カスタマイズ
Section titled “カスタマイズ”フォームでは、次の方法でグリッドをカスタマイズできます。
- グリッドの内容を思い出せるように名前を付けます。
- 選択してください カスタマイズ このグリッドに適用したいもの。
- ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
- カードで使用するバッジを選択してください。バッジを使用すると、ユーザーは集計指標に基づいて在庫を比較できます。
eco-friendly
。 - 使用するキーワードをカンマで区切って追加します。 ウェブクローラー。
- ユーザーに表示したい言語でタイトルと説明を追加します。
- クリック
Save
続行するにはボタンをクリックしてください。
上記は、グリッドで利用可能なすべてのアクションを含む画像を示しています。
- アップデートグリッド構成を更新します。
- WinkLinksに追加WinkLinks アカウントにグリッドを追加します。
- 埋め込みこのグリッドをグリッドあなたのウェブサイトに。
- WordPressでの使用使い方を説明しますWordPressプラグインこのグリッドをウェブサイトに埋め込みます。
これらのオプションのいくつかについては、以下で詳しく説明します。
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head> <body> <wink-content-loader layout="LIST" id="9a212b5e-62a7-11ef-ac3f-42004e494300" ></wink-content-loader>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
グリッドをサイトに埋め込む方法は次のとおりです。
- 3 行目は、Wink スタイルをサイトに埋め込む方法を示しています。
- 6行目から9行目は、ウィンクコンテンツローダーWeb コンポーネントに、コードのグリッドを取得するように指示します。
- 11 行目では、Javascript をサイトに埋め込む方法を示しています。
- 13行目は、ウィンクアプリローダーWeb コンポーネントにページレベルの構成設定を取得するように指示します。
保存された検索グリッド
Section titled “保存された検索グリッド”これは、保存した検索クエリの在庫を使用し、検索結果をユーザーに表示できる予約可能な旅行在庫に変換するグリッドです。
移動先Inventory > Saved searches
メインナビゲーションバーから。
まだ保存済みの検索を作成していない場合は、検索方法を学ぶために。
- クリック
Actions
保存した検索のボタンをクリックします。 - クリック
Create a grid
ボタン。 - 新しいウィンドウが表示され、グリッドに名前を付けることができます。 以下を参照してください。
- クリック
OK
続行するにはボタンをクリックしてください。
グリッドが作成されました。Tools > Grids
メインナビゲーションバーからSaved Search Grids
タブをクリックして新しいグリッドを表示します。
カスタマイズ
Section titled “カスタマイズ”フォームでは、次の方法でグリッドをカスタマイズできます。
- グリッドの内容を思い出せるように名前を付けます。
- 選択してください カスタマイズ このグリッドに適用したいもの。
- ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
- カードで使用するバッジを選択してください。バッジを使用すると、ユーザーは集計指標に基づいて在庫を比較できます。
eco-friendly
。 - 使用するキーワードをカンマで区切って追加します。 ウェブクローラー。
- ユーザーに表示したい言語でタイトルと説明を追加します。
- クリック
Save
続行するにはボタンをクリックしてください。
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head> <body> <wink-content-loader layout="LIST" id="be3130d5-62a7-11ef-ac3f-42004e494300" ></wink-content-loader>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
グリッドをサイトに埋め込む方法は次のとおりです。
- 3 行目は、Wink スタイルをサイトに埋め込む方法を示しています。
- 6行目から9行目は、ウィンクコンテンツローダーWeb コンポーネントに、コードのグリッドを取得するように指示します。
- 11 行目では、Javascript をサイトに埋め込む方法を示しています。
- 13行目は、ウィンクアプリローダーWeb コンポーネントにページレベルの構成設定を取得するように指示します。
ランク付けグリッド
Section titled “ランク付けグリッド”ランク付けされたグリッドを作成するには、Tools > Grids
をクリックしてRanked Grid
タブをクリックしますCreate ranked grid
ボタン。
カスタマイズ
Section titled “カスタマイズ”このフォームでは、ランク付けされたグリッドを次の方法でカスタマイズできます。
- 目的地を選択してください。 例:東京。
- グリッドの内容を思い出せるように名前を付けます。 例:東京のエコフレンドリーなホテル
- 選択してください カスタマイズ このグリッドに適用したいもの。
- ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
- プロパティを並べ替える特性を選択します。 例:環境に優しい。
- 使用するキーワードをカンマで区切って追加します。 ウェブクローラー。
- ユーザーに表示したい言語でタイトルと説明を追加します。
- クリック
Save
続行するにはボタンをクリックしてください。
ランク付けされたグリッドを保存すると、ランク付けされたグリッド ページにリダイレクトされ、グリッドを世界と共有できるようになります。
上記は、ランク付けされたグリッドで利用可能なすべてのアクションを含む画像を示しています。
- アップデートグリッド構成を更新します。
- WinkLinksに追加ランク付けされたグリッドを WinkLinks アカウントに追加します。
- 埋め込みこのグリッドをグリッドあなたのウェブサイトに。
- WordPressでの使用使い方を説明しますWordPressプラグインこのカードをウェブサイトに埋め込みます。
これらのオプションのいくつかについては、以下で詳しく説明します。
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head> <body> <wink-content-loader layout="RANKED" id="2483d55e-62a5-11ef-ac3f-42004e494300" ></wink-content-loader>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
グリッドをサイトに埋め込む方法は次のとおりです。
- 3 行目は、Wink スタイルをサイトに埋め込む方法を示しています。
- 6行目から9行目は、ウィンクコンテンツローダーWeb コンポーネントを使用して、コードのランク付けされたグリッドを取得するように指示します。
- 11 行目では、Javascript をサイトに埋め込む方法を示しています。
- 13行目は、ウィンクアプリローダーWeb コンポーネントにページレベルの構成設定を取得するように指示します。
グリッドを管理したい開発者は、開発者 > API > 在庫。
- 当社のコレクションについてさらに詳しくWebコンポーネント。
- 詳細はこちらウィンクWordPressプラグイン。