Webコンポーネント

Webコンポーネントコーディングの知識がなくても、JavaScriptの機能をウェブサイトに統合できる標準規格です。この優れた技術のおかげで、Winkの旅行情報を簡単に埋め込むことができます。この記事では、Winkのウェブコンポーネントコレクションを段階的に紹介し、その使い方をご紹介します。

ウィンクを埋め込む

当社の Web コンポーネントのいずれかを表示するページには、次の 3 つの要素を含める必要があります。

スタイルシートを含めます。
Javascript を含めます。
アプリケーションローダーを含めます。

スタイルシート

ドキュメントのヘッダーに CSS スタイルを含めます。

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

ジャバスクリプト

ドキュメントの下部に Javascript を含めます。(終了タグのすぐ上に置くことをお勧めします）。

<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コンポーネントライブラリの中核を成すものです。インベントリ（カード、グリッド、マップ）の表示を担います。

利用可能な属性:

レイアウト
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 支払い Web コンポーネントを使用するページには、次の 2 つの項目を含める必要があります。

スタイルシートを含めます。
Javascript を含めます。

スタイルシート

ドキュメントのヘッダーに CSS スタイルを含めます。

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

ジャバスクリプト

ドキュメントの下部に Javascript を含めます。(終了タグのすぐ上に置くことをお勧めします）。

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

これでサイトの準備が整い、Web コンポーネントを表示できるようになりました。

コンポーネント

支払い

支払いコンポーネントを使用すると、旅行者が何かを購入したいということと、それらのアイテムのルールと価格を TripPay に通知できます。

ウィジェットには必須の属性が 1 つあります。

id実行する予約契約の識別子。

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

ウィジェットは契約の実行を準備し、支払いの詳細を表示します（図1）ユーザーに予約を完了するよう指示します。