Grile

O grilă reprezintă o listă de furnizori și inventar și expune detaliile printr-o interfață interactivă, rezervabilă, sub formă de 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ă:

Navighează prin grilă 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.

Tipuri de grile

Există trei tipuri de grile:

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

Grilă din listă curată

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

Creare

Navighează la 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.

Fă clic pe butonul Acțiuni de pe lista Favorite.
Fă clic pe butonul Creează o grilă.
Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.
Fă clic pe butonul OK pentru a continua.

Grila ta a fost creată. Navighează la Grile din bara principală de navigare și fă clic pe fila Curate pentru a vedea noua ta grilă.

Personalizare

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

Dă-i un nume pentru a-ți aminti despre ce este grila.
Selectează Personalizarea pe care vrei să o aplici acestei grile.
Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
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.
Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
Adaugă titluri și descrieri în limbile pe care vrei ca utilizatorul să le vadă.
Fă clic pe butonul Salvează pentru a continua.

Distribuire

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.

Î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ă î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ă.

Grilă din căutare salvată

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

Creare

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

Fă clic pe butonul Acțiuni de pe căutarea ta salvată.
Fă clic pe butonul Creează o grilă.
Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.

Fă clic pe butonul OK pentru a continua.

Grila ta a fost creată. Navighează la Grile din bara principală de navigare și fă clic pe fila Căutări pentru a vedea noua ta grilă.

Personalizare

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

Dă-i un nume pentru a-ți aminti despre ce este grila.
Selectează Personalizarea pe care vrei să o aplici acestei grile.
Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
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.
Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
Adaugă titluri și descrieri în limbile pe care vrei ca utilizatorul să le vadă.
Fă clic pe butonul Salvează pentru a continua.

Distribuire

Grilă căutare salvată — *Intrare grilă căutare salvată cu meniul 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ă î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ă.

Grilă clasificată

Creare

Creează o grilă clasificată navigând la Grile și făcând clic pe fila Clasificate. Fă clic pe butonul Creează grilă clasificată.

Personalizare

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

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

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

Distribuire

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 acest card în site-ul tău.

Vom detalia unele dintre aceste opțiuni 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ă î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ă.

API

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

Lecturi suplimentare

Află mai multe despre colecția noastră de Componente Web.
Află mai multe despre pluginul Wink pentru WordPress.