网格

网格表示供应商和库存的列表，并通过交互式、可预订的网格界面展示详细信息。网格支持显示您精选列表或已保存搜索中的任何库存。用户与网格的交互方式与单个卡片相同，且多了一个功能：

通过点击 显示更多 按钮进行分页（当有更多项目可用时）。

上图是一个示例网格，展示了一系列房型卡片。

本文余下部分将引导您如何创建、定制并向用户展示网格。

网格类型

网格有三种类型：

基于精选列表的网格。
基于已保存搜索的网格。
基于位置和排序标准的网格（即排名网格）。

精选列表网格

这是一个使用您在精选列表中收集的库存，并将列表转换为可预订的旅游库存，供您向用户展示的网格。

创建

从主导航栏进入 库存 > 精选列表。本示例中，我们将使用您的 收藏夹 列表。如果您还未向 收藏夹 添加任何内容，请访问搜索了解如何操作。

点击 收藏夹 列表上的 操作 按钮。
点击 创建网格 按钮。
会弹出新窗口，允许您为网格命名。见下文。
点击 确定 按钮继续。

您的网格已创建。请从主导航栏进入 工具 > 网格，点击 精选网格 标签查看您的新网格。

定制

表单允许您通过以下方式定制网格：

为网格命名，方便您记住网格内容。
选择您想应用于此网格的定制。
选择用户首次看到的卡片正面。默认是该库存的原生正面。
选择卡片上要使用的徽章。徽章让用户可以基于综合指标（如“环保”）比较库存。
添加关键词，使用逗号分隔，这些关键词将被网络爬虫使用。
添加用户希望看到的语言的标题和描述。
点击 保存 按钮继续。

上图展示了网格的所有可用操作：

更新更新您的网格配置。
添加到 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 > 库存。

进一步阅读

了解更多关于我们的一系列Web 组件。
了解更多关于Wink WordPress 插件。