網格

網格代表供應商和庫存的清單，並透過互動式、可預訂的網格介面展示詳細資訊。網格支援顯示您精選清單或已儲存搜尋中的任何庫存。使用者與網格的互動方式與個別的卡片相同，且多了一項功能：

點擊 顯示更多 按鈕進行分頁瀏覽（當有更多項目可用時）。

上圖為我們的網格範例，展示一系列房型卡片。

本文接下來將引導您如何建立、客製化並向使用者展示網格。

網格類型

網格有三種類型：

基於精選清單的網格。
基於已儲存搜尋的網格。
基於地點和排序條件的網格（即排名網格）。

精選清單網格

此網格使用您在精選清單中收集的庫存，並將清單轉換為可供使用者預訂的旅遊庫存。

建立

從主選單導覽至 庫存 > 精選清單。本範例將使用您的 收藏 清單。如果您尚未將任何項目加入 收藏，請前往搜尋了解如何操作。

點擊 收藏 清單上的 操作 按鈕。
點擊 建立網格 按鈕。
將顯示新視窗，允許您為網格命名。詳見下方。
點擊 確定 按鈕繼續。

您的網格已建立。從主選單導覽至 工具 > 網格，並點擊 精選網格 分頁查看您的新網格。

客製化

表單讓您以以下方式客製化網格：

為網格命名，方便您記憶網格內容。
選擇您想套用於此網格的客製化。
選擇使用者初次看到的卡片面向，預設為該庫存的原生面向。
選擇卡片上要使用的徽章。徽章可讓使用者依聚合指標（如 環保）比較庫存。
新增以逗號分隔的關鍵字，供網路爬蟲使用。
新增使用者可見的標題與描述，並指定語言。
點擊 儲存 按鈕繼續。

上圖展示網格可用的所有操作：

更新更新您的網格設定。
加入 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行示範如何使用 wink-content-loader Web 元件，並告訴它為您的程式碼抓取網格。
第11行示範如何將我們的 Javascript 嵌入您的網站。
第13行示範如何嵌入 wink-app-loader Web 元件，並告訴它抓取您的頁面層級設定偏好。

已儲存搜尋網格

此網格使用您已儲存的搜尋查詢中的庫存，並將搜尋結果轉換為可供使用者預訂的旅遊庫存。

建立

從主選單導覽至 庫存 > 已儲存搜尋。如果您尚未建立已儲存搜尋，請前往搜尋了解如何操作。

點擊您已儲存搜尋上的 操作 按鈕。
點擊 建立網格 按鈕。
將顯示新視窗，允許您為網格命名。詳見下方。

點擊 確定 按鈕繼續。

您的網格已建立。從主選單導覽至 工具 > 網格，並點擊 已儲存搜尋網格 分頁查看您的新網格。

客製化

表單讓您以以下方式客製化網格：

為網格命名，方便您記憶網格內容。
選擇您想套用於此網格的客製化。
選擇使用者初次看到的卡片面向，預設為該庫存的原生面向。
選擇卡片上要使用的徽章。徽章可讓使用者依聚合指標（如 環保）比較庫存。
新增以逗號分隔的關鍵字，供網路爬蟲使用。
新增使用者可見的標題與描述，並指定語言。
點擊 儲存 按鈕繼續。

嵌入

<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行示範如何使用 wink-content-loader Web 元件，並告訴它為您的程式碼抓取網格。
第11行示範如何將我們的 Javascript 嵌入您的網站。
第13行示範如何嵌入 wink-app-loader Web 元件，並告訴它抓取您的頁面層級設定偏好。

排名網格

建立

透過導覽至 工具 > 網格 並點擊 排名網格 分頁，點擊 建立排名網格 按鈕來建立排名網格。

客製化

表單讓您以以下方式客製化排名網格：

選擇目的地。例如：東京。
為網格命名，方便您記憶網格內容。例如：東京環保飯店。
選擇您想套用於此網格的客製化。
選擇使用者初次看到的卡片面向，預設為該庫存的原生面向。
選擇用來排序物件的特性。例如：環保程度。
新增以逗號分隔的關鍵字，供網路爬蟲使用。
新增使用者可見的標題與描述，並指定語言。
點擊 儲存 按鈕繼續。

儲存排名網格後，系統會導向您的排名網格頁面，您的網格即可分享給全世界。

上圖展示排名網格可用的所有操作：

更新更新您的網格設定。
加入 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行示範如何使用 wink-content-loader Web 元件，並告訴它為您的程式碼抓取排名網格。
第11行示範如何將我們的 Javascript 嵌入您的網站。
第13行示範如何嵌入 wink-app-loader Web 元件，並告訴它抓取您的頁面層級設定偏好。

API

想管理網格的開發者可前往開發者 > API > 庫存。

網格

網格類型

精選清單網格

建立

客製化

分享

嵌入

已儲存搜尋網格

建立

客製化

分享

嵌入

排名網格

建立

客製化

分享

嵌入

API

延伸閱讀