Sari la conținut

Grile

O grilă reprezintă o listă de furnizori și inventar și expune detaliile printr-o interfață interactivă, rezervabilă, de tip grilă. Grila suportă afișarea oricărui inventar din lista ta curată sau căutarea salvată. Un utilizator interacționează cu o grilă în același mod în care interacționează cu un card individual, cu o caracteristică suplimentară:

  1. Parcurge grila pagină cu pagină făcând clic pe butonul Arată mai mult (când sunt disponibile mai multe elemente).
Previzualizare grilă
Grilă care afișează mai multe tipuri de camere

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

Restul acestui articol te ghidează cum să creezi, personalizezi și să expui grila către utilizatorii tăi.

Există trei tipuri de grile:

  1. Grilă bazată pe o listă curată.
  2. Grilă bazată pe o căutare salvată.
  3. Grilă bazată pe o locație și criterii de sortare (adică Grilă clasificată).

Aceasta este o grilă care folosește inventarul pe care l-ai colectat într-una dintre listele tale curate și convertește lista în inventar de călătorie rezervabil pe care îl poți afișa utilizatorilor tăi.

Navighează la Inventar > Liste curate din bara principală de navigare. Pentru acest exemplu, vom folosi lista ta Favorite. Dacă nu ai adăugat încă nimic în Favorite, mergi la Căutare pentru a învăța cum.

Creare grilă listă curată
Formular de creare grilă listă curată
  1. Apasă butonul Acțiuni pe lista Favorite.
  2. Apasă butonul Creează o grilă.
  3. Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.
  4. Apasă butonul OK pentru a continua.

Grila ta a fost creată. Navighează la Unelte > Grile din bara principală de navigare și apasă pe fila Grile curate pentru a vedea noua ta grilă.

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

  1. Dă-i un nume pentru a-ți aminti despre ce este grila.
  2. Selectează Personalizarea pe care vrei să o aplici acestei grile.
  3. Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
  4. Selectează insigna pe care vrei să o folosești pe card. O insignă permite utilizatorilor să compare inventarul pe o metrică agregată, cum ar fi eco-friendly.
  5. Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
  6. Adaugă titluri și descrieri în limbile pe care vrei ca utilizatorul să le vadă.
  7. Apasă butonul Salvează pentru a continua.
Grilă listă curată
Intrare grilă listă curată cu meniul de acțiuni restrâns

Mai sus vezi o imagine cu toate acțiunile disponibile pentru grila ta:

  • Actualizează Actualizează configurația grilei tale.
  • Adaugă la WinkLinks Adaugă grila în contul tău WinkLinks.
  • Încorporează Îți arată cum să încorporezi această grilă ca un Grid în site-ul tău.
  • Folosește cu WordPress Îți arată cum să folosești pluginul nostru WordPress pentru a încorpora această grilă în site-ul tău.

Vom detalia unele dintre aceste opțiuni mai jos.

<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ă încorporezi grila în site-ul tău:

  • Linia 3 îți arată cum să încorporezi stilurile Wink în site-ul tău.
  • Liniile 6 până la 9 îți arată cum să folosești componenta Web wink-content-loader și să îi spui să preia o grilă pentru codul tău.
  • Linia 11 îți arată cum să încorporezi Javascript-ul nostru în site.
  • Linia 13 îți arată cum să încorporezi componenta Web wink-app-loader și să îi spui să preia preferințele tale de configurare la nivel de pagină.

Aceasta este o grilă care folosește inventarul din interogarea ta de căutare salvată și convertește rezultatele căutării în inventar de călătorie rezervabil pe care îl poți afișa utilizatorilor tăi.

Navighează la Inventar > Căutări salvate din bara principală de navigare. Dacă nu ai creat încă o căutare salvată, mergi la Căutare pentru a învăța cum.

Creare grilă căutare salvată
Formular de creare grilă căutare salvată
  1. Apasă butonul Acțiuni pe căutarea ta salvată.
  2. Apasă butonul Creează o grilă.
  3. Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.
  1. Apasă butonul OK pentru a continua.

Grila ta a fost creată. Navighează la Unelte > Grile din bara principală de navigare și apasă pe fila Grile căutări salvate pentru a vedea noua ta grilă.

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

  1. Dă-i un nume pentru a-ți aminti despre ce este grila.
  2. Selectează Personalizarea pe care vrei să o aplici acestei grile.
  3. Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
  4. Selectează insigna pe care vrei să o folosești pe card. O insignă permite utilizatorilor să compare inventarul pe o metrică agregată, cum ar fi eco-friendly.
  5. Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
  6. Adaugă titluri și descrieri în limbile pe care vrei ca utilizatorul să le vadă.
  7. Apasă butonul Salvează pentru a continua.
Grilă căutare salvată
Intrare grilă căutare salvată cu meniul de acțiuni restrâns
<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ă încorporezi grila în site-ul tău:

  • Linia 3 îți arată cum să încorporezi stilurile Wink în site-ul tău.
  • Liniile 6 până la 9 îți arată cum să folosești componenta Web wink-content-loader și să îi spui să preia o grilă pentru codul tău.
  • Linia 11 îți arată cum să încorporezi Javascript-ul nostru în site.
  • Linia 13 îți arată cum să încorporezi componenta Web wink-app-loader și să îi spui să preia preferințele tale de configurare la nivel de pagină.

Creează o grilă clasificată navigând la Unelte > Grile și fă clic pe fila Grilă clasificată. Apasă butonul Creează grilă clasificată.

Formularul îți permite să personalizezi grila clasificată în următoarele moduri:

  1. Alege o destinație. Ex. Tokyo.
  2. Dă-i un nume pentru a-ți aminti despre ce este grila. Ex. Hoteluri eco-friendly în Tokyo
  3. Selectează Personalizarea pe care vrei să o aplici acestei grile.
  4. Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
  5. Alege caracteristica după care să sortezi proprietățile. Ex. Eco-friendly.
  6. Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
  7. Adaugă titluri și descrieri în limbile pe care vrei ca utilizatorul să le vadă.
  8. Apasă butonul Salvează pentru a continua.

După salvarea grilei clasificate, vei fi redirecționat către pagina ta cu grile clasificate și grila ta este acum gata să fie distribuită lumii.

Grilă clasificată
O grilă clasificată cu meniul de acțiuni restrâns

Mai sus vezi o imagine cu toate acțiunile disponibile pentru grila ta clasificată:

  • Actualizează Actualizează configurația grilei tale.
  • Adaugă la WinkLinks Adaugă grila clasificată în contul tău WinkLinks.
  • Încorporează Îți arată cum să încorporezi această grilă ca un Grid în site-ul tău.
  • Folosește cu WordPress Îți arată cum să folosești pluginul nostru WordPress pentru a încorpora această grilă în site-ul tău.

Vom detalia unele dintre aceste opțiuni mai jos.

<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ă încorporezi grila în site-ul tău:

  • Linia 3 îți arată cum să încorporezi stilurile Wink în site-ul tău.
  • Liniile 6 până la 9 îți arată cum să folosești componenta Web wink-content-loader și să îi spui să preia o grilă clasificată pentru codul tău.
  • Linia 11 îți arată cum să încorporezi Javascript-ul nostru în site.
  • Linia 13 îți arată cum să încorporezi componenta Web wink-app-loader și să îi spui să preia preferințele tale de configurare la nivel de pagină.

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