Zum Inhalt springen
Academy

Raster

Ein Raster stellt eine Liste von Anbietern und Inventar dar und zeigt die Details über eine interaktive, buchbare Raster-Benutzeroberfläche an. Das Raster unterstützt die Anzeige jeglichen Inventars aus Ihrer kuratierten Liste oder gespeicherten Suche. Ein Benutzer interagiert mit einem Raster auf die gleiche Weise wie mit einer einzelnen Karte mit einer zusätzlichen Funktion:

  1. Durchblättern des Rasters durch Klicken auf die Schaltfläche Mehr anzeigen (wenn weitere Elemente verfügbar sind).
Rastervorschau
Raster mit mehreren Zimmertypen

Oben sehen Sie ein Beispiel unseres Rasters, das eine Liste von Zimmertyp-Karten zeigt.

Der Rest dieses Artikels führt Sie durch die Erstellung, Anpassung und Bereitstellung des Rasters für Ihre Nutzer.

Rastertypen

Abschnitt betitelt „Rastertypen“

Es gibt drei Arten von Rastern:

  1. Raster basierend auf einer kuratierten Liste.
  2. Raster basierend auf einer gespeicherten Suche.
  3. Raster basierend auf einem Ort und Sortierkriterien (d.h. Ranglisten-Raster).

Raster aus kuratierter Liste

Abschnitt betitelt „Raster aus kuratierter Liste“

Dies ist ein Raster, das das Inventar verwendet, das Sie in einer Ihrer kuratierten Listen gesammelt haben, und die Liste in buchbares Reiseinventar umwandelt, das Sie Ihren Nutzern zeigen können.

Erstellen

Abschnitt betitelt „Erstellen“

Navigieren Sie im Hauptnavigationsmenü zu Inventar > Kuratierte Listen. Für dieses Beispiel verwenden wir Ihre Favoriten-Liste. Wenn Sie noch nichts zu Ihren Favoriten hinzugefügt haben, gehen Sie zu Suche, um zu erfahren, wie das geht.

Raster aus kuratierter Liste erstellen
Formular zum Erstellen eines Rasters aus kuratierter Liste
  1. Klicken Sie auf die Schaltfläche Aktionen bei der Favoriten-Liste.
  2. Klicken Sie auf die Schaltfläche Raster erstellen.
  3. Ein neues Fenster wird angezeigt, in dem Sie Ihr Raster benennen können. Siehe unten.
  4. Klicken Sie auf die Schaltfläche OK, um fortzufahren.

Ihr Raster wurde erstellt. Navigieren Sie im Hauptnavigationsmenü zu Tools > Raster und klicken Sie auf den Tab Kuratiertes Raster, um Ihr neues Raster zu sehen.

Anpassen

Abschnitt betitelt „Anpassen“

Das Formular ermöglicht Ihnen folgende Anpassungen Ihres Rasters:

  1. Geben Sie ihm einen Namen, damit Sie sich merken, worum es bei dem Raster geht.
  2. Wählen Sie die Anpassung aus, die Sie auf dieses Raster anwenden möchten.
  3. Wählen Sie die anfängliche Kartenansicht, die die Nutzer zuerst sehen sollen. Standardmäßig ist dies die native Ansicht dieses Inventars.
  4. Wählen Sie das Abzeichen, das Sie auf der Karte verwenden möchten. Ein Abzeichen ermöglicht es Nutzern, Inventar anhand einer aggregierten Metrik wie umweltfreundlich zu vergleichen.
  5. Fügen Sie Schlüsselwörter hinzu, getrennt durch Kommas, die von Web-Crawlern verwendet werden.
  6. Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Nutzer sehen soll.
  7. Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

Teilen

Abschnitt betitelt „Teilen“
Raster aus kuratierter Liste
Eintrag des Rasters aus kuratierter Liste mit eingeklapptem Aktionsmenü

