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

ドキュメントの最後に当社の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は空にしてください。

利用可能なレイアウトタイプ:

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

ドキュメントの最後に当社のJavascriptを含めてください。(終了の<body>タグ直前を推奨します)。

<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コンポーネントを埋め込んでください。