Skip to content
Wink

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 Show more (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 Lists > Curated dari bar navigasi utama. Untuk contoh ini, kami akan menggunakan senarai Favorites anda. Jika anda belum menambah apa-apa ke dalam Favorites, pergi ke Search untuk belajar caranya.

Buat grid senarai terpilih
Borang buat grid senarai terpilih
  1. Klik butang Actions pada senarai Favorites.
  2. Klik butang Create a grid.
  3. Tetingkap baru akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
  4. Klik butang OK untuk meneruskan.

Grid anda telah dibuat. Navigasi ke Grids dari bar navigasi utama dan klik tab Curated untuk melihat grid baru anda.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Berikan nama supaya anda ingat apa tujuan grid itu.
  2. Pilih Customization 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 Web Crawlers.
  6. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik butang Save untuk meneruskan.

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:

  • Update Mengemas kini konfigurasi grid anda.
  • Add to WinkLinks Menambah grid ke akaun WinkLinks anda.
  • Embed Menunjukkan cara untuk menyematkan grid ini sebagai Grid ke laman web anda.
  • Use with WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyematkan grid ini ke laman web anda.

Kami akan terangkan beberapa pilihan ini dengan lebih terperinci 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 untuk menyematkan grid anda ke laman anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke 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 menyematkan Javascript kami ke laman anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil keutamaan konfigurasi peringkat 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 Lists > Dynamic dari bar navigasi utama. Jika anda belum membuat carian tersimpan, pergi ke Search untuk belajar caranya.

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

Grid anda telah dibuat. Navigasi ke Grids dari bar navigasi utama dan klik tab Searches untuk melihat grid baru anda.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Berikan nama supaya anda ingat apa tujuan grid itu.
  2. Pilih Customization 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 Web Crawlers.
  6. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik butang Save untuk meneruskan.

Kongsi

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

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 untuk menyematkan grid anda ke laman anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke 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 menyematkan Javascript kami ke laman anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil keutamaan konfigurasi peringkat halaman anda.

Grid berperingkat

Section titled “Grid berperingkat”

Buat

Section titled “Buat”

Buat grid berperingkat dengan menavigasi ke Grids dan klik tab Ranked. Klik butang Create ranked grid.

Sesuaikan

Section titled “Sesuaikan”

Borang membolehkan anda menyesuaikan grid berperingkat anda dengan cara berikut:

  1. Pilih destinasi. Contoh: Tokyo.
  2. Berikan nama supaya anda ingat apa tujuan grid itu. Contoh: Hotel mesra alam di Tokyo
  3. Pilih Customization 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 Web Crawlers.
  7. Tambah tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  8. Klik butang Save untuk meneruskan.

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:

  • Update Mengemas kini konfigurasi grid anda.
  • Add to WinkLinks Menambah grid berperingkat ke akaun WinkLinks anda.
  • Embed Menunjukkan cara untuk menyematkan grid ini sebagai Grid ke laman web anda.
  • Use with WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyematkan kad ini ke laman web anda.

Kami akan terangkan beberapa pilihan ini dengan lebih terperinci 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 untuk menyematkan grid anda ke laman anda:

  • Baris 3 menunjukkan cara menyematkan gaya Wink ke 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 menyematkan Javascript kami ke laman anda.
  • Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil keutamaan konfigurasi peringkat halaman anda.

API

Section titled “API”

Pembangun yang ingin mengurus grid boleh ke Developers > API > Inventory.

Bacaan lanjut

Section titled “Bacaan lanjut”