Grids

O grilă reprezintă o listă de furnizori și inventar și expune detaliile prin intermediul unei interfețe de utilizator interactive, tip grilă, care poate fi rezervată.

Grila permite afișarea oricărui inventar din lista selectată sau din căutarea salvată.

Un utilizator interacționează cu o grilă în același mod în care interacționează cu o persoană.cardcu o caracteristică suplimentară:

Paginați prin grilă făcând clic peShow morebuton (când sunt disponibile mai multe articole).

Previzualizare grilă — *Grilă care prezintă mai multe tipuri de camere*

Mai sus este un exemplu al grilei noastre care prezintă o listă de carduri cu tipuri de camere.

Restul acestui articol vă va ghida în crearea, personalizarea și expunerea grilei către utilizatori.

Tipuri de grilă

Există trei tipuri de grile:

Grilă bazată pe olistă atent selecționată.
Grilă bazată pe ocăutare salvată.
Grilă bazată pe o locație și criterii de sortare (adică grilă clasată).

Grilă de listă curatoriată

Aceasta este o grilă care folosește inventarul pe care l-ați colectat într-una dintre listele dvs. selectate și transformă lista într-un inventar de călătorii rezervabil pe care îl puteți afișa utilizatorilor dvs.

Crea

Navigați cătreInventory > Curated Listsdin bara principală de navigare. Pentru acest exemplu, vom folosiFavoriteslistă. Dacă nu ați adăugat încă nimic la lista dvs.Favorites, mergeți laCăutaresă înveți cum.

Faceți clic pe Actions buton de pe Favorites listă.
Faceți clic pe Create a grid buton.
Se va afișa o fereastră nouă, permițându-vă să denumiți grila. Vezi mai jos.
Clic OK buton pentru a continua.

Grila dvs. a fost creată. Navigați laTools > Gridsdin bara principală de navigare și faceți clic peCurated Gridspentru a vedea noua grilă.

Personalizare

Formularul vă permite să personalizați grila în următoarele moduri:

Dă-i un nume ca să-ți amintești despre ce este vorba în grilă.
Selectați Personalizare pe care doriți să le aplicați acestei grile.
Selectați fața inițială a cărții pe care doriți ca utilizatorii să o vadă prima. În mod implicit, aceasta este fața originală a inventarului respectiv.
Selectați insigna pe care doriți să o utilizați pe card. O insignă permite utilizatorilor să compare inventarul pe baza unei valori agregate, cum ar fi eco-friendly.
Adăugați cuvinte cheie, separate prin virgulă, care vor fi utilizate de Crawlere web.
Adăugați titluri și descrieri în limbile pe care doriți să le vadă utilizatorul.
Faceți clic pe Save buton pentru a continua.

Distribuie

Grilă de listă curatoriată — *Intrare în grilă cu listă selectată, cu meniu de acțiuni restrâns*

Mai sus vă prezintă o imagine cu toate acțiunile disponibile pentru grila dvs.:

ActualizareActualizează configurația grilei.
Adăugați la WinkLinksAdaugă grila la contul tău WinkLinks.
ÎncorporareVă arată cum să încorporați această grilă caGrilăpe site-ul dvs. web.
Utilizare cu WordPressVă arată cum să folosițiPlugin WordPresspentru a încorpora această grilă în site-ul dvs. web.

Acoperim câteva dintre aceste opțiuni, mai detaliat, mai jos.

Încorporare

<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>

Iată cum să integrați grila în site-ul dvs.:

Linia 3 vă arată cum să încorporați stilurile Wink în site-ul dvs.
Liniile 6-9 vă arată cum să utilizațiîncărcător-de-conținut-winkComponentă Web și spuneți-i să preia o grilă pentru codul dvs.
Linia 11 vă arată cum să încorporați Javascript-ul nostru în site-ul dvs.
Linia 13 vă arată cum să încorporațiîncărcător-aplicații-winkComponentă Web și spuneți-i să preia preferințele dvs. de configurare la nivel de pagină.

Grilă de căutare salvată

Aceasta este o grilă care folosește inventarul din interogarea de căutare salvată și convertește rezultatele căutării în inventar de călătorii rezervabile pe care îl puteți afișa utilizatorilor.

Crea

Navigați cătreInventory > Saved searchesdin bara principală de navigare. Dacă nu ați creat încă o căutare salvată, accesațiCăutaresă înveți cum.

