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:
- Halaman melalui grid dengan mengklik pada
Show more
butang (apabila lebih banyak item tersedia).
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:
- Grid berdasarkan a senarai susun atur.
- Grid berdasarkan a carian disimpan.
- 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.
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.
- Klik pada
Actions
butang padaFavorites
senarai. - Klik pada
Create a grid
butang. - Tetingkap baharu akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
- 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:
- Beri nama untuk anda mengingati tentang grid itu.
- Pilih Penyesuaian anda ingin memohon pada grid ini.
- Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
- Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori pada metrik agregat seperti
eco-friendly
. - Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
- Klik pada
Save
butang untuk meneruskan.
Kongsi
Section titled “Kongsi”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.
Navigasi ke Inventory > Saved searches
daripada bar navigasi utama.
Jika anda masih belum membuat carian disimpan, pergi ke Cari untuk belajar bagaimana.
- Klik pada
Actions
butang pada carian anda yang disimpan. - Klik pada
Create a grid
butang. - Tetingkap baharu akan dipaparkan, membolehkan anda menamakan grid anda. Lihat di bawah.
- 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:
- Beri nama untuk anda mengingati tentang grid itu.
- Pilih Penyesuaian anda ingin memohon pada grid ini.
- Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
- Pilih lencana yang anda mahu gunakan pada kad. Lencana membolehkan pengguna membandingkan inventori pada metrik agregat seperti
eco-friendly
. - Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
- Klik pada
Save
butang untuk meneruskan.
Kongsi
Section titled “Kongsi”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 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:
- Pilih destinasi. Cth. Tokyo.
- Beri nama untuk anda mengingati tentang grid itu. Cth. Hotel mesra alam di Tokyo
- Pilih Penyesuaian anda ingin memohon pada grid ini.
- Pilih muka kad awal yang anda mahu pengguna lihat dahulu. Secara lalai, ia ialah wajah asli inventori itu.
- Pilih ciri untuk mengisih sifat. Cth. mesra alam.
- Tambah kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan tajuk dan penerangan dalam bahasa yang anda mahu pengguna lihat.
- 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”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.
Pembangun yang ingin mengurus grid boleh pergi ke Pembangun > API > Inventori.
Bacaan lanjut
Section titled “Bacaan lanjut”- Ketahui lebih lanjut tentang koleksi kami Komponen Web.
- Ketahui lebih lanjut tentang Pemalam Wink WordPress.