Oben sehen Sie ein Bild mit allen verfügbaren Aktionen für Ihr Raster:

  • Aktualisieren Aktualisiert Ihre Rasterkonfiguration.
  • Zu WinkLinks hinzufügen Fügt das Raster Ihrem WinkLinks-Konto hinzu.
  • Einbetten Zeigt Ihnen, wie Sie dieses Raster als Raster in Ihre Website einbetten.
  • Mit WordPress verwenden Zeigt Ihnen, wie Sie unser WordPress-Plugin verwenden, um dieses Raster in Ihre Website einzubetten.

Einige dieser Optionen erläutern wir weiter unten ausführlicher.

Einbetten

Abschnitt betitelt „Einbetten“
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

So betten Sie Ihr Raster in Ihre Website ein:

  • Zeile 3 zeigt, wie Sie die Wink-Styles in Ihre Website einbinden.
  • Die Zeilen 6 bis 9 zeigen, wie Sie die wink-content-loader Web-Komponente verwenden und ihr mitteilen, ein Raster für Ihren Code zu laden.
  • Zeile 11 zeigt, wie Sie unser Javascript in Ihre Website einbinden.
  • Zeile 13 zeigt, wie Sie die wink-app-loader Web-Komponente einbinden und ihr mitteilen, Ihre konfigurationsbezogenen Einstellungen auf Seitenebene zu laden.

Raster aus gespeicherter Suche

Abschnitt betitelt „Raster aus gespeicherter Suche“

Dies ist ein Raster, das das Inventar in Ihrer gespeicherten Suchanfrage verwendet und die Suchergebnisse in buchbares Reiseinventar umwandelt, das Sie Ihren Nutzern zeigen können.

Erstellen

Abschnitt betitelt „Erstellen“

Navigieren Sie im Hauptnavigationsmenü zu Inventar > Gespeicherte Suchen. Wenn Sie noch keine gespeicherte Suche erstellt haben, gehen Sie zu Suche, um zu erfahren, wie das geht.

Raster aus gespeicherter Suche erstellen
Formular zum Erstellen eines Rasters aus gespeicherter Suche
  1. Klicken Sie auf die Schaltfläche Aktionen bei Ihrer gespeicherten Suche.
  2. Klicken Sie auf die Schaltfläche Raster erstellen.
  3. Ein neues Fenster wird angezeigt, in dem Sie Ihr Raster benennen können. Siehe unten.
  1. Klicken Sie auf die Schaltfläche OK, um fortzufahren.

Ihr Raster wurde erstellt. Navigieren Sie im Hauptnavigationsmenü zu Tools > Raster und klicken Sie auf den Tab Raster aus gespeicherter Suche, um Ihr neues Raster zu sehen.

Anpassen

Abschnitt betitelt „Anpassen“

Das Formular ermöglicht Ihnen folgende Anpassungen Ihres Rasters:

  1. Geben Sie ihm einen Namen, damit Sie sich merken, worum es bei dem Raster geht.
  2. Wählen Sie die Anpassung aus, die Sie auf dieses Raster anwenden möchten.
  3. Wählen Sie die anfängliche Kartenansicht, die die Nutzer zuerst sehen sollen. Standardmäßig ist dies die native Ansicht dieses Inventars.
  4. Wählen Sie das Abzeichen, das Sie auf der Karte verwenden möchten. Ein Abzeichen ermöglicht es Nutzern, Inventar anhand einer aggregierten Metrik wie umweltfreundlich zu vergleichen.
  5. Fügen Sie Schlüsselwörter hinzu, getrennt durch Kommas, die von Web-Crawlern verwendet werden.
  6. Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Nutzer sehen soll.
  7. Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

Teilen

Abschnitt betitelt „Teilen“
Raster aus gespeicherter Suche
Eintrag des Rasters aus gespeicherter Suche mit eingeklapptem Aktionsmenü

Einbetten

Abschnitt betitelt „Einbetten“
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

