Lewati ke konten

Komponen Web

Komponen Webadalah standar yang memungkinkan Anda mengintegrasikan seluruh fitur Javascript ke situs web Anda tanpa harus tahu cara membuat kode. Berkat teknologi keren ini, Anda dapat menyematkan inventaris perjalanan Wink dengan sangat mudah. Artikel ini memandu Anda melalui koleksi komponen web kami dan menunjukkan cara menggunakannya.

Ada tiga hal yang harus Anda sertakan di halaman mana pun tempat Anda ingin menampilkan salah satu komponen web kami.

  1. Sertakan lembar gaya kami.
  2. Sertakan Javascript kami.
  3. Sertakan pemuat aplikasi kami.

Sertakan gaya CSS kami di kepala dokumen Anda.

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

Sertakan Javascript kami di bagian bawah dokumen Anda. (Kami merekomendasikan tepat di atas tag badan akhir).

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

Situs Anda sekarang siap dan dapat menampilkan komponen web kami.

Baca tentang pustaka komponen kami di bawah ini.

Loader bertanggung jawab untuk menjaga status dan mengelola interaksi antara komponen-komponen kita.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 konten merupakan inti dari pustaka komponen web kami. Pemuat konten bertanggung jawab untuk menampilkan inventaris Anda (kartu, kisi, peta).

Atribut yang tersedia:

  • tata letak
  • pengenal
  • menyortir

Atributsorthanya tersedia saat tata letakRANKEDdan Anda tidak ingin menggunakan grid peringkat yang sudah ada. Untuk kasus ini, tinggalkanid kosong.

Tipe tata letak yang tersedia:

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

Jenis sortir 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 dapat ditemukan untukkartu-kartuBahasa Indonesia:jaringan Dan peta.

Pencarian berfungsi dengan baik bersama salah satu kisi peringkat Anda. Fitur ini memungkinkan pengguna mencari hotel dan tujuan, lalu kisi diperbarui sebagai respons terhadap hasil pencarian mereka.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Komponen web pencarian
Komponen web pencarian

Mengklik komponen di atas akan membuka modal yang memungkinkan Anda mengetikkan tujuan atau hotel yang sedang Anda cari.

Pencarian modal
Pencarian modal dengan hasil

Tombol rencana perjalanan menunjukkan rencana perjalanan saat ini pada tombol tersebut. Saat Anda mengkliknya, pemilih rencana perjalanan lengkap akan ditampilkan sebagai modal.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Komponen web rencana perjalanan
Komponen web rencana perjalanan

Mengklik tombol di atas akan membuka modal yang memungkinkan Anda memperbarui rencana perjalanan Anda.

Pencarian modal
Pemilih rencana perjalanan sebagai modal

Pencarian adalah tombol ikon saja pada pemilih rencana perjalanan. Saat Anda mengkliknya, pemilih rencana perjalanan lengkap akan ditampilkan sebagai modal.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Komponen pencarian web
Komponen pencarian web

Mengklik tombol di atas akan membuka modal yang memungkinkan Anda memperbarui rencana perjalanan Anda.

Pencarian modal
Pemilih rencana perjalanan sebagai modal

Komponen rencana perjalanan menampilkan formulir rencana perjalanan yang dapat digunakan oleh pengguna.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Komponen web form rencana perjalanan
Komponen web formulir rencana perjalanan

Dengan mengubah rencana perjalanan, di salah satu komponen rencana perjalanan, akan memicu peristiwa pembaruan rencana perjalanan ke inventaris apa pun yang saat ini Anda tampilkan di halaman.

Tombol akun memungkinkan Anda menambahkan autentikasi Wink ke situs Anda.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Komponen web akun
Komponen web tombol akun

Mengklik tombol tersebut, saat pengguna tidak diautentikasi, akan meneruskan pengguna tersebut untuk diautentikasi. Saat pengguna diautentikasi, ikon profil pengguna akan ditampilkan.

Tombol akun saat diautentikasi
Komponen web tombol akun (diautentikasi)

Saat Anda mengklik tombol tersebut, akan terbuka menu dropdown khusus pengguna.

Tombol akun saat diautentikasi
Komponen web tombol akun (buka)

Ada dua hal yang harus Anda sertakan di halaman mana pun tempat Anda ingin menggunakan komponen web pembayaran TripPay.

  1. Sertakan lembar gaya kami.
  2. Sertakan Javascript kami.

Sertakan gaya CSS kami di kepala dokumen Anda.

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

Sertakan Javascript kami di bagian bawah dokumen Anda. (Kami merekomendasikan tepat di atas tag badan akhir).

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

Situs Anda sekarang siap dan dapat menampilkan komponen web kami.

Komponen pembayaran memungkinkan Anda memberi tahu TripPay bahwa wisatawan ingin membeli sesuatu beserta aturan dan harga untuk barang tersebut.

Ada satu atribut yang diperlukan untuk widget:

  • idPengidentifikasi kontrak pemesanan yang ingin Anda jalankan.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

Untuk mempelajari cara membuat kontrak pemesananid, baca panduannya:Integrasi dengan TripPay.

Widget mempersiapkan kontrak untuk dieksekusi dan menampilkan detail pembayaran(Gambar 1)kepada pengguna untuk menyelesaikan pemesanan.

Rincian pembayaran
Gambar 1. Contoh formulir pembayaran