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 das
Show more
Taste (wenn mehr Artikel verfügbar sind).
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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Erstellen“Navigieren Sie zuInventory > Curated Lists
aus der Hauptnavigationsleiste. Für dieses Beispiel verwenden wir IhreFavorites
Liste.
Wenn Sie Ihrer Liste noch nichts hinzugefügt habenFavorites
gehen Sie zuSuchenum zu lernen wie.
- Klicken Sie auf das
Actions
Schaltfläche auf derFavorites
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 > Grids
Klicken Sie in der Hauptnavigationsleiste auf dasCurated Grids
Registerkarte, um Ihr neues Raster anzuzeigen.
Anpassen
Abschnitt betitelt „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.
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
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 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
Abschnitt betitelt „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
Abschnitt betitelt „Erstellen“Navigieren Sie zuInventory > Saved searches
aus 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 auf
OK
Schaltfläche, um fortzufahren.
Ihr Raster wurde erstellt. Navigieren Sie zuTools > Grids
Klicken Sie in der Hauptnavigationsleiste auf dasSaved Search Grids
Registerkarte, um Ihr neues Raster anzuzeigen.
Anpassen
Abschnitt betitelt „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.
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 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
Abschnitt betitelt „Rangliste“Erstellen
Abschnitt betitelt „Erstellen“Erstellen Sie ein Ranglistenraster, indem Sie zuTools > Grids
und klicken Sie auf dasRanked Grid
Klicken Sie auf dieCreate ranked grid
Taste.
Anpassen
Abschnitt betitelt „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.
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
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 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.
Entwickler, die Grids verwalten möchten, können zuEntwickler > API > Inventar.
Weiterführende Literatur
Abschnitt betitelt „Weiterführende Literatur“- Erfahren Sie mehr über unsere Sammlung vonWebkomponenten.
- Erfahren Sie mehr über dieWink WordPress-Plugin.