Ga naar inhoud

Roosters

Een rooster vertegenwoordigt een lijst van leveranciers en inventaris en toont de details via een interactieve, boekbare rooster-UI. Het rooster ondersteunt het weergeven van elke inventaris uit je samengestelde lijst of opgeslagen zoekopdracht. Een gebruiker gaat met een rooster om op dezelfde manier als met een individuele kaart met één extra functie:

  1. Blader door het rooster door op de knop Meer tonen te klikken (wanneer er meer items beschikbaar zijn).
Voorbeeld van rooster
Rooster met meerdere kamertypen

Bovenstaand is een voorbeeld van ons rooster dat een lijst met kamertypekaarten toont.

De rest van dit artikel begeleidt je bij het maken, aanpassen en beschikbaar stellen van het rooster aan je gebruikers.

Er zijn drie soorten roosters:

  1. Rooster gebaseerd op een samengestelde lijst.
  2. Rooster gebaseerd op een opgeslagen zoekopdracht.
  3. Rooster gebaseerd op een locatie en sorteervolgorde (d.w.z. Gerangschikt rooster).

Dit is een rooster dat de inventaris gebruikt die je hebt verzameld in een van je samengestelde lijsten en zet de lijst om in boekbare reisinventaris die je aan je gebruikers kunt tonen.

Navigeer naar Lijsten > Samengesteld via de hoofdnavigatiebalk. Voor dit voorbeeld gebruiken we je Favorieten lijst. Als je nog niets aan je Favorieten hebt toegevoegd, ga dan naar Zoeken om te leren hoe.

Rooster van samengestelde lijst maken
Formulier voor het maken van een rooster van samengestelde lijst
  1. Klik op de knop Acties bij de lijst Favorieten.
  2. Klik op de knop Maak een rooster.
  3. Er verschijnt een nieuw venster waarin je je rooster een naam kunt geven. Zie hieronder.
  4. Klik op de knop OK om door te gaan.

Je rooster is gemaakt. Navigeer naar Roosters via de hoofdnavigatiebalk en klik op het tabblad Samengesteld om je nieuwe rooster te zien.

Het formulier laat je het rooster op de volgende manieren aanpassen:

  1. Geef het een naam zodat je weet waar het rooster over gaat.
  2. Selecteer de Aanpassing die je op dit rooster wilt toepassen.
  3. Selecteer het initiële kaartbeeld dat gebruikers als eerste te zien krijgen. Standaard is dit het native beeld van die inventaris.
  4. Selecteer het badge dat je op de kaart wilt gebruiken. Een badge laat gebruikers inventaris vergelijken op een samengestelde maatstaf zoals milieuvriendelijk.
  5. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt worden door Web Crawlers.
  6. Voeg titels en beschrijvingen toe in de talen die je wilt dat de gebruiker ziet.
  7. Klik op de knop Opslaan om door te gaan.
Rooster van samengestelde lijst
Rooster van samengestelde lijst met ingeklapt actiemenu

Bovenstaand zie je een afbeelding met alle beschikbare acties voor je rooster:

  • Bijwerken Werk je roosterconfiguratie bij.
  • Toevoegen aan WinkLinks Voegt het rooster toe aan je WinkLinks-account.
  • Insluiten Laat zien hoe je dit rooster als een Rooster in je website insluit.
  • Gebruik met WordPress Laat zien hoe je onze WordPress-plugin gebruikt om dit rooster in je website in te sluiten.

We behandelen enkele van deze opties hieronder uitgebreider.

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

Hier zie je hoe je je rooster in je site insluit:

  • Regel 3 laat zien hoe je de Wink-stijlen in je site insluit.
  • Regels 6 tot en met 9 laten zien hoe je de wink-content-loader Web Component gebruikt en deze vertelt een rooster voor je code op te halen.
  • Regel 11 laat zien hoe je onze Javascript in je site insluit.
  • Regel 13 laat zien hoe je de wink-app-loader Web Component insluit en deze vertelt je pagina-niveau configuratievoorkeuren op te halen.

Dit is een rooster dat de inventaris gebruikt in je opgeslagen zoekopdracht en zet de zoekresultaten om in boekbare reisinventaris die je aan je gebruikers kunt tonen.

Navigeer naar Lijsten > Dynamisch via de hoofdnavigatiebalk. Als je nog geen opgeslagen zoekopdracht hebt gemaakt, ga dan naar Zoeken om te leren hoe.

