Lewati ke konten
Academy

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:

  1. Membagi halaman melalui grid dengan mengklikShow more tombol (ketika lebih banyak item tersedia).
Pratinjau kisi
Kisi yang menunjukkan beberapa tipe kamar

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:

  1. Grid berdasarkandaftar yang dikurasi.
  2. Grid berdasarkanpencarian tersimpan.
  3. 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 Listsdari bilah navigasi utama. Untuk contoh ini, kami akan menggunakanFavoritesdaftar. Jika Anda belum menambahkan apa pun ke daftar AndaFavorites, pergi keMencariuntuk mempelajari caranya.

Buat kisi daftar kurator
Buat formulir kisi daftar yang dikurasi
  1. Klik tombol Actions tombol pada Favorites daftar.
  2. Klik tombol Create a grid tombol.
  3. Sebuah jendela baru akan ditampilkan, memungkinkan Anda memberi nama jaringan Anda. Lihat di bawah.
  4. Klik OK untuk melanjutkan.

Jaringan Anda telah dibuat. Navigasi keTools > Gridsdari bilah navigasi utama dan klikCurated Gridsuntuk melihat jaringan baru Anda.

Sesuaikan

Section titled “Sesuaikan”

Formulir ini memungkinkan Anda menyesuaikan kisi Anda dengan cara berikut:

  1. Berikan nama supaya Anda dapat mengingat tentang apa grid itu.
  2. Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
  3. Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
  4. Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris pada metrik agregat seperti eco-friendly.
  5. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
  7. Klik tombol Save untuk melanjutkan.

Membagikan

Section titled “Membagikan”
Kisi daftar yang dikurasi
Entri kisi daftar yang dikurasi dengan menu tindakan yang diciutkan

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 searchesdari bilah navigasi utama. Jika Anda belum membuat pencarian tersimpan, bukaMencariuntuk mempelajari caranya.

Buat kisi pencarian tersimpan
Buat formulir kisi pencarian tersimpan
  1. Klik tombol Actions pada pencarian Anda yang tersimpan.
  2. Klik tombol Create a grid tombol.
  3. Sebuah jendela baru akan ditampilkan, memungkinkan Anda memberi nama jaringan Anda. Lihat di bawah.
  1. KlikOKuntuk melanjutkan.

Jaringan Anda telah dibuat. Navigasi keTools > Gridsdari bilah navigasi utama dan klikSaved Search Gridsuntuk melihat jaringan baru Anda.

Sesuaikan

Section titled “Sesuaikan”

Formulir ini memungkinkan Anda menyesuaikan kisi Anda dengan cara berikut:

  1. Berikan nama supaya Anda dapat mengingat tentang apa grid itu.
  2. Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
  3. Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
  4. Pilih lencana yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris pada metrik agregat seperti eco-friendly.
  5. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
  7. Klik tombol Save untuk melanjutkan.

Membagikan

Section titled “Membagikan”
Kisi pencarian tersimpan
Entri kisi pencarian tersimpan dengan menu tindakan yang diciutkan

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 > Gridsdan klik padaRanked Gridtab. Klik padaCreate ranked grid tombol.

Sesuaikan

Section titled “Sesuaikan”

Formulir ini memungkinkan Anda menyesuaikan kisi peringkat Anda dengan cara berikut:

  1. Pilih tujuan. Misalnya Tokyo.
  2. Berikan nama supaya Anda dapat mengingat tentang apa grid itu. Misalnya hotel ramah lingkungan di Tokyo
  3. Pilih Kustomisasi yang ingin Anda terapkan pada jaringan ini.
  4. Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
  5. Pilih karakteristik untuk mengurutkan properti. Misalnya Ramah Lingkungan.
  6. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  7. Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
  8. 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”
Kisi peringkat
Kotak peringkat dengan menu tindakan yang diciutkan

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.

API

Section titled “API”

Pengembang yang ingin mengelola jaringan dapat menuju kePengembang > API > Inventaris.

Bacaan lebih lanjut

Section titled “Bacaan lebih lanjut”