So betten Sie Ihr Raster in Ihre Website ein:

  • Zeile 3 zeigt, wie Sie die Wink-Styles in Ihre Website einbinden.
  • Die Zeilen 6 bis 9 zeigen, wie Sie die wink-content-loader Web-Komponente verwenden und ihr mitteilen, ein Raster für Ihren Code zu laden.
  • Zeile 11 zeigt, wie Sie unser Javascript in Ihre Website einbinden.
  • Zeile 13 zeigt, wie Sie die wink-app-loader Web-Komponente einbinden und ihr mitteilen, Ihre konfigurationsbezogenen Einstellungen auf Seitenebene zu laden.

Ranglisten-Raster

Abschnitt betitelt „Ranglisten-Raster“

Erstellen

Abschnitt betitelt „Erstellen“

Erstellen Sie ein Ranglisten-Raster, indem Sie zu Tools > Raster navigieren und auf den Tab Ranglisten-Raster klicken. Klicken Sie auf die Schaltfläche Ranglisten-Raster erstellen.

Anpassen

Abschnitt betitelt „Anpassen“

Das Formular ermöglicht Ihnen folgende Anpassungen Ihres Ranglisten-Rasters:

  1. Wählen Sie ein Reiseziel. z.B. Tokio.
  2. Geben Sie ihm einen Namen, damit Sie sich merken, worum es bei dem Raster geht. z.B. Umweltfreundliche Hotels in Tokio
  3. Wählen Sie die Anpassung aus, die Sie auf dieses Raster anwenden möchten.
  4. Wählen Sie die anfängliche Kartenansicht, die die Nutzer zuerst sehen sollen. Standardmäßig ist dies die native Ansicht dieses Inventars.
  5. Wählen Sie die Eigenschaft, nach der die Unterkünfte sortiert werden sollen. z.B. Umweltfreundlichkeit.
  6. Fügen Sie Schlüsselwörter hinzu, getrennt durch Kommas, die von Web-Crawlern verwendet werden.
  7. Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Nutzer sehen soll.
  8. Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

Nach dem Speichern Ihres Ranglisten-Rasters werden Sie zur Seite Ihrer Ranglisten-Raster weitergeleitet und Ihr Raster ist nun bereit, mit der Welt geteilt zu werden.

Teilen

Abschnitt betitelt „Teilen“
Ranglisten-Raster
Ein Ranglisten-Raster mit eingeklapptem Aktionsmenü

Oben sehen Sie ein Bild mit allen verfügbaren Aktionen für Ihr Ranglisten-Raster:

  • Aktualisieren Aktualisiert Ihre Rasterkonfiguration.
  • Zu WinkLinks hinzufügen Fügt das Ranglisten-Raster Ihrem WinkLinks-Konto hinzu.
  • Einbetten Zeigt Ihnen, wie Sie dieses Raster als Raster in Ihre Website einbetten.
  • Mit WordPress verwenden Zeigt Ihnen, wie Sie unser WordPress-Plugin verwenden, um diese Karte in Ihre Website einzubetten.

Einige dieser Optionen erläutern wir weiter unten ausführlicher.

Einbetten

Abschnitt betitelt „Einbetten“
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

So betten Sie Ihr Raster in Ihre Website ein:

  • Zeile 3 zeigt, wie Sie die Wink-Styles in Ihre Website einbinden.
  • Die Zeilen 6 bis 9 zeigen, wie Sie die wink-content-loader Web-Komponente verwenden und ihr mitteilen, ein Ranglisten-Raster für Ihren Code zu laden.
  • Zeile 11 zeigt, wie Sie unser Javascript in Ihre Website einbinden.
  • Zeile 13 zeigt, wie Sie die wink-app-loader Web-Komponente einbinden und ihr mitteilen, Ihre konfigurationsbezogenen Einstellungen auf Seitenebene zu laden.

API

Abschnitt betitelt „API“

Entwickler, die Raster verwalten möchten, können zu Entwickler > API > Inventar gehen.

Weiterführende Literatur

Abschnitt betitelt „Weiterführende Literatur“