Skip to content
Academy

Komponen Web

Komponen Web adalah standard yang membolehkan anda mengintegrasikan ciri-ciri Javascript sepenuhnya ke dalam laman web anda tanpa perlu tahu cara pengaturcaraan. Terima kasih kepada teknologi hebat ini, ia membolehkan anda menyematkan inventori perjalanan Wink dengan sangat mudah. Artikel ini membimbing anda melalui koleksi komponen web kami dan menunjukkan cara menggunakannya.

Sematkan Wink

Section titled “Sematkan Wink”

Terdapat tiga perkara yang perlu anda sertakan dalam mana-mana halaman di mana anda ingin memaparkan salah satu komponen web kami.

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

Helaian gaya

Section titled “Helaian gaya”

Sertakan gaya CSS kami di bahagian kepala 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 bahagian bawah dokumen anda. (Kami mengesyorkan tepat di atas tag </body> akhir).

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

Laman web anda kini bersedia dan boleh memaparkan komponen web kami.

Komponen

Section titled “Komponen”

Baca tentang perpustakaan komponen kami di bawah.

Pemuat aplikasi

Section titled “Pemuat aplikasi”

Pemuat bertanggungjawab untuk menyimpan keadaan dan mengurus interaksi antara komponen kami. (Sertakan ia 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

Section titled “Pemuat kandungan”

Pemuat kandungan adalah teras perpustakaan komponen web kami. Ia bertanggungjawab untuk memaparkan inventori anda (kad, grid, peta).

Atribut yang tersedia:

  • layout
  • id
  • sort

Atribut sort hanya tersedia apabila layout adalah RANKED dan anda tidak mahu menggunakan grid berperingkat sedia ada. Untuk kes 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 boleh didapati untuk kad, grid dan peta.

Carian

Section titled “Carian”

Carian berfungsi dengan baik bersama salah satu grid berperingkat anda. Ia membolehkan pengguna anda mencari hotel dan destinasi dan grid akan dikemas kini mengikut hasil carian mereka.

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

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

Modal Lookup
Modal Lookup dengan hasil

Itinerary

Section titled “Itinerary”

Butang itinerary memaparkan itinerary semasa pada butang tersebut. Apabila anda klik, pemilih itinerary penuh akan dipaparkan sebagai modal.

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

Klik pada butang di atas akan membuka modal yang membolehkan anda mengemas kini itinerary anda.

Modal Carian
Pemilih itinerary sebagai modal

Carian

Section titled “Carian”

Carian adalah butang ikon sahaja untuk pemilih itinerary. Apabila anda klik, pemilih itinerary penuh akan dipaparkan sebagai modal.

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

Klik pada butang di atas akan membuka modal yang membolehkan anda mengemas kini itinerary anda.

Modal Carian
Pemilih itinerary sebagai modal

Borang Itinerary

Section titled “Borang Itinerary”

Komponen itinerary memaparkan borang itinerary yang boleh berinteraksi dengan pengguna.

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

Dengan mengubah itinerary, dalam mana-mana komponen itinerary kami, akan mencetuskan acara kemas kini itinerary kepada mana-mana inventori yang sedang dipaparkan pada halaman.

Akaun

Section titled “Akaun”

Butang akaun membolehkan anda menambah pengesahan Wink ke laman web anda.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Komponen web butang Akaun
Komponen web butang Akaun

Klik pada butang, apabila pengguna belum disahkan, akan mengarahkan pengguna untuk mendapatkan pengesahan. Apabila pengguna disahkan, ia memaparkan ikon profil pengguna.

Butang Akaun apabila disahkan
Komponen web butang Akaun (disahkan)

Apabila anda klik pada butang, ia membuka dropdown khusus pengguna.

Butang Akaun apabila disahkan
Komponen web butang Akaun (terbuka)

Sematkan TripPay

Section titled “Sematkan TripPay”

Terdapat dua perkara yang perlu anda sertakan dalam mana-mana halaman di mana anda ingin menggunakan komponen web pembayaran TripPay.

  1. Sertakan helaian gaya kami.
  2. Sertakan Javascript kami.

Helaian gaya

Section titled “Helaian gaya”

Sertakan gaya CSS kami di bahagian kepala 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 bahagian bawah dokumen anda. (Kami mengesyorkan tepat di atas tag <body> akhir).

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

Laman web anda kini bersedia dan boleh memaparkan komponen web kami.

Komponen

Section titled “Komponen”

Pembayaran

Section titled “Pembayaran”

Komponen pembayaran membolehkan anda memberitahu TripPay bahawa seorang pelancong ingin membeli sesuatu dan peraturan serta harga untuk item tersebut.

Terdapat satu atribut wajib untuk widget:

  • id Pengenal kontrak tempahan yang anda mahu laksanakan.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

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

Butiran pembayaran
Rajah 1. Contoh borang pembayaran

Ralat

Section titled “Ralat”

Jika anda menerima mesej ralat semasa menyematkan salah satu komponen web kami, sama ada di WinkLinks atau di laman web anda sendiri, terdapat beberapa perkara yang mungkin telah berlaku:

Ketersediaan

Section titled “Ketersediaan”

Inventori mungkin tidak lagi tersedia. Pergi ke Wink Studio dan periksa sama ada status “kad” tersedia. Jika tidak, ia akan dipaparkan berwarna merah. Jika itu berlaku, anda boleh menunggu dan mungkin pembekal akan membuatnya tersedia semula atau keluarkan dari senarai anda.

Dikeluarkan

Section titled “Dikeluarkan”

Inventori mungkin telah dikeluarkan. Pergi ke Wink Studio dan periksa sama ada status “kad” tersedia. Jika tidak, ia akan dipaparkan berwarna merah. Jika itu berlaku, anda boleh menunggu dan mungkin pembekal akan membuatnya tersedia semula atau keluarkan dari senarai anda.

Penyesuaian

Section titled “Penyesuaian”

Anda mungkin secara tidak sengaja telah mengeluarkan penyesuaian yang anda telah tetapkan untuk digunakan bersama inventori anda. Pastikan penyesuaian itu masih tersedia dan tetapkan yang baru jika ada yang hilang.

Aplikasi

Section titled “Aplikasi”

Ini untuk pembangun web sahaja. Jika anda secara tidak sengaja telah mengeluarkan Aplikasi ; menyebabkan ID klien tidak lagi tersedia, sila buat aplikasi baru dan gunakan ID klien baru untuk menyematkan Komponen Web kami.