コンテンツにスキップ

Webコンポーネント

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

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

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

ドキュメントのヘッダーに 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>
ルックアップWebコンポーネント
ルックアップWebコンポーネント

上記のコンポーネントをクリックすると、検索する目的地またはホテルを入力できるモーダルが開きます。

検索モーダル
結果を表示する検索モーダル

旅程ボタンをクリックすると、現在の旅程が表示されます。クリックすると、モーダル形式で旅程選択ツールが表示されます。

<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>
旅程フォームWebコンポーネント
旅程フォームのWebコンポーネント

いずれかの旅程コンポーネントで旅程を変更すると、ページに現在表示されているすべての在庫に対して旅程更新イベントがトリガーされます。

アカウント ボタンを使用すると、サイトに Wink 認証を追加できます。

<html>
<body>
<wink-account></wink-account>
</body>
</html>
アカウントWebコンポーネント
アカウントボタンのWebコンポーネント

ユーザーが認証されていない場合、ボタンをクリックすると、ユーザーは認証画面に転送されます。ユーザーが認証されると、ユーザーのプロフィールアイコンが表示されます。

認証時のアカウントボタン
アカウントボタン(認証済み)Webコンポーネント

ボタンをクリックすると、ユーザー固有のドロップダウンが開きます。

認証時のアカウントボタン
アカウントボタン(開く)Webコンポーネント

TripPay 支払い Web コンポーネントを使用するページには、次の 2 つの項目を含める必要があります。

  1. スタイルシートを含めます。
  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)ユーザーに予約を完了するよう指示します。

支払い詳細
図1. 支払いフォームのサンプル