Web 组件

Web 组件是一项标准，允许您将完整的 JavaScript 功能集成到您的网站中，而无需编写代码。得益于这项酷炫的技术，您可以轻松嵌入 Wink 旅游库存。本文将引导您了解我们的 Web 组件集合，并展示如何使用它们。

嵌入 Wink

在任何想要显示我们 Web 组件的页面中，您需要包含三样东西。

引入我们的样式表。
引入我们的 Javascript。
引入我们的应用加载器。

样式表

在文档的 head 中引入我们的 CSS 样式。

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

在文档底部引入我们的 Javascript。（建议放在 body 结束标签之前）

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

您的网站现在已准备好显示我们的 Web 组件。

组件

请阅读下面关于我们组件库的介绍。

应用加载器

加载器负责维护状态并管理组件间的交互。（请将其放在 Javascript 之后）

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

内容加载器

内容加载器是我们 Web 组件库的核心，负责显示您的库存（卡片、网格、地图）。

可用属性：

layout
id
sort

属性 sort 仅在 layout 为 RANKED 且您不想使用现有排名网格时可用。此时请将 id 留空。

可用布局类型：

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

可用排序类型：

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

示例可在卡片、网格和地图中找到。

查找

查找组件与您的排名网格配合使用效果极佳。它允许用户搜索酒店和目的地，网格会根据搜索结果动态更新。

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

点击上方组件会打开一个模态窗口，允许您输入搜索的目的地或酒店。

行程

行程按钮会在按钮上显示当前行程。点击后，完整的行程选择器会以模态窗口形式显示。

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

行程 Web 组件

点击上方按钮会打开一个模态窗口，允许您更新行程。

搜索

搜索是行程选择器的图标按钮。点击后，完整的行程选择器会以模态窗口形式显示。

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

点击上方按钮会打开一个模态窗口，允许您更新行程。

行程表单

行程组件显示一个用户可以交互的行程表单。

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *行程表单 Web 组件*

在任何我们的行程组件中更改行程，都会触发行程更新事件，更新当前页面上显示的库存。

账户

账户按钮允许您为网站添加 Wink 认证功能。

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

当用户未认证时，点击按钮会引导用户进行认证。认证后，按钮会显示用户的头像图标。

点击按钮会打开用户专属的下拉菜单。

嵌入 TripPay

在任何想要使用 TripPay 支付 Web 组件的页面中，您需要包含两样东西。

引入我们的样式表。
引入我们的 Javascript。

样式表

在文档的 head 中引入我们的 CSS 样式。

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

在文档底部引入我们的 Javascript。（建议放在 body 结束标签之前）

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

您的网站现在已准备好显示我们的 Web 组件。

组件

支付

支付组件让您通知 TripPay 旅客想购买的商品及其规则和价格。

该组件有一个必需属性：

id 您想执行的预订合同的标识符。

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

该组件准备合同执行并向用户显示支付详情 (图 1)，以完成预订。

错误

如果在 WinkLinks 或您自己的网站嵌入我们的 Web 组件时遇到错误提示，可能是以下原因：

可用性

库存可能不再可用。请访问 Wink Studio 检查“卡片”的状态是否可用。如果不可用，状态会显示为红色。此时，您可以等待供应商重新开放，或从列表中移除。

已移除

库存可能已被移除。请访问 Wink Studio 检查“卡片”的状态是否可用。如果不可用，状态会显示为红色。此时，您可以等待供应商重新开放，或从列表中移除。

自定义

您可能不小心移除了与库存配套定义的自定义设置。请确保自定义设置仍然存在，若缺失请重新设置。

应用

此项仅针对网页开发者。如果您不小心删除了应用，导致客户端 ID 不再可用，请创建新应用并使用新的客户端 ID 嵌入我们的 Web 组件。