Ga naar inhoud

Grids

Een raster geeft een lijst met leveranciers en voorraad weer en toont de details via een interactieve, boekbare rasterinterface. Het raster ondersteunt de weergave van elke voorraad uit uw samengestelde lijst of opgeslagen zoekopdracht. Een gebruiker communiceert met een raster op dezelfde manier als met een individu.kaartmet één extra functie:

  1. Blader door het raster door op de knop te klikkenShow more knop (wanneer er meer artikelen beschikbaar zijn).
Rastervoorbeeld
Raster met meerdere kamertypes

Hierboven ziet u een voorbeeld van ons raster met een lijst met kamertypekaarten.

In de rest van dit artikel leggen we u uit hoe u het raster kunt maken, aanpassen en beschikbaar kunt stellen aan uw gebruikers.

Er zijn drie soorten roosters:

  1. Raster gebaseerd op eensamengestelde lijst.
  2. Raster gebaseerd op eenopgeslagen zoekopdracht.
  3. Raster op basis van locatie en sorteercriteria (d.w.z. gerangschikt raster).

Dit is een raster dat gebruikmaakt van de inventaris die u in een van uw samengestelde lijsten hebt verzameld. Deze lijst wordt vervolgens omgezet in een boekbare reisinventaris die u aan uw gebruikers kunt tonen.

Navigeren naarInventory > Curated Listsvanuit de hoofdnavigatiebalk. Voor dit voorbeeld gebruiken we uwFavoriteslijst. Als je nog niets aan je lijst hebt toegevoegd,Favorites, ga naarZoekopdrachtom te leren hoe.

Maak een samengestelde lijstraster
Maak een samengesteld lijstrasterformulier
  1. Klik op de Actions knop op de Favorites lijst.
  2. Klik op de Create a grid knop.
  3. Er verschijnt een nieuw venster waarin u het raster een naam kunt geven. Zie hieronder.
  4. Klik OK knop om door te gaan.

Je raster is aangemaakt. Navigeer naarTools > Gridsvanuit de hoofdnavigatiebalk en klik op deCurated GridsTik op Tab om uw nieuwe raster te bekijken.

Met het formulier kunt u uw raster op de volgende manieren aanpassen:

  1. Geef het een naam, zodat u kunt onthouden waar het raster over gaat.
  2. Selecteer de Maatwerk die u op dit raster wilt toepassen.
  3. Selecteer de eerste kaartzijde die gebruikers als eerste moeten zien. Standaard is dit de oorspronkelijke zijde van die inventaris.
  4. Selecteer de badge die u op de kaart wilt gebruiken. Met een badge kunnen gebruikers de voorraad vergelijken op basis van een geaggregeerde metriek, zoals eco-friendly.
  5. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt zullen worden door Webcrawlers.
  6. Voeg titels en beschrijvingen toe in de talen die u aan de gebruiker wilt laten zien.
  7. Klik op de Save knop om door te gaan.
Gecureerde lijstraster
Gecureerde lijstrasterinvoer met ingeklapt actiemenu

Hierboven ziet u een afbeelding met alle beschikbare acties voor uw raster:

  • UpdateWerkt uw rasterconfiguratie bij.
  • Toevoegen aan WinkLinksVoegt het raster toe aan uw WinkLinks-account.
  • InsluitenLaat zien hoe u dit raster als eenRoosterop uw website.
  • Gebruik met WordPressLaat u zien hoe u onzeWordPress-plug-inom dit raster in uw website te integreren.

Hieronder gaan we dieper in op een aantal van deze opties.

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

Zo kunt u uw raster in uw site insluiten:

  • Regel 3 laat zien hoe u de Wink-stijlen in uw site kunt insluiten.
  • Regels 6 tot en met 9 laten zien hoe u deknipoog-inhoud-laderWebcomponent en vertel het dat het een raster voor uw code moet ophalen.
  • Regel 11 laat zien hoe u Javascript in uw site kunt integreren.
  • Regel 13 laat zien hoe je dewink-app-loaderWebcomponent en geef aan dat deze uw configuratievoorkeuren op paginaniveau moet ophalen.

Dit is een raster dat gebruikmaakt van de inventaris in uw opgeslagen zoekopdracht en de zoekresultaten omzet in boekbare reisinventaris die u aan uw gebruikers kunt tonen.

Navigeren naarInventory > Saved searchesvanuit de hoofdnavigatiebalk. Als je nog geen opgeslagen zoekopdracht hebt gemaakt, ga dan naarZoekopdrachtom te leren hoe.

