Web 组件

Web 组件是一项标准，它允许您将完整的 JavaScript 功能集成到您的网站中，而无需了解任何代码。得益于这项出色的技术，您可以轻松嵌入 Wink 旅行清单。本文将引导您了解我们收集的 Web 组件，并向您展示如何使用它们。

嵌入眨眼

您必须在想要显示我们的某个 Web 组件的任何页面中包含三件内容。

包括我们的样式表。
包括我们的 Javascript。
包括我们的应用程序加载器。

样式表

将我们的 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>

您的网站现已准备就绪并能够显示我们的网络组件。

成分

请阅读下面有关我们的组件库的信息。

应用程序加载器

加载器负责保持状态并管理组件之间的交互。（将其包含在我们的 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 组件库的核心。它负责显示您的库存（卡片、网格、地图）。

可用属性：

布局
ID
种类

属性sort仅在布局为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>

可以找到以下样本牌，网格和地图。

抬头

Lookup 可以与你的某个排名网格完美结合。它允许你的用户搜索酒店和目的地，并且网格会根据搜索结果进行更新。

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

单击上面的组件将打开一个模式，您可以在其中输入要搜索的目的地或酒店。

行程

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

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

行程网络组件

单击上面的按钮将打开一个模式，让您更新行程。

搜索

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

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

单击上面的按钮将打开一个模式，让您更新行程。

行程单

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

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

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

帐户

帐户按钮允许您将 Wink 身份验证添加到您的网站。

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

当用户未通过身份验证时，点击此按钮将转发用户进行身份验证。当用户通过身份验证后，将显示用户的个人资料图标。

当您单击该按钮时，它会打开用户特定的下拉菜单。

嵌入 TripPay

您必须在想要使用 TripPay 支付网络组件的任何页面中包含两件事。

包括我们的样式表。
包括我们的 Javascript。

样式表

将我们的 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>

您的网站现已准备就绪并能够显示我们的网络组件。

成分

支付

支付组件可让您告知 TripPay 旅行者想要购买某些东西以及这些物品的规则和价格。

该小部件有一个必需属性：

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

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

:::注意了解如何生成预订合同id，阅读指南：与 TripPay 集成. :::

该小部件准备执行合同并显示付款详情（图1）以便用户完成预订。