Tovább a tartalomhoz
Wink

Rácsok

A rács egy szállítókat és készletet tartalmazó lista, amely részleteket egy interaktív, foglalható rács felületen jelenít meg. A rács bármilyen készlet megjelenítését támogatja a válogatott listájából vagy mentett kereséséből. A felhasználó ugyanúgy lép interakcióba egy rácssal, mint egy egyedi kártyával, egy további funkcióval:

  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égigvezeti, hogyan hozhat létre, testreszabhat és tehet elérhetővé rácsot a felhasználói számára.

Rácstípusok

Szekció neve “Rácstípusok”

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

  1. Rács egy válogatott lista alapján.
  2. Rács egy mentett keresés alapján.
  3. Rangsorolt rács hely és rendezési kritérium alapján (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ájában összegyűjtött készletet használja, és a listát foglalható utazási készletté alakítja, amelyet megjeleníthet a felhasználóknak.

Létrehozás

Szekció neve “Létrehozás”

Navigáljon a Készlet > Válogatott listák menüpontra a fő navigációs sávból. Ehhez a példához a Kedvencek listáját fogjuk használni. Ha még nem adott hozzá semmit a Kedvencek listához, látogasson el a Keresés oldalra, hogy megtanulja, hogyan.

Válogatott lista rács létrehozása
Válogatott lista rács létrehozó űrlap
  1. Kattintson az Műveletek gombra a Kedvencek listán.
  2. Kattintson a Rács létrehozása gombra.
  3. Egy új ablak jelenik meg, ahol elnevezheti a rácsot. Lásd lent.
  4. Kattintson az OK gombra a folytatáshoz.

A rács létrejött. Navigáljon a Eszközök > Rácsok menüpontra a fő navigációs sávból, és kattintson a Válogatott rácsok fülre, hogy megtekinthesse az új rácsot.

Testreszabás

Szekció neve “Testreszabás”

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

  1. Adjon neki egy nevet, hogy emlékezzen, miről szól a rács.
  2. Válassza ki a Testreszabást, amelyet alkalmazni szeretne erre a rácsra.
  3. Válassza ki az első kártyaoldalt, amelyet a felhasználók először látnak. Alapértelmezés szerint az adott készlet natív oldala.
  4. Válassza ki a jelvényt, amelyet a kártyán használni szeretne. 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. Adjon meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawlers használnak.
  6. Adjon meg címeket és leírásokat azokban a nyelvekben, amelyeket a felhasználó látni fog.
  7. Kattintson 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 egy kép látható az összes elérhető művelettel a rácsához:

  • 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ókjához.
  • Beágyazás Megmutatja, hogyan ágyazhatja be ezt a rácsot Rácsként a weboldalába.
  • Használat WordPress-szel Megmutatja, hogyan használhatja a WordPress bővítményünket a rács beágyazásához a weboldalán.

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 ágyazhatja be a rácsot az oldalába:

  • A 3. sor megmutatja, hogyan ágyazza be a Wink stílusokat az oldalába.
  • A 6-9. sorok megmutatják, hogyan használja a wink-content-loader Web Komponenst, és hogyan kérjen le egy rácsot a kódjához.
  • A 11. sor megmutatja, hogyan ágyazza be a Javascriptünket az oldalába.
  • A 13. sor megmutatja, hogyan ágyazza be a wink-app-loader Web Komponenst, és hogyan kérje le az oldal szintű konfigurációs beállításokat.

Mentett keresés rács

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

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

Létrehozás

Szekció neve “Létrehozás”

Navigáljon a Készlet > Mentett keresések menüpontra a fő navigációs sávból. Ha még nem hozott létre mentett keresést, látogasson el a Keresés oldalra, hogy megtanulja, hogyan.

Mentett keresés rács létrehozása
Mentett keresés rács létrehozó űrlap
  1. Kattintson az Műveletek gombra a mentett keresésén.
  2. Kattintson a Rács létrehozása gombra.
  3. Egy új ablak jelenik meg, ahol elnevezheti a rácsot. Lásd lent.
  1. Kattintson az OK gombra a folytatáshoz.

A rács létrejött. Navigáljon a Eszközök > Rácsok menüpontra a fő navigációs sávból, és kattintson a Mentett keresés rácsok fülre, hogy megtekinthesse az új rácsot.

Testreszabás

Szekció neve “Testreszabás”

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

  1. Adjon neki egy nevet, hogy emlékezzen, miről szól a rács.
  2. Válassza ki a Testreszabást, amelyet alkalmazni szeretne erre a rácsra.
  3. Válassza ki az első kártyaoldalt, amelyet a felhasználók először látnak. Alapértelmezés szerint az adott készlet natív oldala.
  4. Válassza ki a jelvényt, amelyet a kártyán használni szeretne. 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. Adjon meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawlers használnak.
  6. Adjon meg címeket és leírásokat azokban a nyelvekben, amelyeket a felhasználó látni fog.
  7. Kattintson 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 ágyazhatja be a rácsot az oldalába:

  • A 3. sor megmutatja, hogyan ágyazza be a Wink stílusokat az oldalába.
  • A 6-9. sorok megmutatják, hogyan használja a wink-content-loader Web Komponenst, és hogyan kérjen le egy rácsot a kódjához.
  • A 11. sor megmutatja, hogyan ágyazza be a Javascriptünket az oldalába.
  • A 13. sor megmutatja, hogyan ágyazza be a wink-app-loader Web Komponenst, és hogyan kérje le az oldal szintű konfigurációs beállításokat.

Rangsorolt rács

Szekció neve “Rangsorolt rács”

Létrehozás

Szekció neve “Létrehozás”

Hozzon létre rangsorolt rácsot a Eszközök > Rácsok menüpontban, majd kattintson a Rangsorolt rács fülre. Kattintson a Rangsorolt rács létrehozása gombra.

Testreszabás

Szekció neve “Testreszabás”

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

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

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

Megosztás

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

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

  • 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ókjához.
  • Beágyazás Megmutatja, hogyan ágyazhatja be ezt a rácsot Rácsként a weboldalába.
  • Használat WordPress-szel Megmutatja, hogyan használhatja a WordPress bővítményünket a kártya beágyazásához a weboldalán.

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 ágyazhatja be a rácsot az oldalába:

  • A 3. sor megmutatja, hogyan ágyazza be a Wink stílusokat az oldalába.
  • A 6-9. sorok megmutatják, hogyan használja a wink-content-loader Web Komponenst, és hogyan kérjen le egy rangsorolt rácsot a kódjához.
  • A 11. sor megmutatja, hogyan ágyazza be a Javascriptünket az oldalába.
  • A 13. sor megmutatja, hogyan ágyazza be a wink-app-loader Web Komponenst, és hogyan kérje le az oldal szintű konfigurációs beállításokat.

API

Szekció neve “API”

A fejlesztők, akik rácsokat szeretnének kezelni, a Fejlesztők > API > Készlet menüpontban találják meg a szükséges eszközöket.

További olvasmányok

Szekció neve “További olvasmányok”