Sari la conținut

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.

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.

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

Includeți stilurile noastre CSS în antetul documentului.

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

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.

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

Î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ă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.

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>
Componentă web de căutare
Componentă web de căutare

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

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
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.

Modal de căutare
Selector de itinerariu ca modal

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>
Componentă web de căutare
Componentă web de căutare

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

Modal de căutare
Selector de itinerariu ca modal

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ă.

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.

Butonul Cont după autentificare
Componentă web buton cont (autentificat)

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

Butonul Cont după autentificare
Componentă web buton cont (deschidere)

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

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

Includeți stilurile noastre CSS în antetul documentului.

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

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.

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