Lewati ke konten
Academy

Grid

Grid mewakili daftar pemasok dan inventaris serta menampilkan detailnya melalui UI grid interaktif yang dapat dipesan. Grid mendukung penampilan inventaris apa pun dari daftar kurasi atau pencarian tersimpan Anda. Pengguna berinteraksi dengan grid dengan cara yang sama seperti berinteraksi dengan kartu individual dengan satu fitur tambahan:

  1. Melakukan paginasi melalui grid dengan mengklik tombol Tampilkan lebih banyak (ketika ada item lebih banyak tersedia).
Pratinjau grid
Grid yang menampilkan beberapa tipe kamar

Di atas adalah contoh grid kami yang menampilkan daftar kartu tipe kamar.

Sisa artikel ini akan memandu Anda cara membuat, menyesuaikan, dan menampilkan grid kepada pengguna Anda.

Jenis grid

Section titled “Jenis grid”

Ada tiga jenis grid:

  1. Grid berdasarkan daftar kurasi.
  2. Grid berdasarkan pencarian tersimpan.
  3. Grid berdasarkan lokasi dan kriteria pengurutan (yaitu Grid Terurut).

Grid daftar kurasi

Section titled “Grid daftar kurasi”

Ini adalah grid yang menggunakan inventaris yang telah Anda kumpulkan dalam salah satu daftar kurasi Anda dan mengubah daftar tersebut menjadi inventaris perjalanan yang dapat dipesan yang dapat Anda tampilkan kepada pengguna.

Membuat

Section titled “Membuat”

Navigasikan ke Inventaris > Daftar Kurasi dari bilah navigasi utama. Untuk contoh ini, kita akan menggunakan daftar Favorit Anda. Jika Anda belum menambahkan apa pun ke Favorit, kunjungi Pencarian untuk mempelajari caranya.

Membuat grid daftar kurasi
Form membuat grid daftar kurasi
  1. Klik tombol Aksi pada daftar Favorit.
  2. Klik tombol Buat grid.
  3. Jendela baru akan muncul, memungkinkan Anda memberi nama grid Anda. Lihat di bawah.
  4. Klik tombol OK untuk melanjutkan.

Grid Anda telah dibuat. Navigasikan ke Alat > Grid dari bilah navigasi utama dan klik tab Grid Kurasi untuk melihat grid baru Anda.

Menyesuaikan

Section titled “Menyesuaikan”

Form ini memungkinkan Anda menyesuaikan grid Anda dengan cara berikut:

  1. Beri nama agar Anda ingat tentang apa grid ini.
  2. Pilih Kustomisasi yang ingin Anda terapkan pada grid ini.
  3. Pilih tampilan kartu awal yang ingin dilihat pengguna terlebih dahulu. Secara default, ini adalah tampilan asli dari inventaris tersebut.
  4. Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris berdasarkan metrik agregat seperti ramah lingkungan.
  5. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Web Crawlers.
  6. Tambahkan judul dan deskripsi dalam bahasa yang ingin dilihat pengguna.
  7. Klik tombol Simpan untuk melanjutkan.

Berbagi

Section titled “Berbagi”
Grid daftar kurasi
Entri grid daftar kurasi dengan menu aksi yang diperkecil

Di atas menunjukkan gambar dengan semua aksi yang tersedia untuk grid Anda:

  • Perbarui Memperbarui konfigurasi grid Anda.
  • Tambahkan ke WinkLinks Menambahkan grid ke akun WinkLinks Anda.
  • Sematkan Menunjukkan cara menyematkan grid ini sebagai Grid ke situs web Anda.
  • Gunakan dengan WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyematkan grid ini ke situs web Anda.

Kami membahas beberapa opsi ini secara lebih rinci di bawah.

Sematkan

Section titled “Sematkan”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Berikut cara menyematkan grid Anda ke situs Anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke situs Anda.
  • Baris 6 sampai 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memintanya mengambil grid untuk kode Anda.
  • Baris 11 menunjukkan cara menyematkan Javascript kami ke situs Anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memintanya mengambil preferensi konfigurasi tingkat halaman Anda.

Grid pencarian tersimpan

Section titled “Grid pencarian tersimpan”

Ini adalah grid yang menggunakan inventaris dalam kueri pencarian tersimpan Anda dan mengubah hasil pencarian menjadi inventaris perjalanan yang dapat dipesan yang dapat Anda tampilkan kepada pengguna.

Membuat

Section titled “Membuat”

