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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponen”Baca tentang pustaka komponen kami di bawah ini.
Pemuat aplikasi
Section titled “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
Section titled “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
Atributsort
hanya tersedia saat tata letakRANKED
dan 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
Section titled “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
Section titled “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>
Mengklik tombol di atas akan membuka modal yang memungkinkan Anda memperbarui rencana perjalanan Anda.
Mencari
Section titled “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
Section titled “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>
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>
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
Section titled “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
Section titled “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
Section titled “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
Section titled “Komponen”Pembayaran
Section titled “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:
id
Pengidentifikasi 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.