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