Sari la conținut
Academy

Componente Web

Componentele Web sunt un standard care îți permite să integrezi funcționalități JavaScript complete în site-ul tău fără să știi să codezi. Datorită acestei tehnologii grozave, poți încorpora inventarul de călătorii Wink cu foarte puțin efort. Acest articol te ghidează prin colecția noastră de componente web și îți arată cum să le folosești.

Încorporează Wink

Section titled “Încorporează Wink”

Sunt trei lucruri pe care trebuie să le incluzi în orice pagină unde vrei să afișezi una dintre componentele noastre web.

  1. Include foaia noastră de stiluri.
  2. Include JavaScript-ul nostru.
  3. Include încărcătorul aplicației noastre.

Foaie de stiluri

Section titled “Foaie de stiluri”

Include stilurile CSS în head-ul documentului tău.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

Section titled “Javascript”

Include JavaScript-ul nostru la finalul documentului. (Recomandăm imediat deasupra tag-ului de închidere body).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Site-ul tău este acum pregătit și capabil să afișeze componentele noastre web.

Componente

Section titled “Componente”

Citește despre biblioteca noastră de componente mai jos.

Încărcător aplicație

Section titled “Încărcător aplicație”

Încărcătorul este responsabil pentru menținerea stării și gestionarea interacțiunii între componentele noastre. (Include-l după JavaScript-ul nostru).

<html>
  <body>
    <wink-app-loader
      client-id="ID-UL TĂU DE CLIENT AICI"
      configuration-id="ID-UL TĂU DE PERSONALIZARE AICI"
    ></wink-app-loader>
  </body>
</html>

Încărcător conținut

Section titled “Încărcător conținut”

Încărcătorul de conținut este inima bibliotecii noastre de componente web. Este responsabil pentru afișarea inventarului tău (carduri, grile, hărți).

Atribute disponibile:

  • layout
  • id
  • sort

Atributul sort este disponibil doar când layout este RANKED și nu vrei să folosești o grilă clasificată existentă. Pentru aceste cazuri, lasă id gol.

Tipuri de layout disponibile:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

Tipuri de sortare disponibile:

  • MEMBER
  • PRICE_LOW_TO_HIGH
  • PRICE_HIGH_TO_LOW
  • PRICE
  • POPULARITY
  • ECO
  • EXPERIENCE
  • PERK
  • LOYALTY
  • PACKAGE
<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

Exemple pot fi găsite pentru carduri, grile și hărți.

Căutare

Section titled “Căutare”

Căutarea funcționează foarte bine împreună cu una dintre grilele tale clasificate. Permite utilizatorilor să caute hoteluri și destinații, iar grila se actualizează în funcție de rezultatul căutării.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Componenta web Lookup
Componenta web Lookup

Click pe componenta de mai sus deschide un modal care îți permite să tastezi destinația sau hotelul pe care îl cauți.

Modal Lookup
Modal Lookup cu rezultate

Itinerar

Section titled “Itinerar”

Butonul itinerar afișează itinerarul curent pe buton. Când dai click pe el, selectorul complet de itinerar se afișează ca un modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Componenta web Itinerar
Componenta web Itinerar

Click pe butonul de mai sus deschide un modal care îți permite să actualizezi itinerarul.

Modal căutare
Selector itinerar ca modal

Căutare

Section titled “Căutare”

Căutarea este un buton doar cu iconiță al selectorului de itinerar. Când dai click pe el, selectorul complet de itinerar se afișează ca un modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Componenta web Căutare
Componenta web Căutare

Click pe butonul de mai sus deschide un modal care îți permite să actualizezi itinerarul.

Modal căutare
Selector itinerar ca modal

Formular itinerar

Section titled “Formular itinerar”

Componenta itinerar afișează un formular de itinerar cu care utilizatorii pot interacționa.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Componenta web Formular itinerar
Componenta web Formular itinerar

Modificarea itinerarului, în oricare dintre componentele noastre de itinerar, declanșează evenimentul de actualizare a itinerarului pentru orice inventar afișat în prezent pe pagină.

Cont

Section titled “Cont”

Butonul cont îți permite să adaugi autentificarea Wink pe site-ul tău.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Componenta web Buton cont
Componenta web Buton cont

Click pe buton, când utilizatorul nu este autentificat, îl va redirecționa pentru autentificare. Când utilizatorul este autentificat, afișează iconița profilului utilizatorului.

Buton cont când este autentificat
Componenta web Buton cont (autentificat)

Când dai click pe buton, se deschide meniul dropdown specific utilizatorului.

Buton cont când este autentificat
Componenta web Buton cont (deschis)

Încorporează TripPay

Section titled “Încorporează TripPay”

Sunt două lucruri pe care trebuie să le incluzi în orice pagină unde vrei să folosești componenta web de plată TripPay.

  1. Include foaia noastră de stiluri.
  2. Include JavaScript-ul nostru.

Foaie de stiluri

Section titled “Foaie de stiluri”

Include stilurile CSS în head-ul documentului tău.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Section titled “Javascript”

Include JavaScript-ul nostru la finalul documentului. (Recomandăm imediat deasupra tag-ului de închidere body).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Site-ul tău este acum pregătit și capabil să afișeze componentele noastre web.

Componente

Section titled “Componente”

Plată

Section titled “Plată”

Componenta de plată îți permite să informezi TripPay că un călător dorește să cumpere ceva și regulile și prețurile pentru acele articole.

Există un atribut obligatoriu pentru widget:

  • id Identificatorul contractului de rezervare pe care vrei să îl execuți.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget-ul pregătește contractul pentru execuție și afișează detaliile plății (Figura 1) utilizatorului pentru a finaliza rezervarea.

Detalii plată
Figura 1. Formular de plată exemplu

Erori

Section titled “Erori”

Dacă primești un mesaj de eroare când încorporezi una dintre componentele noastre web, fie pe WinkLinks, fie pe propriul tău site, există câteva lucruri care ar fi putut merge prost:

Disponibilitate

Section titled “Disponibilitate”

Inventarul s-ar putea să nu mai fie disponibil. Mergi la Wink Studio și verifică dacă starea “cardului” este disponibilă. Dacă nu este, va apărea roșu. În acest caz, poți aștepta și poate furnizorul îl face din nou disponibil sau îl poți elimina din listă.

Eliminat

Section titled “Eliminat”

Inventarul ar fi putut fi eliminat. Mergi la Wink Studio și verifică dacă starea “cardului” este disponibilă. Dacă nu este, va apărea roșu. În acest caz, poți aștepta și poate furnizorul îl face din nou disponibil sau îl poți elimina din listă.

Personalizare

Section titled “Personalizare”

S-ar putea să fi eliminat accidental personalizarea pe care ai definit-o pentru inventarul tău. Asigură-te că personalizarea este încă disponibilă și setează una nouă dacă lipsește.

Aplicație

Section titled “Aplicație”

Aceasta este doar pentru dezvoltatori web. Dacă ai eliminat accidental Aplicația ; făcând ID-ul clientului indisponibil, te rugăm să creezi o aplicație nouă și să folosești noul ID de client pentru a încorpora componentele noastre web.