Skip to content
Academy

Cards

Kartica predstavlja jednog dobavljača (npr. hotel ili pružatelja usluga) ili inventar (npr. vrstu sobe, sobu za sastanke, spa centar itd.) i prikazuje detalje putem interaktivnog korisničkog sučelja kartice s mogućnošću rezervacije. Korisnik može komunicirati s karticom na sljedeće načine:

  • Kliknite naBookgumb.
  • Kliknite naGallerypoveznica za pregled svih fotografija i videozapisa za ovaj inventar.
  • KlikniteBest dealpoveznica, ako je dostupna, za pregled sobe s najpovoljnijom cijenom.
  • KlikniteHotel detailspoveznica, ako je dostupna, za pregled informacija o nekretnini.

Kartica podržava više strana kako bi se smanjila veličina kartice i kategorizirali podaci; što je čini lako dostupnom za korisnika i daje vam veću šansu da korisnika pretvorite u rezervaciju.

Karta ima dvije ili tri strane:

  • Hotelska kartica prikazuje podatke o objektu na prednjoj strani, a najbolju vrstu sobe na stražnjoj. Cijena, s obje strane, prikazuje najbolju cijenu za hotel.
  • Kartica s tipom sobe prikazuje podatke o tipu sobe na prednjoj strani, a podatke o objektu na poleđini. Cijena prikazuje cijenu tipa sobe na prednjoj strani, a najbolju cijenu za hotel na poleđini.
  • Sve ostale kartice (npr. spa restoran itd.) imaju 3 strane. Primjer: Podaci o spa centru prikazuju se na naslovnoj stranici s najboljom cijenom spa centra. Podaci o vrsti sobe za sobu s najpovoljnijom cijenom nalaze se na drugoj strani. Podaci o objektu zajedno s sobom s najpovoljnijom cijenom nalaze se na trećoj strani kartice.
Pregled kartice
Kartica s raspoloživošću za tip sobe s prednje strane

Gore je primjer naše kartice s tipom sobe. Sadrži podatke o objektu, recenziji i sobi, zajedno s pravilima otkazivanja i obrocima.

Ostatak ovog članka vodi vas kroz postupak izrade, prilagodbe i prikazivanja kartice korisnicima.

Izradi karticu

Section titled “Izradi karticu”
Radnje
Radnje s rezultatima pretraživanja

Gore je slika preuzeta izPretraživanjei pokazuje vam neke od stvari koje možete učiniti s rezultatima pretraživanja. Jedna od tih radnji jeMake a card. Kliknite na taj gumb i bit ćete preusmjereni na našu stranicu s obrascem za karticu gdje možete započeti s prilagodbom svoje kartice.

Prilagodi karticu

Section titled “Prilagodi karticu”

Obrazac vam omogućuje prilagodbu kartice na sljedeće načine:

  1. Dajte joj ime kako biste zapamtili o čemu se radi na kartici.
  2. Odaberite Prilagođavanje želite se prijaviti za ovu karticu.
  3. Odaberite početnu stranu kartice koju želite da korisnici prvo vide. Prema zadanim postavkama, to je izvorna strana tog inventara.
  4. Odaberite badge želite koristiti na kartici. Značka omogućuje korisnicima usporedbu zaliha na temelju agregirane metrike kao što je eco-friendly.
  5. Dodajte ključne riječi, odvojene zarezom, koje će koristiti Web crawleri.
  6. Dodajte naslove i opise na jezicima koje želite da korisnik vidi.
  7. Odaberite jednu ili više slika koje će se prikazati kada korisnici kliknu na Gallery link.
  8. Kliknite na Save gumb za nastavak.

Nakon što spremite svoju karticu, bit ćete preusmjereni na stranicu svojih kartica i vaša je kartica sada spremna za dijeljenje sa svijetom.

Dijeli karticu

Section titled “Dijeli karticu”
Kartica
Kartica sa sažetim izbornikom radnji

Gore je prikazana slika sa svim dostupnim radnjama za vašu karticu:

  • AžuriratiAžurira konfiguraciju vaše kartice.
  • Dodaj u WinkLinksDodaje karticu na vaš WinkLinks račun.
  • UgraditiPokazuje vam kako ugraditi ovu karticu kaoKarticana vašu web stranicu.
  • Koristi se s WordPressomPokazuje vam kako koristiti našeWordPress dodatakugraditi ovu karticu na svoju web stranicu.

Neke od ovih opcija detaljnije ćemo obraditi u nastavku.

Ugraditi

Section titled “Ugraditi”
<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>

Evo kako ugraditi svoju karticu na svoju web-stranicu:

  • Redak 3 pokazuje kako ugraditi Wink stilove na vašu web-stranicu.
  • Redci od 6 do 9 pokazuju kako koristitiwink-content-loaderWeb komponentu i recite joj da dohvati karticu sobe za goste za vaš kod.
  • Redak 11 pokazuje kako ugraditi naš Javascript na vašu stranicu.
  • Redak 13 pokazuje kako ugraditiwink-app-loaderWeb komponentu i recite joj da dohvati vaše postavke konfiguracije na razini stranice.

API

Section titled “API”

Razvojni programeri koji žele upravljati karticama mogu posjetitiRazvojni programeri > API > Inventar.

Daljnje čitanje

Section titled “Daljnje čitanje”