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 einbinden müssen, auf der Sie eine unserer Webkomponenten anzeigen möchten.

Binden Sie unser Stylesheet ein.
Binden Sie unser Javascript ein.
Binden Sie unseren Anwendungs-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 Seite ist nun bereit und kann unsere Webkomponenten anzeigen.

Komponenten

Lesen Sie unten mehr über unsere Komponentenbibliothek.

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

Reiseplan

Die Reiseplan-Schaltfläche zeigt den aktuellen Reiseplan auf der Schaltfläche an. Wenn Sie darauf klicken, wird der vollständige Reiseplan-Auswähler als Modal angezeigt.

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

Reiseplan Webkomponente

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

Suchmodal — *Reiseplan-Auswähler als Modal*

Suche

Suche ist eine rein ikonische Schaltfläche des Reiseplan-Auswählers. Wenn Sie darauf klicken, wird der vollständige Reiseplan-Auswähler als Modal angezeigt.

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

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

Reiseplan-Formular

Die Reiseplan-Komponente zeigt ein Reiseplan-Formular an, mit dem Nutzer interagieren können.

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

Eine Änderung des Reiseplans in einer unserer Reiseplan-Komponenten löst das Ereignis zur Aktualisierung des Reiseplans für jedes Inventar aus, das Sie derzeit auf der Seite anzeigen.

Konto

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

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

Konto Webkomponente — *Konto-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 nutzerspezifische Dropdown-Menü.

TripPay einbetten

Es gibt zwei Dinge, die Sie auf jeder Seite einbinden 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 Seite ist nun bereit und kann unsere Webkomponenten anzeigen.

Komponenten

Zahlung

Die Zahlungs-Komponente informiert TripPay darüber, dass ein Reisender etwas kaufen möchte, sowie über 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 Wink 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 Wink 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 Anwendung 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.