Tovább a tartalomhoz
Academy

Rácsok

A rács egy beszállítók és készletek listáját jelenti, amelyeket egy interaktív, foglalható rács felületen keresztül tesz elérhetővé. A rács bármilyen készlet megjelenítését támogatja a válogatott listádból vagy mentett keresésedből. A felhasználó ugyanúgy lép interakcióba a rácssal, mint egy egyedi kártyával, egy további funkcióval kiegészítve:

  1. Lapozhat a rácsban a Továbbiak megjelenítése gombra kattintva (ha több elem elérhető).
Rács előnézet
Rács, amely több szobatípust mutat

Fent egy példa a rácsunkra, amely szobatípus-kártyák listáját mutatja.

A cikk további része végigvezet azon, hogyan hozhatod létre, testreszabhatod és teheted elérhetővé a rácsot a felhasználóid számára.

Rácstípusok

Szekció neve “Rácstípusok”

Háromféle rács létezik:

  1. Válogatott listán alapuló rács curated list.
  2. Mentett keresésen alapuló rács saved search.
  3. Helyszín és rendezési szempont alapján létrehozott rács (azaz rangsorolt rács).

Válogatott lista rács

Szekció neve “Válogatott lista rács”

Ez egy olyan rács, amely a válogatott listáidban összegyűjtött készletet használja, és a listát foglalható utazási készletté alakítja, amelyet megjeleníthetsz a felhasználóidnak.

Létrehozás

Szekció neve “Létrehozás”

Navigálj az Inventory > Curated Lists menüpontra a fő navigációs sávból. Ehhez a példához a Favorites listádat fogjuk használni. Ha még nem adtál hozzá semmit a Favorites listádhoz, látogass el a Keresés oldalra, hogy megtudd, hogyan kell.

Válogatott lista rács létrehozása
Válogatott lista rács létrehozó űrlap
  1. Kattints az Actions gombra a Favorites listán.
  2. Kattints a Create a grid gombra.
  3. Egy új ablak jelenik meg, ahol elnevezheted a rácsodat. Lásd lent.
  4. Kattints az OK gombra a folytatáshoz.

A rácsod létrejött. Navigálj a Tools > Grids menüpontra a fő navigációs sávból, és kattints a Curated Grids fülre, hogy lásd az új rácsodat.

Testreszabás

Szekció neve “Testreszabás”

Az űrlap lehetővé teszi a rácsod testreszabását az alábbi módokon:

  1. Adj neki egy nevet, hogy emlékezz, miről szól a rács.
  2. Válaszd ki a Testreszabást, amelyet alkalmazni szeretnél erre a rácsra.
  3. Válaszd ki az első kártyaoldalt, amit a felhasználók először látnak. Alapértelmezés szerint az adott készlet natív oldala.
  4. Válaszd ki a jelvényt, amit a kártyán használni szeretnél. A jelvény lehetővé teszi a felhasználók számára, hogy egy összesített mutató, például környezetbarát alapján hasonlítsák össze a készletet.
  5. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawlers használnak.
  6. Adj meg címeket és leírásokat azokban a nyelvekben, amelyeket a felhasználó látni fog.
  7. Kattints a Mentés gombra a folytatáshoz.

Megosztás

Szekció neve “Megosztás”
Válogatott lista rács
Válogatott lista rács bejegyzés összecsukott műveleti menüvel

Fent látható egy kép az összes elérhető műveletről a rácsodhoz:

  • Frissítés Frissíti a rács konfigurációját.
  • Hozzáadás a WinkLinkshez Hozzáadja a rácsot a WinkLinks fiókodhoz.
  • Beágyazás Megmutatja, hogyan ágyazhatod be ezt a rácsot Grid formájában a weboldaladba.
  • Használat WordPress-szel Megmutatja, hogyan használhatod a WordPress bővítményünket a rács beágyazásához a weboldaladon.

Ezek közül néhány lehetőséget részletesebben is bemutatunk lent.

Beágyazás

Szekció neve “Beágyazás”
<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ácsodat az oldaladba:

  • A 3. sor mutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok mutatják, hogyan használd a wink-content-loader Web Komponenst, és hogyan kérj le egy rácsot a kódodhoz.
  • A 11. sor mutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor mutatja, hogyan ágyazd be a wink-app-loader Web Komponenst, és hogyan kérd le az oldal szintű konfigurációs beállításaidat.

Mentett keresés rács

Szekció neve “Mentett keresés rács”

Ez egy olyan rács, amely a mentett keresési lekérdezésed készletét használja, és a keresési eredményeket foglalható utazási készletté alakítja, amelyet megjeleníthetsz a felhasználóidnak.

Létrehozás

Szekció neve “Létrehozás”

Navigálj az Inventory > Saved searches menüpontra a fő navigációs sávból. Ha még nem hoztál létre mentett keresést, látogass el a Keresés oldalra, hogy megtudd, hogyan kell.

