Skip to content
Academy

Grids

Grid mewakili senarai pembekal dan inventori dan mendedahkan butiran melalui UI grid yang interaktif, boleh ditempah. Grid menyokong memaparkan sebarang inventori daripada senarai susun atur anda atau carian yang disimpan. Pengguna berinteraksi dengan grid dengan cara yang sama dia berinteraksi dengan individu kad dengan satu ciri tambahan:

  1. Halaman melalui grid dengan mengklik pada Show more butang (apabila lebih banyak item tersedia).
Pratonton grid
Grid menunjukkan berbilang jenis bilik

Di atas ialah contoh grid kami yang menunjukkan senarai kad jenis bilik.

Selebihnya artikel ini membimbing anda melalui cara membuat, menyesuaikan dan mendedahkan grid kepada pengguna anda.

Jenis grid

Section titled “Jenis grid”

Terdapat tiga jenis grid:

  1. Grid berdasarkan a senarai susun atur.
  2. Grid berdasarkan a carian disimpan.
  3. Grid grid berdasarkan lokasi dan kriteria isihan (iaitu grid kedudukan).

Grid senarai dipilih susun

Section titled “Grid senarai dipilih susun”

Ini ialah grid yang menggunakan inventori yang telah anda kumpulkan dalam salah satu senarai susun atur anda dan menukar senarai itu kepada inventori perjalanan boleh ditempah yang boleh anda tunjukkan kepada pengguna anda.

Buat

Section titled “Buat”

Navigasi ke Inventory > Curated Lists daripada bar navigasi utama. Untuk contoh ini, kami akan menggunakan anda Favorites senarai. Jika anda masih belum menambah apa-apa pada anda Favorites, pergi ke Cari untuk belajar bagaimana.

Buat grid senarai susun atur
Buat borang grid senarai susun atur
  1. Klik pada Actions butang pada Favorites senarai.
  2. Klik pada Create a grid butang.
  3. Tetingkap baharu akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
  4. klik OK butang untuk meneruskan.

Grid anda telah dibuat. Navigasi ke Tools > Grids dari bar navigasi utama dan klik butang Curated Grids tab untuk melihat grid baharu anda.

Sesuaikan

Section titled “Sesuaikan”

Borang ini membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Beri nama untuk anda mengingati tentang grid itu.
  2. Pilih Penyesuaian anda ingin memohon pada grid ini.
  3. Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
  4. Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori pada metrik agregat seperti eco-friendly.
  5. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik pada Save butang untuk meneruskan.

Kongsi

Section titled “Kongsi”
Grid senarai dipilih susun
Entri grid senarai dipilih susun dengan menu tindakan yang diruntuhkan

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

  • Kemas kini Mengemas kini konfigurasi grid anda.
  • Tambahkan pada WinkLinks Menambahkan grid pada akaun WinkLinks anda.
  • Benamkan Menunjukkan kepada anda cara membenamkan grid ini sebagai a Grid ke dalam laman web anda.
  • Gunakan dengan WordPress Menunjukkan kepada anda cara menggunakan kami Pemalam WordPress untuk membenamkan grid ini ke dalam tapak web anda.

Kami merangkumi beberapa pilihan ini, dengan lebih terperinci, di bawah.

Benamkan

Section titled “Benamkan”
<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 ialah cara untuk membenamkan grid anda ke dalam tapak anda:

  • Baris 3 menunjukkan kepada anda cara membenamkan gaya Wink ke dalam tapak anda.
  • Baris 6 hingga 9 menunjukkan kepada anda cara menggunakan wink-content-loader Komponen Web dan beritahu ia untuk mengambil grid untuk kod anda.
  • Baris 11 menunjukkan kepada anda cara untuk membenamkan Javascript kami ke dalam tapak anda.
  • Baris 13 menunjukkan anda cara membenamkan wink-app-loader Komponen Web dan beritahu ia untuk mengambil pilihan konfigurasi peringkat halaman anda.

Grid carian disimpan

Section titled “Grid carian disimpan”

Ini ialah grid yang menggunakan inventori dalam pertanyaan carian anda yang disimpan dan menukar hasil carian kepada inventori perjalanan boleh ditempah yang boleh anda tunjukkan kepada pengguna anda.

Buat

Section titled “Buat”

