Tovább a tartalomhoz
Academy

Kártyák

Egy kártya egyetlen beszállítót (pl. szállodát vagy élmény szolgáltatót) vagy készletet (pl. szobatípus, tárgyaló, spa stb.) képvisel, és egy interaktív, foglalható kártya UI-n keresztül mutatja be a részleteket. A felhasználó a következő módokon léphet interakcióba egy kártyával:

  • Kattint a Foglalás gombra.
  • Kattint a Galéria hivatkozásra, hogy megnézze az adott készlet összes fotóját és videóját.
  • Kattint a Legjobb ajánlat hivatkozásra, ha elérhető, hogy megtekinthesse a legjobb árú szobát.
  • Kattint a Szálloda adatai hivatkozásra, ha elérhető, hogy megtekinthesse az ingatlan információit.

Egy kártya több oldallal rendelkezik, hogy minimalizálja a kártya méretét és kategorizálja az adatokat; így könnyen fogyasztható a felhasználó számára, és nagyobb esélyt ad arra, hogy a felhasználót foglalássá alakítsa.

Egy kártyának két vagy három oldala van:

  • Egy szállodakártya az ingatlan adatait mutatja az elülső oldalon, és a legjobb szobatípust a hátoldalon. Az ár mindkét oldalon a szálloda legjobb árát mutatja.
  • Egy szobatípus kártya a szobatípus adatait mutatja az elülső oldalon, az ingatlan adatait pedig a hátoldalon. Az ár az elülső oldalon a szobatípus árát, a hátoldalon pedig a szálloda legjobb árát mutatja.
  • Minden más kártya (pl. spa, étterem stb.) három oldallal rendelkezik. Példa: a spa adatai az első oldalon jelennek meg a spa legjobb árával. A második oldalon a legjobb árú szobatípus adatai láthatók. A harmadik oldalon az ingatlan adatai a legjobb árú szobával együtt.
Kártya előnézet
Elülső oldalán szobatípus kártya elérhetőséggel

Fent egy példa a szobatípus kártyánkra. Tartalmazza az ingatlan, értékelés és szoba adatait, valamint a lemondási feltételeket és az étkezéseket.

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

Kártya létrehozása

Szekció neve “Kártya létrehozása”
Műveletek
Keresési eredmények műveletei

Fent egy kép látható a Keresés oldalról, amely megmutat néhány lehetőséget, amit a keresési eredményekkel tehetsz. Ezek közül az egyik a Kártya készítése. Kattints erre a gombra, és átirányítunk a kártya űrlap oldalára, ahol elkezdheted a kártya testreszabását.

Kártya testreszabása

Szekció neve “Kártya testreszabása”

Az űrlap lehetővé teszi, hogy a kártyádat a következő módokon testreszabhasd:

  1. Adj neki egy nevet, hogy emlékezz, miről szól a kártya.
  2. Válaszd ki a Testreszabást, amit alkalmazni szeretnél erre a kártyára.
  3. Válaszd ki az első kártya oldalt, amit a felhasználók először látnak. Alapértelmezés szerint ez az adott készlet natív oldala.
  4. Válaszd ki a kitűző-t, amit a kártyán használni szeretnél. A kitűző lehetővé teszi a felhasználók számára, hogy egy összesített mutató alapján, például környezetbarát, összehasonlítsák a készleteket.
  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ónak meg szeretnél jeleníteni.
  7. Válassz ki egy vagy több képet, amelyek megjelennek, amikor a felhasználók a Galéria hivatkozásra kattintanak.
  8. Kattints a Mentés gombra a folytatáshoz.

A kártya mentése után átirányítunk a kártyáid oldalára, és a kártyád készen áll arra, hogy megoszd a világgal.

Kártya megosztása

Szekció neve “Kártya megosztása”
Kártya
Kártya összecsukott műveleti menüvel

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

  • Frissítés Frissíti a kártya konfigurációját.
  • Hozzáadás a WinkLinks-hez Hozzáadja a kártyát a WinkLinks fiókodhoz.
  • Beágyazás Megmutatja, hogyan ágyazhatod be ezt a kártyát Kártyaként 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 alább.

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="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-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 kártyádat 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 vendégszoba kártyát 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 kártyákat szeretnének kezelni, a Fejlesztők > API > Készlet menüpontban találják meg a szükséges eszközöket.

További olvasnivaló

Szekció neve “További olvasnivaló”