Webコンポーネント

Web Componentsは、コーディングの知識がなくてもJavaScriptの機能をウェブサイトに統合できる標準技術です。この便利な技術のおかげで、Winkの旅行在庫を簡単に埋め込むことができます。この記事では、当社のWebコンポーネントのコレクションを紹介し、その使い方を説明します。

Winkの埋め込み

当社のWebコンポーネントを表示したいページには、以下の3つを必ず含めてください。

スタイルシートの読み込み
Javascriptの読み込み
アプリケーションローダーの読み込み

スタイルシート

ドキュメントのhead内に当社のCSSスタイルを含めてください。

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

Javascript

ドキュメントの最後、*（</body>タグの直前を推奨）*に当社の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コンポーネントライブラリの中心です。インベントリ（カード、グリッド、マップ）を表示します。

利用可能な属性:

layout
id
sort

属性sortはlayoutが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>

Itinerary web component

上記のボタンをクリックすると、旅程を更新できるモーダルが開きます。

Search modal — *Itinerary picker as modal*

検索

検索は旅程ピッカーのアイコンのみのボタンです。クリックすると、旅程ピッカーがモーダルで表示されます。

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

上記のボタンをクリックすると、旅程を更新できるモーダルが開きます。

旅程フォーム

旅程コンポーネントはユーザーが操作できる旅程フォームを表示します。

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Itinerary form web component*

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

アカウント

アカウントボタンはWink認証をサイトに追加できます。

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Account button web component*

ユーザーが未認証の場合、ボタンをクリックすると認証画面に遷移します。認証済みの場合はユーザーのプロフィールアイコンが表示されます。

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

TripPayの埋め込み

TripPayの支払いWebコンポーネントを使いたいページには、以下の2つを必ず含めてください。

スタイルシートの読み込み
Javascriptの読み込み

スタイルシート

ドキュメントのhead内に当社のCSSスタイルを含めてください。

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

Javascript

ドキュメントの最後、*（</body>タグの直前を推奨）*に当社の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)*を表示して予約を完了させます。

エラー

WinkLinksやご自身のサイトで当社のWebコンポーネントを埋め込んだ際にエラーメッセージが表示された場合、以下のような原因が考えられます。

在庫状況

インベントリが利用できなくなっている可能性があります。Wink Studioにアクセスし、「カード」のステータスが利用可能か確認してください。利用不可の場合は赤く表示されます。その場合は、サプライヤーが再度利用可能にするのを待つか、リストから削除してください。

削除済み

インベントリが削除されている可能性があります。Wink Studioにアクセスし、「カード」のステータスが利用可能か確認してください。利用不可の場合は赤く表示されます。その場合は、サプライヤーが再度利用可能にするのを待つか、リストから削除してください。

カスタマイズ

インベントリに関連付けたカスタマイズを誤って削除している可能性があります。カスタマイズがまだ存在するか確認し、欠落している場合は新たに設定してください。

アプリケーション

これはウェブ開発者向けの内容です。Applicationを誤って削除し、クライアントIDが利用できなくなった場合は、新しいアプリケーションを作成し、新しいクライアントIDを使ってWebコンポーネントを埋め込んでください。