Mentett keresés rács létrehozása
Mentett keresés rács létrehozó űrlap
  1. Kattints az Actions gombra a mentett kereséseden.
  2. Kattints a Create a grid gombra.
  3. Egy új ablak jelenik meg, ahol elnevezheted a rácsodat. Lásd lent.
  1. Kattints az OK gombra a folytatáshoz.

A rácsod létrejött. Navigálj a Tools > Grids menüpontra a fő navigációs sávból, és kattints a Saved Search Grids fülre, hogy lásd az új rácsodat.

Testreszabás

Szekció neve “Testreszabás”

Az űrlap lehetővé teszi a rácsod testreszabását az alábbi módokon:

  1. Adj neki egy nevet, hogy emlékezz, miről szól a rács.
  2. Válaszd ki a Testreszabást, amelyet alkalmazni szeretnél erre a rácsra.
  3. Válaszd ki az első kártyaoldalt, amit a felhasználók először látnak. Alapértelmezés szerint az adott készlet natív oldala.
  4. Válaszd ki a jelvényt, amit a kártyán használni szeretnél. A jelvény lehetővé teszi a felhasználók számára, hogy egy összesített mutató, például környezetbarát alapján hasonlítsák össze a készletet.
  5. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawlers használnak.
  6. Adj meg címeket és leírásokat azokban a nyelvekben, amelyeket a felhasználó látni fog.
  7. Kattints a Mentés gombra a folytatáshoz.

Megosztás

Szekció neve “Megosztás”
Mentett keresés rács
Mentett keresés rács bejegyzés összecsukott műveleti menüvel

Beágyazás

Szekció neve “Beágyazás”
<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ácsodat az oldaladba:

  • A 3. sor mutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok mutatják, hogyan használd a wink-content-loader Web Komponenst, és hogyan kérj le egy rácsot a kódodhoz.
  • A 11. sor mutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor mutatja, hogyan ágyazd be a wink-app-loader Web Komponenst, és hogyan kérd le az oldal szintű konfigurációs beállításaidat.

Rangsorolt rács

Szekció neve “Rangsorolt rács”

Létrehozás

Szekció neve “Létrehozás”

Hozz létre rangsorolt rácsot a Tools > Grids menüpontban, majd kattints a Ranked Grid fülre. Kattints a Create ranked grid gombra.

Testreszabás

Szekció neve “Testreszabás”

Az űrlap lehetővé teszi a rangsorolt rácsod testreszabását az alábbi módokon:

  1. Válassz egy úti célt. Pl. Tokió.
  2. Adj neki egy nevet, hogy emlékezz, miről szól a rács. Pl. Környezetbarát szállodák Tokióban
  3. Válaszd ki a Testreszabást, amelyet alkalmazni szeretnél erre a rácsra.
  4. Válaszd ki az első kártyaoldalt, amit a felhasználók először látnak. Alapértelmezés szerint az adott készlet natív oldala.
  5. Válaszd ki, milyen jellemző szerint rendezd az ingatlanokat. Pl. Környezetbarátság.
  6. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawlers használnak.
  7. Adj meg címeket és leírásokat azokban a nyelvekben, amelyeket a felhasználó látni fog.
  8. Kattints a Mentés gombra a folytatáshoz.

A rangsorolt rács mentése után átirányítunk a rangsorolt rácsok oldalára, és a rácsod készen áll a megosztásra.

Megosztás

Szekció neve “Megosztás”
Rangsorolt rács
Rangsorolt rács összecsukott műveleti menüvel

Fent látható egy kép az összes elérhető műveletről a rangsorolt rácsodhoz:

  • Frissítés Frissíti a rács konfigurációját.
  • Hozzáadás a WinkLinkshez Hozzáadja a rangsorolt rácsot a WinkLinks fiókodhoz.
  • Beágyazás Megmutatja, hogyan ágyazhatod be ezt a rácsot Grid formájában a weboldaladba.
  • Használat WordPress-szel Megmutatja, hogyan használhatod a WordPress bővítményünket a kártya beágyazásához a weboldaladon.

Ezek közül néhány lehetőséget részletesebben is bemutatunk lent.

Beágyazás

Szekció neve “Beágyazás”
<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ácsodat az oldaladba:

  • A 3. sor mutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok mutatják, hogyan használd a wink-content-loader Web Komponenst, és hogyan kérj le egy rangsorolt rácsot a kódodhoz.
  • A 11. sor mutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor mutatja, hogyan ágyazd be a wink-app-loader Web Komponenst, és hogyan kérd le az oldal szintű konfigurációs beállításaidat.

API

Szekció neve “API”

A fejlesztők, akik rácsokat szeretnének kezelni, a Developers > API > Inventory oldalon találhatják meg a szükséges információkat.

További olvasnivaló

Szekció neve “További olvasnivaló”