網頁元件

Web Components 是一項標準，讓您能將整個 Javascript 功能整合到您的網站中，而不需要懂程式碼。多虧了這項酷炫的技術，您可以輕鬆地嵌入 Wink 旅遊庫存。本文將引導您了解我們的網頁元件集合，並示範如何使用它們。

嵌入 Wink

在您想要顯示我們任一網頁元件的頁面中，您必須包含三樣東西。

引入我們的樣式表。
引入我們的 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>

您的網站現在已準備好，可以顯示我們的網頁元件。

元件

請參閱下方我們的元件庫說明。

應用程式載入器

載入器負責維護狀態並管理我們元件間的互動。（請將它放在 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>

內容載入器

內容載入器是我們網頁元件庫的核心。它負責顯示您的庫存（卡片、格子、地圖）。

可用屬性：

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>

您可以在 cards、grids 和 maps 找到範例。

查詢元件

查詢元件與您的排名格子搭配使用效果極佳。它讓使用者搜尋飯店和目的地，格子會根據搜尋結果更新。

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

樣式表

在文件的 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>

您的網站現在已準備好，可以顯示我們的網頁元件。

元件

付款

付款元件讓您通知 TripPay 旅客想購買的商品及其規則和價格。

此元件有一個必填屬性：

id 您想執行的訂單合約識別碼。

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

此元件會準備合約執行並向使用者顯示付款細節 (圖 1)，以完成訂單。

錯誤

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

可用性

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

已移除

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

自訂設定

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

應用程式

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