Grids

網格代表供應商和庫存的列表，並透過互動式、可預訂的網格 UI 顯示詳細資訊。網格支援顯示您精選清單或已儲存搜尋中的任何庫存。使用者與網格的互動方式與她與個人互動的方式相同卡片還有一個附加功能：

透過點擊Show more 按鈕（當有更多商品可用時）。

上面是我們的網格顯示房間類型卡列表的範例。

本文的其餘部分將引導您了解如何建立、自訂並向使用者展示網格。

網格類型

網格有三種：

基於網格精選列表。
基於網格已儲存的搜尋。
基於位置和排序標準的網格（即排名網格）。

精選列表網格

這是一個網格，它使用您在其中一個精選清單中收集的庫存，並將該清單轉換為可向使用者顯示的可預訂旅行庫存。

創造

導航至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 行展示如何使用wink-內容載入器 Web 元件並告訴它要為您的程式碼取得一個網格。
第 11 行向您展示如何將我們的 Javascript 嵌入到您的網站。
第 13 行展示如何嵌入wink-app-loader 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 行展示如何使用wink-內容載入器 Web 元件並告訴它要為您的程式碼取得一個網格。
第 11 行向您展示如何將我們的 Javascript 嵌入到您的網站。
第 13 行展示如何嵌入wink-app-loader Web 元件並告訴它要取得您的頁面層級配置首選項。

排名網格

創造

透過導航到創建排名網格Tools > Grids 然後點擊Ranked Grid 選項卡。點選Create ranked grid 按鈕。

客製化

此表單可讓您透過以下方式自訂排名網格：

選擇目的地。 例如。東京。
給它一個名字，以便您記住網格的含義。 例如。東京的環保飯店
選擇客製化您想要套用到這個網格。
選擇您希望使用者先看到的初始卡面。預設情況下，它是該庫存的原生面。
選擇按什麼特徵對屬性進行排序。 例如。環保。
新增關鍵字，以逗號分隔，用於網路爬蟲。
使用您希望用戶看到的語言添加標題和描述。
點選 Save 按鈕繼續。

儲存排名網格後，您將被重新導向到排名網格頁面，現在可以與全世界分享您的網格了。

上面顯示了您的 rankd 網格的所有可用操作的圖像：

更新更新您的網格配置。
加入 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-內容載入器 Web 元件並告訴它要為您的程式碼取得排名網格。
第 11 行向您展示如何將我們的 Javascript 嵌入到您的網站。
第 13 行展示如何嵌入wink-app-loader Web 元件並告訴它要取得您的頁面層級配置首選項。

API

想要管理網格的開發人員可以前往開發人員 > API > 庫存。

進一步閱讀

進一步了解我們的收藏Web 元件。
詳細了解Wink WordPress 插件。