Grids

Ein Raster stellt eine Liste von Lieferanten und Beständen dar und zeigt die Details über eine interaktive, buchbare Raster-Benutzeroberfläche an. Das Raster unterstützt die Anzeige aller Bestände aus Ihrer kuratierten Liste oder gespeicherten Suche. Ein Nutzer interagiert mit einem Raster genauso wie mit einem einzelnenKartemit einer zusätzlichen Funktion:

Blättern Sie durch das Raster, indem Sie auf dasShow more Taste (wenn mehr Artikel verfügbar sind).

Rastervorschau — *Raster mit mehreren Zimmertypen*

Oben sehen Sie ein Beispiel unseres Rasters mit einer Liste von Zimmertypkarten.

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

Rastertypen

Es gibt drei Arten von Rastern:

Raster basierend auf einemkuratierte Liste.
Raster basierend auf einemgespeicherte Suche.
Raster basierend auf einem Standort und Sortierkriterien (d. h. Ranglistenraster).

Kuratiertes Listenraster

Dies ist ein Raster, das den Bestand verwendet, den Sie in einer Ihrer kuratierten Listen gesammelt haben, und die Liste in buchbaren Reisebestand umwandelt, den Sie Ihren Benutzern zeigen können.

Erstellen

Navigieren Sie zuInventory > Curated Listsaus der Hauptnavigationsleiste. Für dieses Beispiel verwenden wir IhreFavoritesListe. Wenn Sie Ihrer Liste noch nichts hinzugefügt habenFavoritesgehen Sie zuSuchenum zu lernen wie.

Klicken Sie auf das Actions Schaltfläche auf der Favorites Liste.
Klicken Sie auf das Create a grid Taste.
Es wird ein neues Fenster angezeigt, in dem Sie Ihrem Raster einen Namen geben können. Siehe unten.
Klicken OK Schaltfläche, um fortzufahren.

Ihr Raster wurde erstellt. Navigieren Sie zuTools > GridsKlicken Sie in der Hauptnavigationsleiste auf dasCurated GridsRegisterkarte, um Ihr neues Raster anzuzeigen.

Anpassen

Mit dem Formular können Sie Ihr Raster auf folgende Weise anpassen:

Geben Sie ihm einen Namen, damit Sie sich daran erinnern, worum es in dem Raster geht.
Wählen Sie die Anpassung Sie auf dieses Raster anwenden möchten.
Wählen Sie die Kartenseite aus, die den Benutzern zuerst angezeigt werden soll. Standardmäßig ist dies die native Seite dieses Inventars.
Wählen Sie das Badge aus, das Sie auf der Karte verwenden möchten. Mit einem Badge können Benutzer den Bestand anhand einer aggregierten Metrik vergleichen, z. B. eco-friendly.
Fügen Sie durch Kommas getrennte Schlüsselwörter hinzu, die verwendet werden von Webcrawler.
Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Benutzer sehen soll.
Klicken Sie auf das Save Schaltfläche, um fortzufahren.

Aktie

Kuratiertes Listenraster — *Kuratierter Listenrastereintrag mit reduziertem Aktionsmenü*

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

AktualisierenAktualisiert Ihre Rasterkonfiguration.
Zu WinkLinks hinzufügenFügt das Raster zu Ihrem WinkLinks-Konto hinzu.
EinbettenZeigt Ihnen, wie Sie dieses Raster einbetten alsNetzin Ihre Website.
Verwendung mit WordPressZeigt Ihnen, wie Sie unsereWordPress-Pluginum dieses Raster in Ihre Website einzubetten.

Einige dieser Optionen werden im Folgenden ausführlicher behandelt.

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 Site ein:

Zeile 3 zeigt Ihnen, wie Sie die Wink-Stile in Ihre Site einbetten.
Die Zeilen 6 bis 9 zeigen Ihnen, wie Sie dieWink-InhaltsladerWebkomponente und weisen Sie sie an, ein Raster für Ihren Code abzurufen.
Zeile 11 zeigt Ihnen, wie Sie unser Javascript in Ihre Site einbetten.
Zeile 13 zeigt Ihnen, wie Sie dieWink-App-LoaderWebkomponente und weisen Sie sie an, Ihre Konfigurationseinstellungen auf Seitenebene abzurufen.

Gespeichertes Suchraster

Dies ist ein Raster, das den Bestand in Ihrer gespeicherten Suchanfrage verwendet und die Suchergebnisse in buchbaren Reisebestand umwandelt, den Sie Ihren Benutzern anzeigen können.

Erstellen

Navigieren Sie zuInventory > Saved searchesaus der Hauptnavigationsleiste. Wenn Sie noch keine gespeicherte Suche erstellt haben, gehen Sie zuSuchenum zu lernen wie.