Navigasi ke Inventory > Saved searches daripada bar navigasi utama. Jika anda masih belum membuat carian disimpan, pergi ke Cari untuk belajar bagaimana.

Buat grid carian yang disimpan
Buat borang grid carian yang disimpan
  1. Klik pada Actions butang pada carian anda yang disimpan.
  2. Klik pada Create a grid butang.
  3. Tetingkap baharu akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
  1. klik OK butang untuk meneruskan.

Grid anda telah dibuat. Navigasi ke Tools > Grids dari bar navigasi utama dan klik butang Saved Search Grids tab untuk melihat grid baharu anda.

Sesuaikan

Section titled “Sesuaikan”

Borang ini membolehkan anda menyesuaikan grid anda dengan cara berikut:

  1. Beri nama untuk anda mengingati tentang grid itu.
  2. Pilih Penyesuaian anda ingin memohon pada grid ini.
  3. Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
  4. Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori pada metrik agregat seperti eco-friendly.
  5. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  7. Klik pada Save butang untuk meneruskan.

Kongsi

Section titled “Kongsi”
Grid carian disimpan
Entri grid carian disimpan dengan menu tindakan yang diruntuhkan

Benamkan

Section titled “Benamkan”
<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 ialah cara untuk membenamkan grid anda ke dalam tapak anda:

  • Baris 3 menunjukkan kepada anda cara membenamkan gaya Wink ke dalam tapak anda.
  • Baris 6 hingga 9 menunjukkan kepada anda cara menggunakan wink-content-loader Komponen Web dan beritahu ia untuk mengambil grid untuk kod anda.
  • Baris 11 menunjukkan kepada anda cara untuk membenamkan Javascript kami ke dalam tapak anda.
  • Baris 13 menunjukkan kepada anda cara membenamkan wink-app-loader Komponen Web dan beritahu ia untuk mengambil pilihan konfigurasi peringkat halaman anda.

Grid kedudukan

Section titled “Grid kedudukan”

Buat

Section titled “Buat”

Buat grid kedudukan dengan menavigasi ke Tools > Grids dan klik pada Ranked Grid tab. Klik pada Create ranked grid butang.

Sesuaikan

Section titled “Sesuaikan”

Borang ini membolehkan anda menyesuaikan grid kedudukan anda dengan cara berikut:

  1. Pilih destinasi. Cth. Tokyo.
  2. Beri nama untuk anda mengingati tentang grid itu. Cth. Hotel mesra alam di Tokyo
  3. Pilih Penyesuaian anda ingin memohon pada grid ini.
  4. Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
  5. Pilih ciri untuk mengisih sifat. Cth. mesra alam.
  6. Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  7. Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
  8. Klik pada Save butang untuk meneruskan.

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

Kongsi

Section titled “Kongsi”
Grid kedudukan
Grid berperingkat dengan menu tindakan yang runtuh

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

  • Kemas kini Mengemas kini konfigurasi grid anda.
  • Tambahkan pada WinkLinks Menambahkan grid terperingkat pada akaun WinkLinks anda.
  • Benamkan Menunjukkan kepada anda cara membenamkan grid ini sebagai a Grid ke dalam laman web anda.
  • Gunakan dengan WordPress Menunjukkan kepada anda cara menggunakan kami Pemalam WordPress untuk membenamkan kad ini ke dalam tapak web anda.

Kami merangkumi beberapa pilihan ini, dengan lebih terperinci, di bawah.

Benamkan

Section titled “Benamkan”
<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 ialah cara untuk membenamkan grid anda ke dalam tapak anda:

  • Baris 3 menunjukkan kepada anda cara membenamkan gaya Wink ke dalam tapak anda.
  • Baris 6 hingga 9 menunjukkan kepada anda cara menggunakan wink-content-loader Komponen Web dan beritahu ia untuk mengambil grid terperingkat untuk kod anda.
  • Baris 11 menunjukkan kepada anda cara untuk membenamkan Javascript kami ke dalam tapak anda.
  • Baris 13 menunjukkan kepada anda cara membenamkan wink-app-loader Komponen Web dan beritahu ia untuk mengambil pilihan konfigurasi peringkat halaman anda.

API

Section titled “API”

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

Bacaan lanjut

Section titled “Bacaan lanjut”