Grids

グリッドはサプライヤーと在庫のリストを表し、インタラクティブで予約可能なグリッドUIを通じて詳細を表示します。グリッドは、キュレーションリストまたは保存した検索から任意の在庫を表示できます。ユーザーは、個々の顧客とやり取りするのと同じようにグリッドを操作します。カード1 つの追加機能:

グリッド内をページ送りするには、Show more ボタン（より多くのアイテムが利用可能になったとき）。

上記は、部屋タイプカードのリストを表示するグリッドの例です。

この記事の残りの部分では、グリッドを作成し、カスタマイズしてユーザーに公開する方法について説明します。

グリッドタイプ

グリッドには次の 3 つの種類があります。

グリッドは厳選リスト。
グリッドは保存した検索。
場所と並べ替えの基準に基づいたグリッドグリッド（つまり、ランク付けされたグリッド）。

キュレーションされたリストグリッド

これは、キュレーションされたリストの 1 つで収集した在庫を使用し、そのリストをユーザーに表示できる予約可能な旅行在庫に変換するグリッドです。

作成する

移動先Inventory > Curated Listsメインナビゲーションバーから。この例では、Favoritesリストに追加していない場合は、Favorites、へ検索方法を学ぶために。

クリック Actions ボタンの Favorites リスト。
クリック Create a grid ボタン。
新しいウィンドウが表示され、グリッドに名前を付けることができます。 以下を参照してください。
クリック OK 続行するにはボタンをクリックしてください。

グリッドが作成されました。Tools > GridsメインナビゲーションバーからCurated Gridsタブをクリックして新しいグリッドを表示します。

カスタマイズ

フォームでは、次の方法でグリッドをカスタマイズできます。

グリッドの内容を思い出せるように名前を付けます。
選択してくださいカスタマイズこのグリッドに適用したいもの。
ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
カードで使用するバッジを選択してください。バッジを使用すると、ユーザーは集計指標に基づいて在庫を比較できます。 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 コンポーネントにページレベルの構成設定を取得するように指示します。

保存された検索グリッド

これは、保存した検索クエリの在庫を使用し、検索結果をユーザーに表示できる予約可能な旅行在庫に変換するグリッドです。

作成する

移動先Inventory > Saved searchesメインナビゲーションバーから。まだ保存済みの検索を作成していない場合は、検索方法を学ぶために。

クリック Actions 保存した検索のボタンをクリックします。
クリック Create a grid ボタン。
新しいウィンドウが表示され、グリッドに名前を付けることができます。 以下を参照してください。

クリック OK続行するにはボタンをクリックしてください。

グリッドが作成されました。Tools > GridsメインナビゲーションバーからSaved Search Gridsタブをクリックして新しいグリッドを表示します。

カスタマイズ

フォームでは、次の方法でグリッドをカスタマイズできます。

グリッドの内容を思い出せるように名前を付けます。
選択してくださいカスタマイズこのグリッドに適用したいもの。
ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
カードで使用するバッジを選択してください。バッジを使用すると、ユーザーは集計指標に基づいて在庫を比較できます。 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 コンポーネントにページレベルの構成設定を取得するように指示します。

ランク付けグリッド

作成する

ランク付けされたグリッドを作成するには、Tools > GridsをクリックしてRanked GridタブをクリックしますCreate ranked grid ボタン。

カスタマイズ

このフォームでは、ランク付けされたグリッドを次の方法でカスタマイズできます。

目的地を選択してください。 例：東京。
グリッドの内容を思い出せるように名前を付けます。 例：東京のエコフレンドリーなホテル
選択してくださいカスタマイズこのグリッドに適用したいもの。
ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
プロパティを並べ替える特性を選択します。 例：環境に優しい。
使用するキーワードをカンマで区切って追加します。ウェブクローラー。
ユーザーに表示したい言語でタイトルと説明を追加します。
クリック 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

グリッドを管理したい開発者は、開発者 > API > 在庫。

さらに読む

当社のコレクションについてさらに詳しくWebコンポーネント。
詳細はこちらウィンクWordPressプラグイン。