网格

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

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

上图是我们展示房型卡片列表的网格示例。

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

网格类型

网格有三种类型：

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

精选列表网格

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

创建

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

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

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

定制

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

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

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

更新更新您的网格配置。
添加到 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 组件，并指示其获取您的页面级配置偏好。

已保存搜索网格

这是一个使用您已保存搜索查询中的库存，并将搜索结果转换为可预订旅游库存，供您向用户展示的网格。

创建

从主导航栏进入 列表 > 动态。如果您还未创建已保存搜索，请访问搜索了解如何操作。

Create saved search grid — *创建已保存搜索网格表单*

点击您已保存搜索上的 操作 按钮。
点击 创建网格 按钮。
将弹出新窗口，允许您为网格命名。见下文。

点击 确定 按钮继续。

您的网格已创建。请从主导航栏进入 网格，点击 搜索 标签查看您的新网格。

定制

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

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

嵌入

<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 插件。