Faceți clic pe Actions butonul din căutarea salvată.
Faceți clic pe Create a grid buton.
Se va afișa o fereastră nouă, permițându-vă să denumiți grila. Vezi mai jos.

ClicOKbuton pentru a continua.

Grila dvs. a fost creată. Navigați laTools > Gridsdin bara principală de navigare și faceți clic peSaved Search Gridspentru a vedea noua grilă.

Personalizare

Formularul vă permite să personalizați grila în următoarele moduri:

Dă-i un nume ca să-ți amintești despre ce este vorba în grilă.
Selectați Personalizare pe care doriți să le aplicați acestei grile.
Selectați fața inițială a cărții pe care doriți ca utilizatorii să o vadă prima. În mod implicit, aceasta este fața originală a inventarului respectiv.
Selectați insigna pe care doriți să o utilizați pe card. O insignă permite utilizatorilor să compare inventarul pe baza unei valori agregate, cum ar fi eco-friendly.
Adăugați cuvinte cheie, separate prin virgulă, care vor fi utilizate de Crawlere web.
Adăugați titluri și descrieri în limbile pe care doriți să le vadă utilizatorul.
Faceți clic pe Save buton pentru a continua.

Distribuie

Grilă de căutare salvată — *Intrare salvată în grilă de căutare cu meniu de acțiuni restrâns*

Încorporare

<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>

Iată cum să integrați grila în site-ul dvs.:

Linia 3 vă arată cum să încorporați stilurile Wink în site-ul dvs.
Liniile 6-9 vă arată cum să utilizațiîncărcător-de-conținut-winkComponentă Web și spuneți-i să preia o grilă pentru codul dvs.
Linia 11 vă arată cum să încorporați Javascript-ul nostru în site-ul dvs.
Linia 13 vă arată cum să încorporațiîncărcător-aplicații-winkComponentă Web și spuneți-i să preia preferințele dvs. de configurare la nivel de pagină.

Grilă clasată

Crea

Creați o grilă clasată navigând laTools > Gridsși faceți clic peRanked GridFaceți clic pe filăCreate ranked gridbuton.

Personalizare

Formularul vă permite să personalizați grila clasată în următoarele moduri:

Alegeți o destinație. De exemplu, Tokyo.
Dă-i un nume ca să-ți amintești despre ce este vorba în grilă. De exemplu, hoteluri ecologice în Tokyo
Selectați Personalizare pe care doriți să le aplicați acestei grile.
Selectați fața inițială a cărții pe care doriți ca utilizatorii să o vadă prima. În mod implicit, aceasta este fața originală a inventarului respectiv.
Alegeți caracteristica după care să sortați proprietățile. De exemplu, ecologic.
Adăugați cuvinte cheie, separate prin virgulă, care vor fi utilizate de Crawlere web.
Adăugați titluri și descrieri în limbile pe care doriți să le vadă utilizatorul.
Faceți clic pe Save buton pentru a continua.

După ce salvezi grila clasată, ești redirecționat către pagina grilelor clasate, iar grila ta este acum gata de partajare cu lumea.

Distribuie

Grilă clasată — *O grilă clasată cu meniu de acțiuni restrâns*

Mai sus vă arată o imagine cu toate acțiunile disponibile pentru grila dvs. rankd:

ActualizareActualizează configurația grilei.
Adăugați la WinkLinksAdaugă grila clasată în contul tău WinkLinks.
ÎncorporareVă arată cum să încorporați această grilă caGrilăpe site-ul dvs. web.
Utilizare cu WordPressVă arată cum să folosițiPlugin WordPresspentru a încorpora acest card în site-ul dvs. web.

Acoperim câteva dintre aceste opțiuni, mai detaliat, mai jos.

Încorporare

<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>

Iată cum să integrați grila în site-ul dvs.:

Linia 3 vă arată cum să încorporați stilurile Wink în site-ul dvs.
Liniile 6-9 vă arată cum să utilizațiîncărcător-de-conținut-winkComponentă Web și spuneți-i să aducă o grilă clasată pentru codul dvs.
Linia 11 vă arată cum să încorporați Javascript-ul nostru în site-ul dvs.
Linia 13 vă arată cum să încorporațiîncărcător-aplicații-winkComponentă Web și spuneți-i să preia preferințele dvs. de configurare la nivel de pagină.

API-ul

Dezvoltatorii care doresc să gestioneze grile pot accesaDezvoltatori > API > Inventar.

Lectură suplimentară

Aflați mai multe despre colecția noastră deComponente web.
Aflați mai multe desprePluginul Wink pentru WordPress.