Grids
网格代表供应商和库存列表，并通过可预订的交互式网格 UI 显示详细信息。 网格支持显示您精选列表或已保存搜索中的任何库存。 用户与网格的交互方式与与个人的交互方式相同卡片还有一个附加功能：
- 通过点击
Show more按钮 （当有更多商品可用时）。
上面是我们的网格显示房间类型卡列表的示例。
本文的其余部分将引导您了解如何创建、自定义和向用户展示网格。
网格有三种类型：
精选列表网格
Section titled “精选列表网格”这是一个网格，它使用您在其中一个精选列表中收集的库存，并将该列表转换为可向用户显示的可预订旅行库存。
导航至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-loaderWeb 组件并告诉它获取您的页面级配置首选项。
已保存的搜索网格
Section titled “已保存的搜索网格”这是一个网格，它使用您保存的搜索查询中的库存，并将搜索结果转换为可向用户显示的可预订旅行库存。
导航至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-loaderWeb 组件并告诉它获取您的页面级配置首选项。
通过导航到创建排名网格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-loaderWeb 组件并告诉它获取您的页面级配置首选项。
想要管理网格的开发人员可以前往开发人员 > API > 库存。
- 详细了解我们的收藏Web 组件。
- 详细了解Wink WordPress 插件。