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
Section titled “Î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
Section titled “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
Section titled “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
Section titled “Componente”Citiți mai jos despre biblioteca noastră de componente.
Încărcător de aplicații
Section titled “Î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
Section titled “Î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
Atributulsort
este disponibilă numai când aspectul esteRANKED
și nu doriți să utilizați o grilă clasată existentă. În aceste cazuri, lăsațiid
gol.
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
Section titled “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.
Itinerariu
Section titled “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>
Dacă dați clic pe butonul de mai sus, se deschide o fereastră modală care vă permite să actualizați itinerariul.
Căutare
Section titled “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
Section titled “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>
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>
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
Section titled “Î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
Section titled “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
Section titled “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
Section titled “Componente”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:
id
Identificatorul 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.