Komponen Web

Komponen Web ialah standard yang membolehkan anda menyepadukan keseluruhan ciri Javascript ke dalam tapak web anda tanpa mengetahui cara membuat kod. Terima kasih kepada teknologi hebat ini, ia membolehkan anda membenamkan inventori perjalanan Wink dengan sedikit kekecohan. Artikel ini memandu anda melalui koleksi komponen web kami dan menunjukkan kepada anda cara menggunakannya.

Benamkan Wink

Terdapat tiga perkara yang anda perlu masukkan ke dalam mana-mana halaman yang anda mahu memaparkan salah satu komponen web kami.

Sertakan lembaran gaya kami.
Sertakan Javascript kami.
Sertakan pemuat aplikasi kami.

Lembaran gaya

Sertakan gaya CSS kami di kepala dokumen anda.

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

Javascript

Sertakan Javascript kami di bahagian bawah dokumen anda. (Kami mengesyorkan serta-merta di atas teg badan hujung).

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

Tapak anda kini sedia dan boleh memaparkan komponen web kami.

Komponen

Baca tentang perpustakaan komponen kami di bawah.

Pemuat aplikasi

Pemuat bertanggungjawab untuk mengekalkan keadaan dan mengurus interaksi antara komponen kami. (Sertakan di bawah Javascript kami).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Pemuat kandungan

Pemuat kandungan berada di tengah-tengah perpustakaan komponen web kami. Ia bertanggungjawab untuk memaparkan inventori anda (kad, grid, peta).

Atribut yang tersedia:

susun atur
id
menyusun

Atribut sort hanya tersedia apabila susun atur tersedia RANKED dan anda tidak mahu menggunakan grid kedudukan sedia ada. Untuk kes ini, tinggalkan id kosong.

Jenis susun atur yang tersedia:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Jenis jenis yang tersedia:

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>

Sampel boleh didapati untuk kad, grid dan peta.

Cari

Carian berfungsi hebat bersama-sama dengan salah satu grid kedudukan anda. Ia membolehkan pengguna anda mencari hotel dan destinasi serta kemas kini grid sebagai tindak balas kepada hasil carian mereka.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Mengklik pada komponen di atas membuka modal yang membolehkan anda menaip destinasi atau hotel yang anda cari.

Jadual perjalanan

Butang jadual perjalanan menunjukkan jadual perjalanan semasa pada butang. Apabila anda mengkliknya, pemilih jadual perjalanan penuh dipaparkan sebagai modal.

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

Komponen web jadual perjalanan

Mengklik pada butang di atas membuka modal yang membolehkan anda mengemas kini jadual perjalanan anda.

Cari

Carian ialah butang ikon sahaja bagi pemilih jadual perjalanan. Apabila anda mengkliknya, pemilih jadual perjalanan penuh dipaparkan sebagai modal.

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

Mengklik pada butang di atas membuka modal yang membolehkan anda mengemas kini jadual perjalanan anda.

Borang jadual perjalanan

Komponen jadual perjalanan memaparkan borang jadual perjalanan yang boleh berinteraksi dengan pengguna.

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

Komponen web borang jadual perjalanan — *Komponen web bentuk jadual perjalanan*

Dengan menukar jadual perjalanan, dalam mana-mana komponen jadual perjalanan kami, mencetuskan acara kemas kini jadual perjalanan kepada mana-mana inventori yang sedang anda paparkan pada halaman.

Akaun

Butang akaun membolehkan anda menambah pengesahan Wink ke tapak anda.

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

Komponen web akaun — *Komponen web butang akaun*

Mengklik pada butang, apabila pengguna tidak disahkan, akan memajukan pengguna untuk mendapatkan pengesahan. Apabila pengguna disahkan, ia memaparkan ikon profil pengguna.

Apabila anda mengklik pada butang, ia membuka menu lungsur khusus pengguna pengguna.

Benamkan TripPay

Terdapat dua perkara yang anda perlu masukkan ke dalam mana-mana halaman yang anda mahu menggunakan komponen web pembayaran TripPay.

Sertakan lembaran gaya kami.
Sertakan Javascript kami.

Lembaran gaya

Sertakan gaya CSS kami di kepala dokumen anda.

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

Javascript

Sertakan Javascript kami di bahagian bawah dokumen anda. (Kami mengesyorkan serta-merta di atas teg badan hujung).

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

Tapak anda kini sedia dan boleh memaparkan komponen web kami.

Komponen

Bayaran

Komponen pembayaran membolehkan anda memaklumkan TripPay bahawa pengembara ingin membeli sesuatu dan peraturan serta harga untuk item tersebut.

Terdapat satu atribut yang diperlukan untuk widget:

id Pengecam kontrak tempahan yang anda ingin laksanakan.

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

Untuk mengetahui cara menjana kontrak tempahan id, baca panduan: Mengintegrasikan dengan TripPay.

Widget menyediakan kontrak untuk pelaksanaan dan memaparkan butiran pembayaran (Rajah 1) kepada pengguna untuk memuktamadkan tempahan.