Klicken Sie auf das Actions Schaltfläche für Ihre gespeicherte Suche.
Klicken Sie auf das Create a grid Taste.
Es wird ein neues Fenster angezeigt, in dem Sie Ihrem Raster einen Namen geben können. Siehe unten.

Klicken Sie aufOKSchaltfläche, um fortzufahren.

Ihr Raster wurde erstellt. Navigieren Sie zuTools > GridsKlicken Sie in der Hauptnavigationsleiste auf dasSaved Search GridsRegisterkarte, um Ihr neues Raster anzuzeigen.

Anpassen

Mit dem Formular können Sie Ihr Raster auf folgende Weise anpassen:

Geben Sie ihm einen Namen, damit Sie sich daran erinnern, worum es in dem Raster geht.
Wählen Sie die Anpassung Sie auf dieses Raster anwenden möchten.
Wählen Sie die Kartenseite aus, die den Benutzern zuerst angezeigt werden soll. Standardmäßig ist dies die native Seite dieses Inventars.
Wählen Sie das Badge aus, das Sie auf der Karte verwenden möchten. Mit einem Badge können Benutzer den Bestand anhand einer aggregierten Metrik vergleichen, z. B. eco-friendly.
Fügen Sie durch Kommas getrennte Schlüsselwörter hinzu, die verwendet werden von Webcrawler.
Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Benutzer sehen soll.
Klicken Sie auf das Save Schaltfläche, um fortzufahren.

Aktie

Gespeichertes Suchraster — *Gespeicherter Suchrastereintrag mit reduziertem Aktionsmenü*

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 Site ein:

Zeile 3 zeigt Ihnen, wie Sie die Wink-Stile in Ihre Site einbetten.
Die Zeilen 6 bis 9 zeigen Ihnen, wie Sie dieWink-InhaltsladerWebkomponente und weisen Sie sie an, ein Raster für Ihren Code abzurufen.
Zeile 11 zeigt Ihnen, wie Sie unser Javascript in Ihre Site einbetten.
Zeile 13 zeigt Ihnen, wie Sie dieWink-App-LoaderWebkomponente und weisen Sie sie an, Ihre Konfigurationseinstellungen auf Seitenebene abzurufen.

Rangliste

Erstellen

Erstellen Sie ein Ranglistenraster, indem Sie zuTools > Gridsund klicken Sie auf dasRanked GridKlicken Sie auf dieCreate ranked grid Taste.

Anpassen

Mit dem Formular können Sie Ihr Rangraster auf folgende Weise anpassen:

Wählen Sie ein Ziel. Z. B. Tokio.
Geben Sie ihm einen Namen, damit Sie sich daran erinnern, worum es in dem Raster geht. Z. B. Umweltfreundliche Hotels in Tokio
Wählen Sie die Anpassung Sie auf dieses Raster anwenden möchten.
Wählen Sie die Kartenseite aus, die den Benutzern zuerst angezeigt werden soll. Standardmäßig ist dies die native Seite dieses Inventars.
Wählen Sie aus, nach welchem Merkmal die Eigenschaften sortiert werden sollen. Z.B. Umweltfreundlichkeit.
Fügen Sie durch Kommas getrennte Schlüsselwörter hinzu, die verwendet werden von Webcrawler.
Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Benutzer sehen soll.
Klicken Sie auf das Save Schaltfläche, um fortzufahren.

Nachdem Sie Ihr Ranglistenraster gespeichert haben, werden Sie auf Ihre Ranglistenraster-Seite weitergeleitet und Ihr Raster kann nun mit der Welt geteilt werden.

Aktie

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

AktualisierenAktualisiert Ihre Rasterkonfiguration.
Zu WinkLinks hinzufügenFügt das Ranglistenraster Ihrem WinkLinks-Konto hinzu.
EinbettenZeigt Ihnen, wie Sie dieses Raster einbetten alsNetzin Ihre Website.
Verwendung mit WordPressZeigt Ihnen, wie Sie unsereWordPress-Pluginum diese Karte in Ihre Website einzubetten.

Einige dieser Optionen werden im Folgenden ausführlicher behandelt.

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 Site ein:

Zeile 3 zeigt Ihnen, wie Sie die Wink-Stile in Ihre Site einbetten.
Die Zeilen 6 bis 9 zeigen Ihnen, wie Sie dieWink-InhaltsladerWebkomponente und weisen Sie sie an, ein Rangraster für Ihren Code abzurufen.
Zeile 11 zeigt Ihnen, wie Sie unser Javascript in Ihre Site einbetten.
Zeile 13 zeigt Ihnen, wie Sie dieWink-App-LoaderWebkomponente und weisen Sie sie an, Ihre Konfigurationseinstellungen auf Seitenebene abzurufen.

API

Entwickler, die Grids verwalten möchten, können zuEntwickler > API > Inventar.

Weiterführende Literatur

Erfahren Sie mehr über unsere Sammlung vonWebkomponenten.
Erfahren Sie mehr über dieWink WordPress-Plugin.