Tovább a tartalomhoz
Academy

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:

  1. Lapozzon a rácson a gombra kattintvaShow moregomb (amikor több tétel elérhető).
Rács előnézete
Több szobatípust megjelenítő rács

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:

  1. Rács alapjánkurátori lista.
  2. Rács alapjánmentett keresés.
  3. 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 Listsa fő navigációs sávról. Ebben a példában a következőt fogjuk használni:Favoriteslistához. Ha még nem tettél fel semmit a listádraFavorites, menj ideKereséshogy megtanulja, hogyan.

Kurátori listarács létrehozása
Kurátorált listarács létrehozása
  1. Kattintson a Actions gombot a Favorites lista.
  2. Kattintson a Create a grid gomb.
  3. Egy új ablak jelenik meg, ahol elnevezheted a rácsot. Lásd alább.
  4. Kattintás OK gombot a folytatáshoz.

A rács létrehozva. Navigáljon ide:Tools > Gridsa fő navigációs sávon, és kattintson aCurated Gridsfü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:

  1. Adj neki egy nevet, hogy emlékezhess, miről szól a rács.
  2. Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
  3. 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.
  4. 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.
  5. Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
  6. Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
  7. Kattintson a Save gombot a folytatáshoz.

Részesedés

Szekció neve “Részesedés”
Kurátori listarács
Kurátori lista rácsbejegyzés összecsukott műveleti menüvel

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

Mentett keresési rács létrehozása
Mentett keresési rácsűrlap létrehozása
  1. Kattintson a Actions gombra a mentett keresésnél.
  2. Kattintson a Create a grid gomb.
  3. Egy új ablak jelenik meg, ahol elnevezheted a rácsot. Lásd alább.
  1. KattintásOKgombot a folytatáshoz.

A rács létrehozva. Navigáljon ide:Tools > Gridsa fő navigációs sávon, és kattintson aSaved Search Gridsfü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:

  1. Adj neki egy nevet, hogy emlékezhess, miről szól a rács.
  2. Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
  3. 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.
  4. 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.
  5. Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
  6. Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
  7. Kattintson a Save gombot a folytatáshoz.

Részesedés

Szekció neve “Részesedés”
Mentett keresési rács
Mentett keresési rácsbejegyzés összecsukott műveleti menüvel

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 Gridfülre. Kattintson aCreate ranked gridgomb.

Testreszabás

Szekció neve “Testreszabás”

Az űrlap lehetővé teszi a rangsorolt ​​rács testreszabását a következő módokon:

  1. Válasszon egy úti célt. Pl. Tokió.
  2. Adj neki egy nevet, hogy emlékezhess, miről szól a rács. Pl. környezetbarát szállodák Tokióban
  3. Válassza ki a Testreszabás amelyet erre a rácsra szeretne alkalmazni.
  4. 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.
  5. Válassza ki, hogy milyen jellemző alapján szeretné rendezni az ingatlanokat. Pl. környezetbarátság.
  6. Adjon meg vesszővel elválasztott kulcsszavakat, amelyeket a következő fog használni: Webes robotok.
  7. Adj hozzá címeket és leírásokat azokon a nyelveken, amelyeket a felhasználónak látni szeretnél.
  8. 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”
Rangsorolt ​​rács
Rangsorolt ​​rács összecsukott műveleti menüvel

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.

API

Szekció neve “API”

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”