Componente web

Componente webeste un standard care vă permite să integrați funcții Javascript complete în site-ul dvs. web fără a ști cum să programați. Datorită acestei tehnologii interesante, vă permite să încorporați inventarul de călătorii Wink cu foarte puțin efort. Acest articol vă ghidează prin colecția noastră de componente web și vă arată cum să le utilizați.

Încorporare Wink

Există trei lucruri pe care trebuie să le includeți în orice pagină unde doriți să afișați una dintre componentele noastre web.

Includeți foaia noastră de stil.
Includeți Javascript-ul nostru.
Include încărcătorul nostru de aplicații.

Foaie de stil

Includeți stilurile noastre CSS în antetul documentului.

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

Javascript

Includeți Javascript-ul nostru în partea de jos a documentului. (Recomandăm imediat deasupra etichetei finale a corpului).

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

Site-ul dvs. este acum gata și poate afișa componentele noastre web.

Componente

Citiți mai jos despre biblioteca noastră de componente.

Încărcător de aplicații

Încărcătorul este responsabil pentru menținerea stării și gestionarea interacțiunii dintre componentele noastre.Includeți-l sub Javascript-ul nostru).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Încărcător de conținut

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

Atribute disponibile:

aspect
ID-ul
sorta

Atributulsorteste disponibilă numai când aspectul esteRANKEDși nu doriți să utilizați o grilă clasată existentă. În aceste cazuri, lăsațiidgol.

Tipuri de machete 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>

Mostre pot fi găsite pentrucărți,grileșihărți.

Priveşte în sus

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Dacă dați clic pe componenta de mai sus, se deschide o fereastră modală care vă permite să introduceți destinația sau hotelul pe care îl căutați.

Modal de căutare — *Căutare modală cu rezultate*

Itinerariu

Butonul pentru itinerar afișează itinerarul curent. Când faceți clic pe el, selectorul de itinerar complet se afișează ca o fereastră modală.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Componentă web pentru itinerariu

Dacă dați clic pe butonul de mai sus, se deschide o fereastră modală care vă permite să actualizați itinerariul.

Căutare

Căutarea este un buton cu pictogramă în selectorul de itinerariu. Când faceți clic pe el, selectorul de itinerariu complet se afișează ca o fereastră modală.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Dacă dați clic pe butonul de mai sus, se deschide o fereastră modală care vă permite să actualizați itinerariul.

Formular de itinerariu

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Componentă web pentru itinerariu — *Componentă web pentru formularul de itinerariu*

Prin modificarea itinerariului, în oricare dintre componentele noastre, se declanșează evenimentul de actualizare a itinerariului pentru orice inventar afișat în prezent pe pagină.

Cont

Butonul cont vă permite să adăugați autentificarea Wink pe site-ul dvs.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Componentă web a contului — *Componentă web buton cont*

Dacă se dă clic pe buton, atunci când utilizatorul nu este autentificat, acesta va fi redirecționat pentru a fi autentificat.

După ce utilizatorul este autentificat, se afișează pictograma profilului său.

Când faceți clic pe buton, se deschide meniul derulant specific utilizatorului.

Încorporează TripPay

Există două lucruri pe care trebuie să le includeți în orice pagină unde doriți să utilizați componenta web de plată TripPay.

Includeți foaia noastră de stil.
Includeți Javascript-ul nostru.

Foaie de stil

Includeți stilurile noastre CSS în antetul documentului.

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

Javascript

Includeți Javascript-ul nostru în partea de jos a documentului. (Recomandăm imediat deasupra etichetei finale a corpului).

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

Site-ul dvs. este acum gata și poate afișa componentele noastre web.

Componente

Plată

Componenta de plată vă permite să informați TripPay că un călător dorește să achiziționeze ceva și să cunoașteți regulile și prețurile pentru acele articole.

Există un atribut obligatoriu pentru widget:

idIdentificatorul contractului de rezervare pe care doriți să îl executați.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

:::notă Pentru a afla cum să generați contractul de rezervareid, citește ghidul:Integrarea cu TripPay. :::

Widgetul pregătește contractul pentru executare și afișează detaliile plății(Figura 1)utilizatorului pentru a finaliza rezervarea.

Detalii de plată — *Figura 1. Formular de plată exemplu*