Opgeslagen zoekraster maken
Opgeslagen zoekrasterformulier maken
  1. Klik op de Actions knop op uw opgeslagen zoekopdracht.
  2. Klik op de Create a grid knop.
  3. Er verschijnt een nieuw venster waarin u het raster een naam kunt geven. Zie hieronder.
  1. KlikOKknop om door te gaan.

Je raster is aangemaakt. Navigeer naarTools > Gridsvanuit de hoofdnavigatiebalk en klik op deSaved Search GridsTik op Tab om uw nieuwe raster te bekijken.

Met het formulier kunt u uw raster op de volgende manieren aanpassen:

  1. Geef het een naam, zodat u kunt onthouden waar het raster over gaat.
  2. Selecteer de Maatwerk die u op dit raster wilt toepassen.
  3. Selecteer de eerste kaartzijde die gebruikers als eerste moeten zien. Standaard is dit de oorspronkelijke zijde van die inventaris.
  4. Selecteer de badge die u op de kaart wilt gebruiken. Met een badge kunnen gebruikers de voorraad vergelijken op basis van een geaggregeerde metriek, zoals eco-friendly.
  5. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt zullen worden door Webcrawlers.
  6. Voeg titels en beschrijvingen toe in de talen die u aan de gebruiker wilt laten zien.
  7. Klik op de Save knop om door te gaan.
Opgeslagen zoekraster
Opgeslagen zoekopdracht in raster met ingeklapt actiemenu
<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>

Zo kunt u uw raster in uw site insluiten:

  • Regel 3 laat zien hoe u de Wink-stijlen in uw site kunt insluiten.
  • Regels 6 tot en met 9 laten zien hoe u deknipoog-inhoud-laderWebcomponent en vertel het dat het een raster voor uw code moet ophalen.
  • Regel 11 laat zien hoe u Javascript in uw site kunt integreren.
  • Regel 13 laat zien hoe je dewink-app-loaderWebcomponent en geef aan dat deze uw configuratievoorkeuren op paginaniveau moet ophalen.

Maak een gerangschikt raster door naar te navigerenTools > Gridsen klik op deRanked Gridtabblad. Klik op deCreate ranked grid knop.

Met het formulier kunt u uw rangschikkingsraster op de volgende manieren aanpassen:

  1. Kies een bestemming. Bijvoorbeeld Tokio.
  2. Geef het een naam, zodat u kunt onthouden waar het raster over gaat. Bijvoorbeeld milieuvriendelijke hotels in Tokio
  3. Selecteer de Maatwerk die u op dit raster wilt toepassen.
  4. Selecteer de eerste kaartzijde die gebruikers als eerste moeten zien. Standaard is dit de oorspronkelijke zijde van die inventaris.
  5. Kies op welke kenmerken u de eigendommen wilt sorteren. Bijvoorbeeld milieuvriendelijkheid.
  6. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt zullen worden door Webcrawlers.
  7. Voeg titels en beschrijvingen toe in de talen die u aan de gebruiker wilt laten zien.
  8. Klik op de Save knop om door te gaan.

Nadat u uw gerangschikte raster hebt opgeslagen, wordt u doorgestuurd naar de pagina met uw gerangschikte rasters. Uw raster is nu klaar om met de wereld te delen.

Gerangschikt raster
Een gerangschikt raster met een ingeklapt actiemenu

Hierboven ziet u een afbeelding met alle beschikbare acties voor uw gerangschikte raster:

  • UpdateWerkt uw rasterconfiguratie bij.
  • Toevoegen aan WinkLinksVoegt het gerangschikte raster toe aan uw WinkLinks-account.
  • InsluitenLaat zien hoe u dit raster als eenRoosterop uw website.
  • Gebruik met WordPressLaat u zien hoe u onzeWordPress-plug-inom deze kaart in uw website te integreren.

Hieronder gaan we dieper in op een aantal van deze opties.

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

Zo kunt u uw raster in uw site insluiten:

  • Regel 3 laat zien hoe u de Wink-stijlen in uw site kunt insluiten.
  • Regels 6 tot en met 9 laten zien hoe u deknipoog-inhoud-laderWebcomponent en vertel het dat het een gerangschikt raster voor uw code moet ophalen.
  • Regel 11 laat zien hoe u Javascript in uw site kunt integreren.
  • Regel 13 laat zien hoe je dewink-app-loaderWebcomponent en geef aan dat deze uw configuratievoorkeuren op paginaniveau moet ophalen.

Ontwikkelaars die grids willen beheren, kunnen terecht bijOntwikkelaars > API > Inventaris.