Webkomponenten
Webkomponentenist ein Standard, mit dem Sie komplette Javascript-Funktionen in Ihre Website integrieren können, ohne Programmierkenntnisse zu haben. Dank dieser innovativen Technologie können Sie Wink-Reiseangebote ganz einfach einbetten. Dieser Artikel führt Sie durch unsere Sammlung von Webkomponenten und zeigt Ihnen, wie Sie diese verwenden.
Einbetten Wink
Abschnitt betitelt „Einbetten Wink“Es gibt drei Dinge, die Sie in jede Seite einbinden müssen, auf der Sie eine unserer Webkomponenten anzeigen möchten.
- Binden Sie unser Stylesheet ein.
- Integrieren Sie unser Javascript.
- Integrieren Sie unseren Anwendungslader.
Stylesheet
Abschnitt betitelt „Stylesheet“Fügen Sie unsere CSS-Stile in den Kopf Ihres Dokuments ein.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Abschnitt betitelt „Javascript“Fügen Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen, direkt über dem End-Body-Tag).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Ihre Site ist jetzt bereit und kann unsere Webkomponenten anzeigen.
Komponenten
Abschnitt betitelt „Komponenten“Lesen Sie unten mehr über unsere Komponentenbibliothek.
Anwendungslader
Abschnitt betitelt „Anwendungslader“Der Loader ist für die Statusbeibehaltung und die Verwaltung der Interaktion zwischen unseren Komponenten verantwortlich. (Fügen Sie es unter unserem Javascript ein).
<html> <body> <wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>
Inhaltslader
Abschnitt betitelt „Inhaltslader“Der Content Loader ist das Herzstück unserer Webkomponentenbibliothek. Er ist für die Anzeige Ihres Inventars (Karten, Raster, Karten) verantwortlich.
Verfügbare Attribute:
- Layout
- Ausweis
- Sortieren
Das Attributsort
ist nur verfügbar, wenn das LayoutRANKED
und Sie möchten kein vorhandenes Ranglistenraster verwenden. Lassen Sie in diesen Fällenid
leer.
Verfügbare Layouttypen:
AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED
Verfügbare Sortiertypen:
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>
Beispiele finden Sie fürKarten,Gitter Und Karten.
Nachschlagen
Abschnitt betitelt „Nachschlagen“Die Suchfunktion funktioniert hervorragend mit einem Ihrer Ranglistenraster. Ihre Benutzer können damit nach Hotels und Reisezielen suchen, und das Raster wird entsprechend den Suchergebnissen aktualisiert.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Wenn Sie auf die Komponente oben klicken, wird ein Modalfenster geöffnet, in das Sie das gesuchte Reiseziel oder Hotel eingeben können.
Die Reiseroutenschaltfläche zeigt die aktuelle Reiseroute an. Wenn Sie darauf klicken, wird die vollständige Reiseroutenauswahl modal angezeigt.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Wenn Sie auf die Schaltfläche oben klicken, wird ein Fenster geöffnet, in dem Sie Ihre Reiseroute aktualisieren können.
Die Suchfunktion ist eine reine Symbolschaltfläche der Reiseroutenauswahl. Wenn Sie darauf klicken, wird die vollständige Reiseroutenauswahl modal angezeigt.
<html> <body> <wink-search></wink-search> </body></html>
Wenn Sie auf die Schaltfläche oben klicken, wird ein Fenster geöffnet, in dem Sie Ihre Reiseroute aktualisieren können.
Reiseroutenformular
Abschnitt betitelt „Reiseroutenformular“Die Reiseroutenkomponente zeigt ein Reiseroutenformular an, mit dem Benutzer interagieren können.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Durch Ändern der Reiseroute in einer unserer Reiseroutenkomponenten wird das Ereignis zur Reiseroutenaktualisierung für alle Bestände ausgelöst, die derzeit auf der Seite angezeigt werden.
Mit der Schaltfläche „Konto“ können Sie Ihrer Site eine Wink-Authentifizierung hinzufügen.
<html> <body> <wink-account></wink-account> </body></html>
Wenn der Benutzer nicht authentifiziert ist, wird er durch Klicken auf die Schaltfläche zur Authentifizierung weitergeleitet. Nach der Authentifizierung wird sein Profilsymbol angezeigt.
Wenn Sie auf die Schaltfläche klicken, wird das benutzerspezifische Dropdown-Menü geöffnet.
TripPay einbetten
Abschnitt betitelt „TripPay einbetten“Es gibt zwei Dinge, die Sie in jede Seite einbinden müssen, auf der Sie die TripPay-Zahlungswebkomponente verwenden möchten.
- Binden Sie unser Stylesheet ein.
- Integrieren Sie unser Javascript.
Stylesheet
Abschnitt betitelt „Stylesheet“Fügen Sie unsere CSS-Stile in den Kopf Ihres Dokuments ein.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Abschnitt betitelt „Javascript“Fügen Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen, direkt über dem End-Body-Tag).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Ihre Site ist jetzt bereit und kann unsere Webkomponenten anzeigen.
Komponenten
Abschnitt betitelt „Komponenten“Zahlung
Abschnitt betitelt „Zahlung“Mit der Zahlungskomponente können Sie TripPay darüber informieren, dass ein Reisender etwas kaufen möchte, sowie über die Regeln und Preise für diese Artikel.
Das Widget verfügt über ein erforderliches Attribut:
id
Die Kennung des Buchungsvertrags, den Sie ausführen möchten.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
So erstellen Sie den Buchungsvertragid
, lesen Sie die Anleitung:Integration mit TripPay.
::
Das Widget bereitet den Vertrag zur Ausführung vor und zeigt Zahlungsdetails an(Abbildung 1)an den Benutzer, um die Buchung abzuschließen.