Grids
Grid mewakili daftar pemasok dan inventaris dan memperlihatkan detailnya melalui UI grid yang interaktif dan dapat dipesan. Grid mendukung tampilan inventaris apa pun dari daftar pilihan atau pencarian tersimpan Anda. Pengguna berinteraksi dengan grid dengan cara yang sama seperti saat berinteraksi dengan individukartudengan satu fitur tambahan:
- Membagi halaman melalui grid dengan mengklik
Show more
tombol (ketika lebih banyak item tersedia).
Di atas adalah contoh kisi kami yang menunjukkan daftar kartu jenis kamar.
Sisa artikel ini memandu Anda untuk membuat, menyesuaikan, dan memaparkan grid kepada pengguna.
Jenis kisi
Section titled “Jenis kisi”Ada tiga jenis grid:
- Grid berdasarkandaftar yang dikurasi.
- Grid berdasarkanpencarian tersimpan.
- Grid grid berdasarkan lokasi dan kriteria sortir (yaitu Grid berperingkat).
Kisi daftar yang dikurasi
Section titled “Kisi daftar yang dikurasi”Ini adalah kisi yang menggunakan inventaris yang telah Anda kumpulkan dalam salah satu daftar pilihan Anda dan mengubah daftar tersebut menjadi inventaris perjalanan yang dapat dipesan yang dapat Anda perlihatkan kepada pengguna Anda.
Membuat
Section titled “Membuat”Navigasi keInventory > Curated Lists
dari bilah navigasi utama. Untuk contoh ini, kami akan menggunakanFavorites
daftar.
Jika Anda belum menambahkan apa pun ke daftar AndaFavorites
, pergi keMencariuntuk mempelajari caranya.
- Klik tombol
Actions
tombol padaFavorites
daftar. - Klik tombol
Create a grid
tombol. - Sebuah jendela baru akan ditampilkan, memungkinkan Anda memberi nama jaringan Anda. Lihat di bawah.
- Klik
OK
untuk melanjutkan.
Jaringan Anda telah dibuat. Navigasi keTools > Grids
dari bilah navigasi utama dan klikCurated Grids
untuk melihat jaringan baru Anda.
Sesuaikan
Section titled “Sesuaikan”Formulir ini memungkinkan Anda menyesuaikan kisi Anda dengan cara berikut:
- Berikan nama supaya Anda dapat mengingat tentang apa grid itu.
- Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
- Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
- Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris pada metrik agregat seperti
eco-friendly
. - Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
- Klik tombol
Save
untuk melanjutkan.
Membagikan
Section titled “Membagikan”Di atas menunjukkan gambar dengan semua tindakan yang tersedia untuk jaringan Anda:
- MemperbaruiMemperbarui konfigurasi jaringan Anda.
- Tambahkan ke WinkLinksMenambahkan jaringan ke akun WinkLinks Anda.
- MenanamkanMenunjukkan cara menanamkan grid ini sebagaiJaringanke situs web Anda.
- Gunakan dengan WordPressMenunjukkan cara menggunakan kamiPlugin WordPressuntuk menanamkan kisi ini ke situs web Anda.
Kami membahas beberapa opsi ini, secara lebih rinci, di bawah ini.
Menanamkan
Section titled “Menanamkan”<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 menanamkan grid ke situs Anda:
- Baris 3 menunjukkan cara menanamkan gaya Wink ke situs Anda.
- Baris 6 hingga 9 menunjukkan cara menggunakanwink-konten-pemuatKomponen Web dan memintanya untuk mengambil kisi untuk kode Anda.
- Baris 11 menunjukkan cara menanamkan Javascript ke situs Anda.
- Baris 13 menunjukkan cara menanamkanpemuat-aplikasi-winkKomponen Web dan memintanya untuk mengambil preferensi konfigurasi tingkat halaman Anda.
Kisi pencarian tersimpan
Section titled “Kisi pencarian tersimpan”Ini adalah kisi yang menggunakan inventaris pada kueri penelusuran tersimpan dan mengubah hasil penelusuran menjadi inventaris perjalanan yang dapat dipesan yang dapat Anda tampilkan kepada pengguna.
Membuat
Section titled “Membuat”Navigasi keInventory > Saved searches
dari bilah navigasi utama.
Jika Anda belum membuat pencarian tersimpan, bukaMencariuntuk mempelajari caranya.
- Klik tombol
Actions
pada pencarian Anda yang tersimpan. - Klik tombol
Create a grid
tombol. - Sebuah jendela baru akan ditampilkan, memungkinkan Anda memberi nama jaringan Anda. Lihat di bawah.
- Klik
OK
untuk melanjutkan.
Jaringan Anda telah dibuat. Navigasi keTools > Grids
dari bilah navigasi utama dan klikSaved Search Grids
untuk melihat jaringan baru Anda.
Sesuaikan
Section titled “Sesuaikan”Formulir ini memungkinkan Anda menyesuaikan kisi Anda dengan cara berikut:
- Berikan nama supaya Anda dapat mengingat tentang apa grid itu.
- Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
- Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
- Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris pada metrik agregat seperti
eco-friendly
. - Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
- Klik tombol
Save
untuk melanjutkan.
Membagikan
Section titled “Membagikan”Menanamkan
Section titled “Menanamkan”<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 menanamkan grid ke situs Anda:
- Baris 3 menunjukkan cara menanamkan gaya Wink ke situs Anda.
- Baris 6 hingga 9 menunjukkan cara menggunakanwink-konten-pemuatKomponen Web dan memintanya untuk mengambil kisi untuk kode Anda.
- Baris 11 menunjukkan cara menanamkan Javascript ke situs Anda.
- Baris 13 menunjukkan cara menanamkanpemuat-aplikasi-winkKomponen Web dan memintanya untuk mengambil preferensi konfigurasi tingkat halaman Anda.
Kisi peringkat
Section titled “Kisi peringkat”Membuat
Section titled “Membuat”Buat kisi peringkat dengan menavigasi keTools > Grids
dan klik padaRanked Grid
tab. Klik padaCreate ranked grid
tombol.
Sesuaikan
Section titled “Sesuaikan”Formulir ini memungkinkan Anda menyesuaikan kisi peringkat Anda dengan cara berikut:
- Pilih tujuan. Misalnya Tokyo.
- Berikan nama supaya Anda dapat mengingat tentang apa grid itu. Misalnya hotel ramah lingkungan di Tokyo
- Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
- Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
- Pilih karakteristik untuk mengurutkan properti. Misalnya Ramah Lingkungan.
- Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
- Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
- Klik tombol
Save
untuk melanjutkan.
Setelah menyimpan kisi peringkat Anda, Anda akan diarahkan ke halaman kisi peringkat Anda dan kisi Anda kini siap dibagikan ke seluruh dunia.
Membagikan
Section titled “Membagikan”Di atas menunjukkan gambar dengan semua tindakan yang tersedia untuk grid peringkat Anda:
- MemperbaruiMemperbarui konfigurasi jaringan Anda.
- Tambahkan ke WinkLinksMenambahkan kisi peringkat ke akun WinkLinks Anda.
- MenanamkanMenunjukkan cara menanamkan grid ini sebagaiJaringanke situs web Anda.
- Gunakan dengan WordPressMenunjukkan cara menggunakan kamiPlugin WordPressuntuk menyematkan kartu ini ke situs web Anda.
Kami membahas beberapa opsi ini, secara lebih rinci, di bawah ini.
Menanamkan
Section titled “Menanamkan”<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 menanamkan grid ke situs Anda:
- Baris 3 menunjukkan cara menanamkan gaya Wink ke situs Anda.
- Baris 6 hingga 9 menunjukkan cara menggunakanwink-konten-pemuatKomponen Web dan memintanya untuk mengambil kisi berperingkat untuk kode Anda.
- Baris 11 menunjukkan cara menanamkan Javascript ke situs Anda.
- Baris 13 menunjukkan cara menanamkanpemuat-aplikasi-winkKomponen Web dan memintanya untuk mengambil preferensi konfigurasi tingkat halaman Anda.
Pengembang yang ingin mengelola jaringan dapat menuju kePengembang > API > Inventaris.
Bacaan lebih lanjut
Section titled “Bacaan lebih lanjut”- Pelajari lebih lanjut tentang koleksi kamiKomponen Web.
- Pelajari lebih lanjut tentangPlugin WordPress Wink.