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 留空。

可用的 layout 類型：

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

可用的 sort 類型：

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>

在任何行程元件中更改行程，都會觸發行程更新事件，影響頁面上目前顯示的庫存。

帳戶

帳戶按鈕讓您將 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)，以完成訂單。

錯誤

若您在嵌入我們的 Web 元件時（無論是在 WinkLinks 或您自己的網站）看到錯誤訊息，可能有以下幾種原因：

可用性

庫存可能已不再可用。請前往 Wink Studio 檢查該「卡片」的狀態是否為可用。若不是，會顯示為紅色。此時您可以等待供應商重新開放，或從您的清單中移除。

已移除

庫存可能已被移除。請前往 Wink Studio 檢查該「卡片」的狀態是否為可用。若不是，會顯示為紅色。此時您可以等待供應商重新開放，或從您的清單中移除。

自訂設定

您可能不小心移除了與庫存搭配使用的自訂設定。請確認自訂設定仍存在，若缺少請重新設定。

應用程式

此項僅供網頁開發者使用。若您不小心移除了應用程式，導致 client ID 不再可用，請建立新的應用程式並使用新的 client ID 來嵌入我們的 Web 元件。