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.

Sematkan Wink

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

Sertakan lembar gaya kami.
Sertakan Javascript kami.
Sertakan pemuat aplikasi kami.

Lembar Gaya

Sertakan gaya CSS kami di kepala dokumen Anda.

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

Bahasa pemrograman Javascript

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.

Komponen

Baca tentang pustaka komponen kami di bawah ini.

Pemuat aplikasi

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

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

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>

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

Rencana perjalanan

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

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

Mencari

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>

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

Formulir rencana perjalanan

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.

Akun

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.

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

Sematkan TripPay

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

Sertakan lembar gaya kami.
Sertakan Javascript kami.

Lembar Gaya

Sertakan gaya CSS kami di kepala dokumen Anda.

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

Bahasa pemrograman Javascript

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

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*