Rooster van opgeslagen zoekopdracht maken
Formulier voor het maken van een rooster van opgeslagen zoekopdracht
  1. Klik op de knop Acties bij je opgeslagen zoekopdracht.
  2. Klik op de knop Maak een rooster.
  3. Er verschijnt een nieuw venster waarin je je rooster een naam kunt geven. Zie hieronder.
  1. Klik op de knop OK om door te gaan.

Je rooster is gemaakt. Navigeer naar Roosters via de hoofdnavigatiebalk en klik op het tabblad Zoeken om je nieuwe rooster te zien.

Het formulier laat je het rooster op de volgende manieren aanpassen:

  1. Geef het een naam zodat je weet waar het rooster over gaat.
  2. Selecteer de Aanpassing die je op dit rooster wilt toepassen.
  3. Selecteer het initiële kaartbeeld dat gebruikers als eerste te zien krijgen. Standaard is dit het native beeld van die inventaris.
  4. Selecteer het badge dat je op de kaart wilt gebruiken. Een badge laat gebruikers inventaris vergelijken op een samengestelde maatstaf zoals milieuvriendelijk.
  5. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt worden door Web Crawlers.
  6. Voeg titels en beschrijvingen toe in de talen die je wilt dat de gebruiker ziet.
  7. Klik op de knop Opslaan om door te gaan.
Rooster van opgeslagen zoekopdracht
Rooster van opgeslagen zoekopdracht 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>

Hier zie je hoe je je rooster in je site insluit:

  • Regel 3 laat zien hoe je de Wink-stijlen in je site insluit.
  • Regels 6 tot en met 9 laten zien hoe je de wink-content-loader Web Component gebruikt en deze vertelt een rooster voor je code op te halen.
  • Regel 11 laat zien hoe je onze Javascript in je site insluit.
  • Regel 13 laat zien hoe je de wink-app-loader Web Component insluit en deze vertelt je pagina-niveau configuratievoorkeuren op te halen.

Maak een gerangschikt rooster door naar Roosters te navigeren en klik op het tabblad Gerangschikt. Klik op de knop Maak gerangschikt rooster.

Het formulier laat je het gerangschikte rooster op de volgende manieren aanpassen:

  1. Kies een bestemming. Bijv. Tokio.
  2. Geef het een naam zodat je weet waar het rooster over gaat. Bijv. Milieuvriendelijke hotels in Tokio
  3. Selecteer de Aanpassing die je op dit rooster wilt toepassen.
  4. Selecteer het initiële kaartbeeld dat gebruikers als eerste te zien krijgen. Standaard is dit het native beeld van die inventaris.
  5. Kies op welke eigenschap je accommodaties wilt sorteren. Bijv. Milieuvriendelijkheid.
  6. Voeg trefwoorden toe, gescheiden door een komma, die gebruikt worden door Web Crawlers.
  7. Voeg titels en beschrijvingen toe in de talen die je wilt dat de gebruiker ziet.
  8. Klik op de knop Opslaan om door te gaan.

Na het opslaan van je gerangschikte rooster word je doorgestuurd naar je pagina met gerangschikte roosters en is je rooster klaar om met de wereld te delen.

Gerangschikt rooster
Een gerangschikt rooster met ingeklapt actiemenu

Bovenstaand zie je een afbeelding met alle beschikbare acties voor je gerangschikte rooster:

  • Bijwerken Werk je roosterconfiguratie bij.
  • Toevoegen aan WinkLinks Voegt het gerangschikte rooster toe aan je WinkLinks-account.
  • Insluiten Laat zien hoe je dit rooster als een Rooster in je website insluit.
  • Gebruik met WordPress Laat zien hoe je onze WordPress-plugin gebruikt om deze kaart in je website in te sluiten.

We behandelen enkele van deze opties hieronder uitgebreider.

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

Hier zie je hoe je je rooster in je site insluit:

  • Regel 3 laat zien hoe je de Wink-stijlen in je site insluit.
  • Regels 6 tot en met 9 laten zien hoe je de wink-content-loader Web Component gebruikt en deze vertelt een gerangschikt rooster voor je code op te halen.
  • Regel 11 laat zien hoe je onze Javascript in je site insluit.
  • Regel 13 laat zien hoe je de wink-app-loader Web Component insluit en deze vertelt je pagina-niveau configuratievoorkeuren op te halen.

Ontwikkelaars die roosters willen beheren kunnen terecht bij Ontwikkelaars > API > Inventaris.