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ă:
- Parcurge grila pagină cu pagină făcând clic pe butonul
Arată mai mult(când sunt disponibile mai multe elemente).
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
Section titled “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ă bazată pe listă curată
Section titled “Grilă bazată pe listă curată”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.
Creare
Section titled “Creare”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.
- Apasă butonul
Acțiunipe listaFavorite. - Apasă butonul
Creează o grilă. - Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.
- Apasă butonul
OKpentru 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ă.
Personalizare
Section titled “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ă.
- Apasă butonul
Salveazăpentru a continua.
Distribuire
Section titled “Distribuire”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
Section titled “Î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ă bazată pe căutare salvată
Section titled “Grilă bazată pe căutare salvată”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.
Creare
Section titled “Creare”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.
- Apasă butonul
Acțiunipe căutarea ta salvată. - Apasă butonul
Creează o grilă. - Se va deschide o fereastră nouă care îți permite să denumești grila. Vezi mai jos.
- Apasă butonul
OKpentru 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ă.
Personalizare
Section titled “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ă.
- Apasă butonul
Salveazăpentru a continua.
Distribuire
Section titled “Distribuire”Încorporare
Section titled “Î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ă
Section titled “Grilă clasificată”Creare
Section titled “Creare”Creează o grilă clasificată navigând la Unelte > Grile și fă clic pe fila Grilă clasificată. Apasă butonul Creează grilă clasificată.
Personalizare
Section titled “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ă.
- 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.
Distribuire
Section titled “Distribuire”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.
Încorporare
Section titled “Î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ă.
Dezvoltatorii care doresc să gestioneze grile pot accesa Dezvoltatori > API > Inventar.
Lecturi suplimentare
Section titled “Lecturi suplimentare”- Află mai multe despre colecția noastră de Componente Web.
- Află mai multe despre pluginul Wink pentru WordPress.