Webkomponenten

Web Components ist ein Standard, der es Ihnen ermöglicht, komplette JavaScript-Funktionen in Ihre Website zu integrieren, ohne programmieren zu müssen. Dank dieser coolen Technologie können Sie Wink-Reiseinventar mit sehr wenig Aufwand einbetten. Dieser Artikel führt Sie durch unsere Sammlung von Webkomponenten und zeigt Ihnen, wie Sie sie verwenden.

Wink einbetten

Es gibt drei Dinge, die Sie auf jeder Seite einfügen müssen, auf der Sie eine unserer Webkomponenten anzeigen möchten.

Binden Sie unser Stylesheet ein.
Binden Sie unser Javascript ein.
Binden Sie unseren Application Loader ein.

Stylesheet

Binden Sie unsere CSS-Stile im Kopfbereich Ihres Dokuments ein.

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

Javascript

Binden Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen direkt vor dem schließenden </body>-Tag).

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

Ihre Website ist nun bereit und kann unsere Webkomponenten anzeigen.

Komponenten

Lesen Sie unten mehr über unsere Komponentenbibliothek.

Application Loader

Der Loader ist verantwortlich für die Verwaltung des Zustands und die Steuerung der Interaktion zwischen unseren Komponenten. (Binden Sie ihn unter unserem Javascript ein).

<html>
  <body>
    <wink-app-loader
      client-id="IHRE CLIENT-ID HIER EINFÜGEN"
      configuration-id="IHRE ANPASSUNGS-ID HIER EINFÜGEN"
    ></wink-app-loader>
  </body>
</html>

Content Loader

Der Content Loader ist das Herzstück unserer Webkomponenten-Bibliothek. Er ist verantwortlich für die Anzeige Ihres Inventars (Karten, Raster, Kartenansichten).

Verfügbare Attribute:

layout
id
sort

Das Attribut sort ist nur verfügbar, wenn das Layout RANKED ist und Sie kein bestehendes geranktes Raster verwenden möchten. In diesen Fällen lassen Sie id leer.

Verfügbare Layout-Typen:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Verfügbare Sortier-Typen:

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ür Karten, Raster und Kartenansichten.

Lookup

Lookup funktioniert hervorragend zusammen mit einem Ihrer gerankten Raster. Es ermöglicht Ihren Nutzern, nach Hotels und Reisezielen zu suchen, und das Raster aktualisiert sich entsprechend der Suchergebnisse.

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

Ein Klick auf die obige Komponente öffnet ein Modal, in dem Sie das Reiseziel oder Hotel eingeben können, nach dem Sie suchen.

Itinerary

Die Itinerary-Schaltfläche zeigt die aktuelle Reiseroute auf der Schaltfläche an. Wenn Sie darauf klicken, wird der vollständige Reiseplaner als Modal angezeigt.

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

Itinerary Webkomponente

Ein Klick auf die obige Schaltfläche öffnet ein Modal, in dem Sie Ihre Reiseroute aktualisieren können.

Search

Search ist eine rein ikonische Schaltfläche des Reiseplaners. Wenn Sie darauf klicken, wird der vollständige Reiseplaner als Modal angezeigt.

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

Ein Klick auf die obige Schaltfläche öffnet ein Modal, in dem Sie Ihre Reiseroute aktualisieren können.

Itinerary Form

Die Itinerary-Komponente zeigt ein Formular für die Reiseroute an, mit dem Nutzer interagieren können.

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

Wenn die Reiseroute in einer unserer Itinerary-Komponenten geändert wird, löst dies ein Update-Event für alle Inventare aus, die derzeit auf der Seite angezeigt werden.

Account

Die Account-Schaltfläche ermöglicht es Ihnen, Wink-Authentifizierung auf Ihrer Website hinzuzufügen.

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

Account Webkomponente — *Account-Schaltfläche Webkomponente*

Ein Klick auf die Schaltfläche, wenn der Nutzer nicht authentifiziert ist, leitet den Nutzer zur Authentifizierung weiter. Wenn der Nutzer authentifiziert ist, wird das Profilbild des Nutzers angezeigt.

Ein Klick auf die Schaltfläche öffnet das benutzerspezifische Dropdown-Menü.

TripPay einbetten

Es gibt zwei Dinge, die Sie auf jeder Seite einfügen müssen, auf der Sie die TripPay-Zahlungs-Webkomponente verwenden möchten.

Binden Sie unser Stylesheet ein.
Binden Sie unser Javascript ein.

Stylesheet

Binden Sie unsere CSS-Stile im Kopfbereich Ihres Dokuments ein.

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

Javascript

Binden Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen direkt vor dem schließenden <body>-Tag).

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

Ihre Website ist nun bereit und kann unsere Webkomponenten anzeigen.

Komponenten

Payment

Die Payment-Komponente ermöglicht es Ihnen, TripPay mitzuteilen, dass ein Reisender etwas kaufen möchte, sowie die Regeln und Preise für diese Artikel.

Es gibt ein erforderliches Attribut für das Widget:

id Die Kennung des Buchungsvertrags, den Sie ausführen möchten.

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

Das Widget bereitet den Vertrag zur Ausführung vor und zeigt dem Nutzer Zahlungsdetails (Abbildung 1) an, um die Buchung abzuschließen.

Fehler

Wenn Sie beim Einbetten einer unserer Webkomponenten, entweder auf WinkLinks oder auf Ihrer eigenen Website, eine Fehlermeldung erhalten, könnten folgende Dinge schiefgelaufen sein:

Verfügbarkeit

Das Inventar könnte nicht mehr verfügbar sein. Gehen Sie zu Studio und prüfen Sie, ob der Status der “Karte” verfügbar ist. Wenn nicht, wird sie rot angezeigt. In diesem Fall können Sie warten, ob der Anbieter sie wieder verfügbar macht, oder sie aus Ihrer Liste entfernen.

Entfernt

Das Inventar könnte entfernt worden sein. Gehen Sie zu Studio und prüfen Sie, ob der Status der “Karte” verfügbar ist. Wenn nicht, wird sie rot angezeigt. In diesem Fall können Sie warten, ob der Anbieter sie wieder verfügbar macht, oder sie aus Ihrer Liste entfernen.

Anpassung

Sie haben möglicherweise versehentlich die Anpassung entfernt, die Sie für Ihr Inventar definiert haben. Stellen Sie sicher, dass die Anpassung noch verfügbar ist, und legen Sie eine neue fest, falls eine fehlt.

Anwendung

Dies ist nur für Webentwickler relevant. Wenn Sie versehentlich die Application entfernt haben und die Client-ID nicht mehr verfügbar ist, erstellen Sie bitte eine neue Anwendung und verwenden Sie die neue Client-ID, um unsere Webkomponenten einzubetten.