Navigasikan ke Inventaris > Pencarian tersimpan dari bilah navigasi utama. Jika Anda belum membuat pencarian tersimpan, kunjungi Pencarian untuk mempelajari caranya.

Membuat grid pencarian tersimpan
Form membuat grid pencarian tersimpan
  1. Klik tombol Aksi pada pencarian tersimpan Anda.
  2. Klik tombol Buat grid.
  3. Jendela baru akan muncul, memungkinkan Anda memberi nama grid Anda. Lihat di bawah.
  1. Klik tombol OK untuk melanjutkan.

Grid Anda telah dibuat. Navigasikan ke Alat > Grid dari bilah navigasi utama dan klik tab Grid Pencarian Tersimpan untuk melihat grid baru Anda.

Menyesuaikan

Section titled “Menyesuaikan”

Form ini memungkinkan Anda menyesuaikan grid Anda dengan cara berikut:

  1. Beri nama agar Anda ingat tentang apa grid ini.
  2. Pilih Kustomisasi yang ingin Anda terapkan pada grid ini.
  3. Pilih tampilan kartu awal yang ingin dilihat pengguna terlebih dahulu. Secara default, ini adalah tampilan asli dari inventaris tersebut.
  4. Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris berdasarkan metrik agregat seperti ramah lingkungan.
  5. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Web Crawlers.
  6. Tambahkan judul dan deskripsi dalam bahasa yang ingin dilihat pengguna.
  7. Klik tombol Simpan untuk melanjutkan.

Berbagi

Section titled “Berbagi”
Grid pencarian tersimpan
Entri grid pencarian tersimpan dengan menu aksi yang diperkecil

Sematkan

Section titled “Sematkan”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Berikut cara menyematkan grid Anda ke situs Anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke situs Anda.
  • Baris 6 sampai 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memintanya mengambil grid untuk kode Anda.
  • Baris 11 menunjukkan cara menyematkan Javascript kami ke situs Anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memintanya mengambil preferensi konfigurasi tingkat halaman Anda.

Grid terurut

Section titled “Grid terurut”

Membuat

Section titled “Membuat”

Buat grid terurut dengan menavigasi ke Alat > Grid dan klik tab Grid Terurut. Klik tombol Buat grid terurut.

Menyesuaikan

Section titled “Menyesuaikan”

Form ini memungkinkan Anda menyesuaikan grid terurut Anda dengan cara berikut:

  1. Pilih destinasi. Misal: Tokyo.
  2. Beri nama agar Anda ingat tentang apa grid ini. Misal: Hotel ramah lingkungan di Tokyo
  3. Pilih Kustomisasi yang ingin Anda terapkan pada grid ini.
  4. Pilih tampilan kartu awal yang ingin dilihat pengguna terlebih dahulu. Secara default, ini adalah tampilan asli dari inventaris tersebut.
  5. Pilih karakteristik yang digunakan untuk mengurutkan properti. Misal: Ramah lingkungan.
  6. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Web Crawlers.
  7. Tambahkan judul dan deskripsi dalam bahasa yang ingin dilihat pengguna.
  8. Klik tombol Simpan untuk melanjutkan.

Setelah menyimpan grid terurut Anda, Anda akan diarahkan ke halaman grid terurut Anda dan grid Anda sekarang siap dibagikan ke dunia.

Berbagi

Section titled “Berbagi”
Grid terurut
Grid terurut dengan menu aksi yang diperkecil

Di atas menunjukkan gambar dengan semua aksi yang tersedia untuk grid terurut Anda:

  • Perbarui Memperbarui konfigurasi grid Anda.
  • Tambahkan ke WinkLinks Menambahkan grid terurut ke akun WinkLinks Anda.
  • Sematkan Menunjukkan cara menyematkan grid ini sebagai Grid ke situs web Anda.
  • Gunakan dengan WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyematkan kartu ini ke situs web Anda.

Kami membahas beberapa opsi ini secara lebih rinci di bawah.

Sematkan

Section titled “Sematkan”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Berikut cara menyematkan grid Anda ke situs Anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke situs Anda.
  • Baris 6 sampai 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memintanya mengambil grid terurut untuk kode Anda.
  • Baris 11 menunjukkan cara menyematkan Javascript kami ke situs Anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memintanya mengambil preferensi konfigurasi tingkat halaman Anda.

API

Section titled “API”

Pengembang yang ingin mengelola grid dapat menuju ke Pengembang > API > Inventaris.

Bacaan lanjutan

Section titled “Bacaan lanjutan”