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>

可以找到以下樣本牌，網格和地圖。

抬頭

尋找功能可以與您的一個排名網格完美協同工作。它允許您的用戶搜尋酒店和目的地，並且網格根據他們的搜尋結果進行更新。

<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） 以便用戶完成預訂。