Skip to content
Academy

Grid

Grid mewakili senarai pembekal dan inventori serta memaparkan butiran melalui UI grid interaktif yang boleh ditempah. Grid menyokong paparan mana-mana inventori dari senarai terpilih atau carian tersimpan anda. Pengguna berinteraksi dengan grid sama seperti dia berinteraksi dengan kad individu dengan satu ciri tambahan:

  1. Menavigasi grid dengan menekan butang Tunjuk lebih banyak (apabila item tambahan tersedia).
Pratonton grid
Grid memaparkan pelbagai jenis bilik

Di atas adalah contoh grid kami yang memaparkan senarai kad jenis bilik.

Selepas ini, artikel ini akan membimbing anda cara membuat, menyesuaikan dan memaparkan grid kepada pengguna anda.

Jenis grid

Section titled “Jenis grid”

Terdapat tiga jenis grid:

  1. Grid berdasarkan senarai terpilih.
  2. Grid berdasarkan carian tersimpan.
  3. Grid berdasarkan lokasi dan kriteria susunan (iaitu Grid Berperingkat).

Grid senarai terpilih

Section titled “Grid senarai terpilih”

Ini adalah grid yang menggunakan inventori yang anda kumpulkan dalam salah satu senarai terpilih anda dan menukarkan senarai itu kepada inventori perjalanan yang boleh ditempah untuk dipaparkan kepada pengguna anda.

Buat

Section titled “Buat”

Navigasi ke Inventori > Senarai Terpilih dari bar navigasi utama. Untuk contoh ini, kami akan menggunakan senarai Kegemaran anda. Jika anda belum menambah apa-apa ke dalam Kegemaran, pergi ke Carian untuk belajar caranya.

Buat grid senarai terpilih
Borang buat grid senarai terpilih
  1. Klik butang Tindakan pada senarai Kegemaran.
  2. Klik butang Buat grid.
  3. Tetingkap baru akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
  4. Klik butang OK untuk teruskan.

Grid anda telah dibuat. Navigasi ke Alat > Grid dari bar navigasi utama dan klik tab Grid Terpilih untuk melihat grid baru anda.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Beri nama supaya anda ingat apa tujuan grid itu.
  2. Pilih Penyesuaian yang anda mahu gunakan pada grid ini.
  3. Pilih muka kad awal yang anda mahu pengguna lihat terlebih dahulu. Secara lalai, ia adalah muka asli inventori tersebut.
  4. Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori berdasarkan metrik agregat seperti mesra alam.
  5. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik butang Simpan untuk teruskan.

Kongsi

Section titled “Kongsi”
Grid senarai terpilih
Entri grid senarai terpilih dengan menu tindakan yang dilipat

Di atas menunjukkan imej dengan semua tindakan yang tersedia untuk grid anda:

  • Kemas kini Mengemas kini konfigurasi grid anda.
  • Tambah ke WinkLinks Menambah grid ke akaun WinkLinks anda.
  • Sisipkan Menunjukkan cara menyisipkan grid ini sebagai Grid ke dalam laman web anda.
  • Gunakan dengan WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyisipkan grid ini ke dalam laman web anda.

Kami akan terangkan beberapa pilihan ini dengan lebih terperinci di bawah.

Sisipkan

Section titled “Sisipkan”
<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 adalah cara untuk menyisipkan grid anda ke dalam laman web anda:

  • Baris 3 menunjukkan cara menyisipkan gaya Wink ke dalam laman anda.
  • Baris 6 hingga 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memberitahunya untuk mengambil grid untuk kod anda.
  • Baris 11 menunjukkan cara menyisipkan Javascript kami ke dalam laman anda.
  • Baris 13 menunjukkan cara menyisipkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil konfigurasi tahap halaman anda.

Grid carian tersimpan

Section titled “Grid carian tersimpan”

Ini adalah grid yang menggunakan inventori dalam pertanyaan carian tersimpan anda dan menukarkan hasil carian kepada inventori perjalanan yang boleh ditempah untuk dipaparkan kepada pengguna anda.

Buat

Section titled “Buat”

