Grids
A rács a beszállítók és a készlet listáját ábrázolja, és egy interaktív, foglalható rácsos felhasználói felületen keresztül jeleníti meg a részleteket.
A rács támogatja a kurátori listából vagy a mentett keresésből származó készletek megjelenítését. A felhasználó ugyanúgy kommunikál a ráccsal, mint egy személlyel.kártyaegy további funkcióval:
- Lapozzon a rácson a gombra kattintva
Show more
gomb (amikor több tétel elérhető).
Fent látható egy példa a szobatípus-kártyák listáját mutató rácsunkra.
A cikk további része bemutatja, hogyan hozhatja létre, szabhatja testre és teheti elérhetővé a rácsot a felhasználók számára.
Rácstípusok
Szekció neve “Rácstípusok”Háromféle rács létezik:
- Rács alapjánkurátori lista.
- Rács alapjánmentett keresés.
- Helyszínen és rendezési kritériumokon alapuló rács (azaz rangsorolt rács).
Kurátori listarács
Szekció neve “Kurátori listarács”Ez egy rács, amely az egyik válogatott listádban összegyűjtött készletet használja fel, és a listát foglalható utazási készletté alakítja, amelyet megjeleníthetsz a felhasználóidnak.
Teremt
Szekció neve “Teremt”Navigálás ide:Inventory > Curated Lists
a fő navigációs sávról. Ebben a példában a következőt fogjuk használni:Favorites
listához.
Ha még nem tettél fel semmit a listádraFavorites
, menj ideKereséshogy megtanulja, hogyan.
- Kattintson a
Actions
gombot aFavorites
lista. - Kattintson a
Create a grid
gomb. - Egy új ablak jelenik meg, ahol elnevezheted a rácsot. Lásd alább.
- Kattintás
OK
gombot a folytatáshoz.
A rács létrehozva. Navigáljon ide:Tools > Grids
a fő navigációs sávon, és kattintson aCurated Grids
fülre az új rács megtekintéséhez.
Testreszabás
Szekció neve “Testreszabás”Az űrlap lehetővé teszi a rács testreszabását a következő módokon:
- Adj neki egy nevet, hogy emlékezhess, miről szól a rács.
- Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
- Válaszd ki azt a kártyalapot, amelyet először szeretnél, hogy a felhasználók lássanak. Alapértelmezés szerint ez az adott készlet natív oldala.
- Válassza ki a kártyán használni kívánt jelvényt. A jelvény lehetővé teszi a felhasználók számára, hogy a készletet egy összesített mutató alapján hasonlítsák össze, például
eco-friendly
. - Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
- Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
- Kattintson a
Save
gombot a folytatáshoz.
Részesedés
Szekció neve “Részesedés”A fenti képen láthatók a rácshoz elérhető összes művelet:
- FrissítésFrissíti a rács konfigurációját.
- Hozzáadás a WinkLinkshezHozzáadja a rácsot a WinkLinks fiókodhoz.
- BeágyazMegmutatja, hogyan ágyazhatod be ezt a rácsot egyRácsa weboldaladra.
- WordPress-szel használhatóMegmutatja, hogyan kell használni a miWordPress bővítményhogy beágyazd ezt a rácsot a weboldaladba.
Ezen lehetőségek némelyikét részletesebben az alábbiakban tárgyaljuk.
Beágyaz
Szekció neve “Beágyaz”<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>
Így ágyazhatod be a rácsot a webhelyedbe:
- A 3. sor bemutatja, hogyan ágyazhatod be a Wink stílusokat a webhelyedbe.
- A 6–9. sorok bemutatják, hogyan kell használni awink-tartalom-betöltőWebkomponenst, és mondd meg neki, hogy kérjen le egy rácsot a kódodhoz.
- A 11. sor bemutatja, hogyan ágyazhatod be a JavaScriptünket a webhelyedbe.
- A 13. sor bemutatja, hogyan kell beágyazni awink-app-loaderWebkomponenst, és utasítsd arra, hogy kérje le az oldalszintű konfigurációs beállításait.
Mentett keresési rács
Szekció neve “Mentett keresési rács”Ez egy rács, amely a mentett keresési lekérdezésben szereplő készletet használja, és a keresési eredményeket foglalható utazási készletté alakítja, amelyet megjeleníthet a felhasználóinak.
Teremt
Szekció neve “Teremt”Navigálás ide:Inventory > Saved searches
a fő navigációs sávról.
Ha még nem hozott létre mentett keresést, látogasson el a következőre:Kereséshogy megtanulja, hogyan.
- Kattintson a
Actions
gombra a mentett keresésnél. - Kattintson a
Create a grid
gomb. - Egy új ablak jelenik meg, ahol elnevezheted a rácsot. Lásd alább.
- Kattintás
OK
gombot a folytatáshoz.
A rács létrehozva. Navigáljon ide:Tools > Grids
a fő navigációs sávon, és kattintson aSaved Search Grids
fülre az új rács megtekintéséhez.
Testreszabás
Szekció neve “Testreszabás”Az űrlap lehetővé teszi a rács testreszabását a következő módokon:
- Adj neki egy nevet, hogy emlékezhess, miről szól a rács.
- Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
- Válaszd ki azt a kártyalapot, amelyet először szeretnél, hogy a felhasználók lássanak. Alapértelmezés szerint ez az adott készlet natív oldala.
- Válassza ki a kártyán használni kívánt jelvényt. A jelvény lehetővé teszi a felhasználók számára, hogy a készletet egy összesített mutató alapján hasonlítsák össze, például
eco-friendly
. - Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
- Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
- Kattintson a
Save
gombot a folytatáshoz.
Részesedés
Szekció neve “Részesedés”Beágyaz
Szekció neve “Beágyaz”<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>
Így ágyazhatod be a rácsot a webhelyedbe:
- A 3. sor bemutatja, hogyan ágyazhatod be a Wink stílusokat a webhelyedbe.
- A 6–9. sorok bemutatják, hogyan kell használni awink-tartalom-betöltőWebkomponenst, és mondd meg neki, hogy kérjen le egy rácsot a kódodhoz.
- A 11. sor bemutatja, hogyan ágyazhatod be a JavaScriptünket a webhelyedbe.
- A 13. sor bemutatja, hogyan kell beágyazni awink-app-loaderWebkomponenst, és utasítsd arra, hogy kérje le az oldalszintű konfigurációs beállításait.
Rangsorolt rács
Szekció neve “Rangsorolt rács”Teremt
Szekció neve “Teremt”Rangsorolt rács létrehozása a következőhöz való navigálással:Tools > Grids
és kattintson aRanked Grid
fülre. Kattintson aCreate ranked grid
gomb.
Testreszabás
Szekció neve “Testreszabás”Az űrlap lehetővé teszi a rangsorolt rács testreszabását a következő módokon:
- Válasszon egy úti célt. Pl. Tokió.
- Adj neki egy nevet, hogy emlékezhess, miről szól a rács. Pl. környezetbarát szállodák Tokióban
- Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
- Válaszd ki azt a kártyalapot, amelyet először szeretnél, hogy a felhasználók lássanak. Alapértelmezés szerint ez az adott készlet natív oldala.
- Válassza ki, hogy milyen jellemző alapján szeretné rendezni az ingatlanokat. Pl. környezetbarátság.
- Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
- Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
- Kattintson a
Save
gombot a folytatáshoz.
A rangsorolt rács mentése után a rendszer átirányít a rangsorolt rácsok oldalára, és a rács készen áll a megosztásra a világgal.
Részesedés
Szekció neve “Részesedés”A fenti képen látható a rangsorolt rácsodhoz elérhető összes művelet:
- FrissítésFrissíti a rács konfigurációját.
- Hozzáadás a WinkLinkshezHozzáadja a rangsorolt rácsot a WinkLinks fiókodhoz.
- BeágyazMegmutatja, hogyan ágyazhatod be ezt a rácsot egyRácsa weboldaladra.
- WordPress-szel használhatóMegmutatja, hogyan kell használni a miWordPress bővítményhogy beágyazd ezt a kártyát a weboldaladba.
Ezen lehetőségek némelyikét részletesebben az alábbiakban tárgyaljuk.
Beágyaz
Szekció neve “Beágyaz”<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>
Így ágyazhatod be a rácsot a webhelyedbe:
- A 3. sor bemutatja, hogyan ágyazhatod be a Wink stílusokat a webhelyedbe.
- A 6–9. sorok bemutatják, hogyan kell használni awink-tartalom-betöltőWebkomponenst, és mondd meg neki, hogy kérjen le egy rangsorolt rácsot a kódodhoz.
- A 11. sor bemutatja, hogyan ágyazhatod be a JavaScriptünket a webhelyedbe.
- A 13. sor bemutatja, hogyan kell beágyazni awink-app-loaderWebkomponenst, és utasítsd arra, hogy kérje le az oldalszintű konfigurációs beállításait.
A fejlesztők, akik rácsokat szeretnének kezelni, ellátogathatnak ide:Fejlesztők > API > Leltár.
További olvasmányok
Szekció neve “További olvasmányok”- Tudjon meg többet a kollekciónkrólWebkomponensek.
- Tudjon meg többet aWink WordPress bővítmény.