Tovább a tartalomhoz
Wink

Rácsok

A rács egy beszállítók és készletek listáját jelenti, és egy interaktív, foglalható rács UI-n keresztül teszi elérhetővé a részleteket. A rács támogatja bármely készlet megjelenítését a válogatott listádból vagy mentett keresésedbő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. Lapozz a rácsban a Mutass többet 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, testre szabhatod é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. 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áidban összegyűjtött készletet használja, és a listát foglalható utazási készletté alakítja, amit megmutathatsz a felhasználóidnak.

Létrehozás

Szekció neve “Létrehozás”

Navigálj a Listák > Válogatott menüpontra a fő navigációs sávból. Ehhez a példához a Kedvencek listádat fogjuk használni. Ha még nem adtál hozzá semmit a Kedvencek listádhoz, látogass el a Keresés oldalra, hogy megtudd, hogyan.

Válogatott lista rács létrehozása
Válogatott lista rács létrehozó űrlap
  1. Kattints az Akciók gombra a Kedvencek listán.
  2. Kattints a Rács létrehozása gombra.
  3. Megjelenik egy új ablak, 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 Rácsok menüpontra a fő navigációs sávból, és kattints a Válogatott 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, amit 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 összehasonlítsák a készletet egy összesített mutató, például az öko-barát alapján.
  5. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawler-ek 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 akciómenüvel

Fent látható egy kép az összes elérhető akcióval a rácsodhoz:

  • Frissítés Frissíti a rács konfigurációját.
  • Hozzáadás a WinkLinks-hez Hozzáadja a rácsot a WinkLinks fiókodhoz.
  • Beágyazás Megmutatja, hogyan ágyazhatod be ezt a rácsot egy Rácsként a weboldaladon.
  • 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 megmutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok megmutatják, hogyan használd a wink-content-loader Web Komponenst, és hogyan kérj le egy rácsot a kódodhoz.
  • A 11. sor megmutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor megmutatja, 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, amit megmutathatsz a felhasználóidnak.

Létrehozás

Szekció neve “Létrehozás”

Navigálj a Listák > Dinamikus 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.

Mentett keresés rács létrehozása
Mentett keresés rács létrehozó űrlap
  1. Kattints az Akciók gombra a mentett kereséseden.
  2. Kattints a Rács létrehozása gombra.
  3. Megjelenik egy új ablak, 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 Rácsok menüpontra a fő navigációs sávból, és kattints a Keresések 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, amit 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 összehasonlítsák a készletet egy összesített mutató, például az öko-barát alapján.
  5. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawler-ek 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 akció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 megmutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok megmutatják, hogyan használd a wink-content-loader Web Komponenst, és hogyan kérj le egy rácsot a kódodhoz.
  • A 11. sor megmutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor megmutatja, 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 Rácsok menüpontra navigálva, majd kattints a Rangsorolt fülre. Kattints a Rangsorolt rács létrehozása 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. Öko-barát szállodák Tokióban
  3. Válaszd ki a Testreszabást, amit 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. Öko-barát jellemzők.
  6. Adj meg kulcsszavakat, vesszővel elválasztva, amelyeket a Web Crawler-ek 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ítanak 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 akciómenüvel

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

  • Frissítés Frissíti a rács konfigurációját.
  • Hozzáadás a WinkLinks-hez Hozzáadja a rangsorolt rácsot a WinkLinks fiókodhoz.
  • Beágyazás Megmutatja, hogyan ágyazhatod be ezt a rácsot egy Rácsként a weboldaladon.
  • 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 megmutatja, hogyan ágyazd be a Wink stílusokat az oldaladba.
  • A 6-9. sorok megmutatjá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 megmutatja, hogyan ágyazd be a Javascriptünket az oldaladba.
  • A 13. sor megmutatja, 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 Fejlesztők > API > Készlet menüpontra látogathatnak.

További olvasmányok

Szekció neve “További olvasmányok”