Web Components

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 Application Loader ein.

Stylesheet

Binden Sie unsere CSS-Styles 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.

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 Ranked Grid 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 Ranked Grids. Es ermöglicht Ihren Nutzern, nach Hotels und Reisezielen zu suchen, und das Grid aktualisiert sich entsprechend der Suchergebnisse.

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

Lookup web component — *Lookup Webkomponente*

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

Lookup modal — *Lookup-Modal mit Ergebnissen*

Itinerary

Die Itinerary-Schaltfläche zeigt die aktuelle Reiseroute auf dem Button an. Wenn Sie darauf klicken, wird der vollständige Itinerary-Picker 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 Itinerary-Pickers. Wenn Sie darauf klicken, wird der vollständige Itinerary-Picker als Modal angezeigt.

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

Search web component — *Search Webkomponente*

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>

Itinerary formweb component — *Itinerary-Formular Webkomponente*

Eine Änderung der Reiseroute in einer unserer Itinerary-Komponenten löst das Ereignis zur Aktualisierung der Reiseroute für jedes Inventar aus, das derzeit auf der Seite angezeigt wird.

Account

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

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

Account web component — *Account-Button 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.

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-Styles 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

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.

Payment details — *Abbildung 1. Beispiel eines Zahlungsformulars*

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 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 Web Components einzubetten.