Navigasi ke Inventori > Carian tersimpan dari bar navigasi utama. Jika anda belum membuat carian tersimpan, pergi ke Carian untuk belajar caranya.

Buat grid carian tersimpan
Borang buat grid carian tersimpan
  1. Klik butang Tindakan pada carian tersimpan anda.
  2. Klik butang Buat grid.
  3. Tetingkap baru akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
  1. Klik butang OK untuk teruskan.

Grid anda telah dibuat. Navigasi ke Alat > Grid dari bar navigasi utama dan klik tab Grid Carian Tersimpan untuk melihat grid baru anda.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Beri nama supaya anda ingat apa tujuan grid itu.
  2. Pilih Penyesuaian yang anda mahu gunakan pada grid ini.
  3. Pilih muka kad awal yang anda mahu pengguna lihat terlebih dahulu. Secara lalai, ia adalah muka asli inventori tersebut.
  4. Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori berdasarkan metrik agregat seperti mesra alam.
  5. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik butang Simpan untuk teruskan.

Kongsi

Section titled “Kongsi”
Grid carian tersimpan
Entri grid carian tersimpan dengan menu tindakan yang dilipat

Sisipkan

Section titled “Sisipkan”
<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 adalah cara untuk menyisipkan grid anda ke dalam laman web anda:

  • Baris 3 menunjukkan cara menyisipkan gaya Wink ke dalam laman anda.
  • Baris 6 hingga 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memberitahunya untuk mengambil grid untuk kod anda.
  • Baris 11 menunjukkan cara menyisipkan Javascript kami ke dalam laman anda.
  • Baris 13 menunjukkan cara menyisipkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil konfigurasi tahap halaman anda.

Grid berperingkat

Section titled “Grid berperingkat”

Buat

Section titled “Buat”

Buat grid berperingkat dengan menavigasi ke Alat > Grid dan klik tab Grid Berperingkat. Klik butang Buat grid berperingkat.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid berperingkat anda dengan cara berikut:

  1. Pilih destinasi. Contoh: Tokyo.
  2. Beri nama supaya anda ingat apa tujuan grid itu. Contoh: Hotel mesra alam di Tokyo
  3. Pilih Penyesuaian yang anda mahu gunakan pada grid ini.
  4. Pilih muka kad awal yang anda mahu pengguna lihat terlebih dahulu. Secara lalai, ia adalah muka asli inventori tersebut.
  5. Pilih ciri yang digunakan untuk menyusun hartanah. Contoh: Mesra alam.
  6. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  7. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  8. Klik butang Simpan untuk teruskan.

Selepas menyimpan grid berperingkat anda, anda akan dialihkan ke halaman grid berperingkat anda dan grid anda kini sedia untuk dikongsi dengan dunia.

Kongsi

Section titled “Kongsi”
Grid berperingkat
Grid berperingkat dengan menu tindakan yang dilipat

Di atas menunjukkan imej dengan semua tindakan yang tersedia untuk grid berperingkat anda:

  • Kemas kini Mengemas kini konfigurasi grid anda.
  • Tambah ke WinkLinks Menambah grid berperingkat ke akaun WinkLinks anda.
  • Sisipkan Menunjukkan cara menyisipkan grid ini sebagai Grid ke dalam laman web anda.
  • Gunakan dengan WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyisipkan kad ini ke dalam laman web anda.

Kami akan terangkan beberapa pilihan ini dengan lebih terperinci di bawah.

Sisipkan

Section titled “Sisipkan”
<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 adalah cara untuk menyisipkan grid anda ke dalam laman web anda:

  • Baris 3 menunjukkan cara menyisipkan gaya Wink ke dalam laman anda.
  • Baris 6 hingga 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memberitahunya untuk mengambil grid berperingkat untuk kod anda.
  • Baris 11 menunjukkan cara menyisipkan Javascript kami ke dalam laman anda.
  • Baris 13 menunjukkan cara menyisipkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil konfigurasi tahap halaman anda.

API

Section titled “API”

Pembangun yang ingin mengurus grid boleh pergi ke Pembangun > API > Inventori.

Bacaan lanjut

Section titled “Bacaan lanjut”