Lewati ke konten
Academy

Komponen Web

Komponen Web adalah standar yang memungkinkan Anda mengintegrasikan seluruh fitur Javascript ke dalam situs web Anda tanpa harus mengetahui cara coding. 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

Section titled “Sematkan Wink”

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

  1. Sertakan stylesheet kami.
  2. Sertakan Javascript kami.
  3. Sertakan pemuat aplikasi kami.

Stylesheet

Section titled “Stylesheet”

Sertakan gaya CSS kami di bagian head dokumen Anda.

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

Javascript

Section titled “Javascript”

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

<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

Section titled “Komponen”

Baca tentang perpustakaan komponen kami di bawah ini.

Pemuat aplikasi

Section titled “Pemuat aplikasi”

Pemuat bertanggung jawab untuk menjaga status dan mengelola interaksi antar 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 konten

Section titled “Pemuat konten”

Pemuat konten adalah inti dari perpustakaan komponen web kami. Ia bertanggung jawab untuk menampilkan inventaris Anda (kartu, grid, peta).

Atribut yang tersedia:

  • layout
  • id
  • sort

Atribut sort hanya tersedia ketika layout adalah RANKED dan Anda tidak ingin menggunakan grid peringkat yang sudah ada. Untuk kasus ini, biarkan id kosong.

Jenis layout yang tersedia:

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

Jenis sort 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>

Contoh dapat ditemukan untuk kartu, grid dan peta.

Lookup

Section titled “Lookup”

Lookup bekerja sangat baik bersama salah satu grid peringkat Anda. Ini memungkinkan pengguna Anda mencari hotel dan destinasi dan grid akan memperbarui sesuai hasil pencarian mereka.

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

Mengklik komponen di atas membuka modal yang memungkinkan Anda mengetik destinasi atau hotel yang Anda cari.

Modal Lookup
Modal Lookup dengan hasil pencarian

Itinerary

Section titled “Itinerary”

Tombol itinerary menampilkan itinerary saat ini pada tombol. Saat Anda mengkliknya, pemilih itinerary lengkap ditampilkan sebagai modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Komponen web Itinerary
Komponen web Itinerary

Mengklik tombol di atas membuka modal yang memungkinkan Anda memperbarui itinerary Anda.

Modal pencarian
Pemilih itinerary sebagai modal
Section titled “Search”

Search adalah tombol hanya ikon dari pemilih itinerary. Saat Anda mengkliknya, pemilih itinerary lengkap ditampilkan sebagai modal.

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

Mengklik tombol di atas membuka modal yang memungkinkan Anda memperbarui itinerary Anda.

Modal pencarian
Pemilih itinerary sebagai modal

Formulir Itinerary

Section titled “Formulir Itinerary”

Komponen itinerary menampilkan formulir itinerary yang dapat diinteraksikan oleh pengguna.

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

Dengan mengubah itinerary, di salah satu komponen itinerary kami, akan memicu event pembaruan itinerary ke inventaris apa pun yang saat ini Anda tampilkan di halaman.

Akun

Section titled “Akun”

Tombol akun memungkinkan Anda menambahkan autentikasi Wink ke situs Anda.

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

Mengklik tombol, saat pengguna belum terautentikasi, akan mengarahkan pengguna untuk melakukan autentikasi. Saat pengguna sudah terautentikasi, tombol menampilkan ikon profil pengguna.

Tombol Akun saat terautentikasi
Komponen web tombol Akun (terautentikasi)

Saat Anda mengklik tombol, akan membuka dropdown khusus pengguna.

Tombol Akun saat terautentikasi
Komponen web tombol Akun (terbuka)

Sematkan TripPay

Section titled “Sematkan TripPay”

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

  1. Sertakan stylesheet kami.
  2. Sertakan Javascript kami.

Stylesheet

Section titled “Stylesheet”

Sertakan gaya CSS kami di bagian head dokumen Anda.

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

Javascript

Section titled “Javascript”

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

<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

Section titled “Komponen”

Pembayaran

Section titled “Pembayaran”

Komponen pembayaran memungkinkan Anda memberi tahu TripPay bahwa seorang pelancong ingin membeli sesuatu dan aturan serta harga untuk item tersebut.

Ada satu atribut wajib untuk widget:

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

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

Detail pembayaran
Gambar 1. Contoh formulir pembayaran

Kesalahan

Section titled “Kesalahan”

Jika Anda menerima pesan kesalahan saat menyematkan salah satu komponen web kami, baik di WinkLinks atau di situs web Anda sendiri, ada beberapa hal yang mungkin salah:

Ketersediaan

Section titled “Ketersediaan”

Inventaris mungkin sudah tidak tersedia lagi. Pergi ke Wink Studio dan periksa apakah status “kartu” tersedia. Jika tidak, akan muncul berwarna merah. Jika demikian, Anda dapat menunggu dan mungkin pemasok membuatnya tersedia lagi atau menghapusnya dari daftar Anda.

Dihapus

Section titled “Dihapus”

Inventaris mungkin telah dihapus. Pergi ke Wink Studio dan periksa apakah status “kartu” tersedia. Jika tidak, akan muncul berwarna merah. Jika demikian, Anda dapat menunggu dan mungkin pemasok membuatnya tersedia lagi atau menghapusnya dari daftar Anda.

Kustomisasi

Section titled “Kustomisasi”

Anda mungkin secara tidak sengaja menghapus kustomisasi yang telah Anda definisikan untuk inventaris Anda. Pastikan kustomisasi masih tersedia dan tetapkan yang baru jika ada yang hilang.

Aplikasi

Section titled “Aplikasi”

Ini hanya untuk pengembang web. Jika Anda secara tidak sengaja menghapus Aplikasi ; sehingga client ID tidak lagi tersedia, silakan buat aplikasi baru dan gunakan client ID baru untuk menyematkan Komponen Web kami.