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

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

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

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

Lesen Sie unten mehr über unsere Komponentenbibliothek.

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

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 Attributsortist nur verfügbar, wenn das LayoutRANKEDund 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

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.

Route

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>

Reiserouten-Webkomponente

Wenn Sie auf die Schaltfläche oben klicken, wird ein Fenster geöffnet, in dem Sie Ihre Reiseroute aktualisieren können.

Suchmodal — *Reiseroutenauswahl als Modal*

Suchen

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

Die Reiseroutenkomponente zeigt ein Reiseroutenformular an, mit dem Benutzer interagieren können.

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

ReiseroutenformularWebkomponente — *Webkomponente für Reiseroutenformulare*

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.

Konto

Mit der Schaltfläche „Konto“ können Sie Ihrer Site eine Wink-Authentifizierung hinzufügen.

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

Konto-Webkomponente — *Webkomponente mit der Schaltfläche „Konto“*

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

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

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

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

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:

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