Tovább a tartalomhoz

Cards

Egy kártya egyetlen szolgáltatót (pl. szállodát vagy élményszolgáltatót) vagy készletet (pl. szobatípust, tárgyalót, gyógyfürdőt stb.) jelöl, és a részleteket egy interaktív, foglalható kártya felhasználói felületen keresztül teszi közzé. A felhasználó a következő módokon léphet kapcsolatba egy kártyával:

  • Kattintson aBookgomb.
  • Kattintson aGallerylink az összes fotó és videó megtekintéséhez ehhez a leltárhoz.
  • KattintásBest deallink, ha van ilyen, a legkedvezőbb árú szoba megtekintéséhez.
  • KattintásHotel detailslink, ha van ilyen, az ingatlan adatainak megtekintéséhez.

Egy kártya több felületet támogat a méretének minimalizálása és az adatok kategorizálása érdekében; így a felhasználó könnyen felhasználhatja, és nagyobb esélyt ad arra, hogy a felhasználót foglalássá konvertálja.

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

  • A szállodakártya előlapján a szálláshely adatai, hátlapján pedig a legjobb szobatípus szerepel. Mindkét oldalon az ár a szálloda legjobb árat mutatja.
  • A szobatípus-kártya elöl a szobatípus adatait, hátul pedig a szálláshely adatait mutatja. Az ár az elöl a szobatípus árát, a hátulján pedig a szálloda legjobb árát mutatja.
  • Minden más kártyának (pl. wellness-étterem stb.) 3 oldala van. Példa: A wellness-részleg adatai a főoldalon jelennek meg a wellness-részleg legjobb árával együtt. A legkedvezőbb árú szobatípus-adatai a második oldalon találhatók. A szálláshely adatai a legkedvezőbb árú szobával együtt a kártya harmadik oldalán találhatók.
Kártya előnézete
Elülső szobatípus-kártya elérhetőséggel

Fent látható egy példa a szobatípus-kártyánkra. Tartalmazza a szálláshely, az értékelés és a szoba adatait, valamint a lemondási szabályzatot és az étkezéseket.

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

Műveletek
Keresési eredmények műveletei

Fent egy kép látható, amely innen származikKeresésés megmutatja, hogy milyen műveleteket végezhetsz a keresési eredményeiddel. Az egyik ilyen művelet az,Make a card. Kattints erre a gombra, és átirányít a kártyaűrlap oldalunkra, ahol elkezdheted testreszabni a kártyádat.

Az űrlap segítségével a következő módokon szabhatja testre a kártyáját:

  1. Adj neki egy nevet, hogy emlékezhess, miről szól a kártya.
  2. Válassza ki a Testreszabás erre a kártyára szeretne jelentkezni.
  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 badge amelyet a kártyán használni szeretne. A jelvény lehetővé teszi a felhasználók számára, hogy összehasonlítsák a készletet egy összesített mutató alapján, 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. Válasszon ki egy vagy több képet, amelyek akkor jelennek meg, amikor a felhasználók rákattintanak Gallery link.
  8. Kattintson a Save gombot a folytatáshoz.

A kártya mentése után átirányítunk a kártyáid oldalára, ahol megoszthatod a világgal.

Kártya
Összecsukott műveleti menüvel rendelkező kártya

A fenti képen láthatók a kártyádhoz elérhető összes művelet:

  • FrissítésFrissíti a kártya konfigurációját.
  • Hozzáadás a WinkLinkshezHozzáadja a kártyát a WinkLinks fiókodhoz.
  • BeágyazMegmutatja, hogyan ágyazhatod be ezt a kártyátKártyaa 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.

<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 a weboldaladba:

  • 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 vendégszoba kártyát 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.

A kártyákat kezelni kívánó fejlesztők ide fordulhatnakFejlesztők > API > Leltár.