Gå til indhold

Grids

Et gitter repræsenterer en liste over leverandører og lagerbeholdning og viser detaljerne via en interaktiv, bookbar gitterbrugergrænseflade. Gitteret understøtter visning af ethvert lagerbeholdning fra din kuraterede liste eller gemte søgning. En bruger interagerer med et gitter på samme måde, som hun interagerer med en person.kortmed én ekstra funktion:

  1. Bladr gennem gitteret ved at klikke påShow moreknap (når flere varer er tilgængelige).
Gitterforhåndsvisning
Gitter der viser flere rumtyper

Ovenfor er et eksempel på vores gitter, der viser en liste over værelsestypekort.

Resten af ​​denne artikel gennemgår, hvordan du opretter, tilpasser og viser gitteret til dine brugere.

Der er tre typer gitre:

  1. Gitter baseret på etkurateret liste.
  2. Gitter baseret på etgemt søgning.
  3. Gittergitter baseret på en placering og sorteringskriterier (dvs. rangeret gitter).

Dette er et gitter, der bruger den beholdning, du har samlet i en af ​​dine kuraterede lister, og konverterer listen til en reserverbar rejsebeholdning, som du kan vise til dine brugere.

Naviger tilInventory > Curated Listsfra den primære navigationslinje. I dette eksempel bruger vi dinFavoritesliste. Hvis du endnu ikke har tilføjet noget til dinFavorites, gå tilSøgeat lære hvordan.

Opret et gitter til kurateringslister
Opret en formular til kurateret listegitter
  1. Klik på Actions knappen på Favorites liste.
  2. Klik på Create a grid knap.
  3. Et nyt vindue vises, hvor du kan navngive dit gitter. Se nedenfor.
  4. Klik OK knappen for at fortsætte.

Dit gitter er oprettet. Naviger tilTools > Gridsfra hovednavigationslinjen og klik påCurated GridsTryk på fanen for at se dit nye gitter.

Formularen giver dig mulighed for at tilpasse dit gitter på følgende måder:

  1. Giv det et navn, så du kan huske, hvad gitteret handler om.
  2. Vælg Tilpasning du vil anvende på dette gitter.
  3. Vælg den første kortside, du vil have brugerne til at se først. Som standard er det den oprindelige side af den pågældende inventar.
  4. Vælg det badge, du vil bruge på kortet. Et badge giver brugerne mulighed for at sammenligne lagerbeholdning på en samlet metrik, f.eks. eco-friendly.
  5. Tilføj nøgleord, adskilt af et komma, som skal bruges af Webcrawlere.
  6. Tilføj titler og beskrivelser på de sprog, du ønsker, at brugeren skal se.
  7. Klik på Save knappen for at fortsætte.
Kurateret listegitter
Kurateret listegitterpost med skjult handlingsmenu

Ovenfor vises et billede med alle de tilgængelige handlinger for dit gitter:

  • OpdateringOpdaterer din gitterkonfiguration.
  • Tilføj til WinkLinksTilføjer gitteret til din WinkLinks-konto.
  • IntegrerViser dig, hvordan du integrerer dette gitter som enGitterind på din hjemmeside.
  • Brug med WordPressViser dig, hvordan du bruger voresWordPress-pluginat integrere dette gitter på din hjemmeside.

Vi gennemgår nogle af disse muligheder mere detaljeret nedenfor.

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

Sådan integrerer du dit gitter på dit websted:

  • Linje 3 viser dig, hvordan du integrerer Wink-stilene på dit websted.
  • Linje 6 til 9 viser dig, hvordan du brugerwink-indholdslæsserWebkomponenten og bed den om at hente et gitter til din kode.
  • Linje 11 viser dig, hvordan du integrerer vores Javascript på dit websted.
  • Linje 13 viser dig, hvordan du integrererwink-app-loaderWebkomponenten og bed den om at hente dine konfigurationspræferencer på sideniveau.

Dette er et gitter, der bruger beholdningen i din gemte søgeforespørgsel og konverterer søgeresultaterne til rejsebeholdning, der kan bookes, og som du kan vise til dine brugere.

Naviger tilInventory > Saved searchesfra hovednavigationslinjen. Hvis du endnu ikke har oprettet en gemt søgning, skal du gå tilSøgeat lære hvordan.

Opret gemt søgefelt
Opret gemt søgefeltformular
  1. Klik på Actions knappen på din gemte søgning.
  2. Klik på Create a grid knap.
  3. Et nyt vindue vises, hvor du kan navngive dit gitter. Se nedenfor.
  1. KlikOKknappen for at fortsætte.

Dit gitter er oprettet. Naviger tilTools > Gridsfra hovednavigationslinjen og klik påSaved Search GridsTryk på fanen for at se dit nye gitter.

Formularen giver dig mulighed for at tilpasse dit gitter på følgende måder:

  1. Giv det et navn, så du kan huske, hvad gitteret handler om.
  2. Vælg Tilpasning du vil anvende på dette gitter.
  3. Vælg den første kortside, du vil have brugerne til at se først. Som standard er det den oprindelige side af den pågældende inventar.
  4. Vælg det badge, du vil bruge på kortet. Et badge giver brugerne mulighed for at sammenligne lagerbeholdning på en samlet metrik, f.eks. eco-friendly.
  5. Tilføj nøgleord, adskilt af et komma, som skal bruges af Webcrawlere.
  6. Tilføj titler og beskrivelser på de sprog, du ønsker, at brugeren skal se.
  7. Klik på Save knappen for at fortsætte.
Gemt søgefelt
Gemt søgefeltpost med skjult handlingsmenu
<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>

Sådan integrerer du dit gitter på dit websted:

  • Linje 3 viser dig, hvordan du integrerer Wink-stilene på dit websted.
  • Linje 6 til 9 viser dig, hvordan du brugerwink-indholdslæsserWebkomponenten og bed den om at hente et gitter til din kode.
  • Linje 11 viser dig, hvordan du integrerer vores Javascript på dit websted.
  • Linje 13 viser dig, hvordan du integrererwink-app-loaderWebkomponenten og bed den om at hente dine konfigurationspræferencer på sideniveau.

Opret et rangeret gitter ved at navigere tilTools > Gridsog klik påRanked Gridfanen. Klik påCreate ranked gridknap.

Med formularen kan du tilpasse dit rangerede gitter på følgende måder:

  1. Vælg en destination. F.eks. Tokyo.
  2. Giv det et navn, så du kan huske, hvad gitteret handler om. F.eks. miljøvenlige hoteller i Tokyo
  3. Vælg Tilpasning du vil anvende på dette gitter.
  4. Vælg den første kortside, du vil have brugerne til at se først. Som standard er det den oprindelige side af den pågældende inventar.
  5. Vælg hvilken egenskab egenskaberne skal sorteres efter. F.eks. miljøvenlighed.
  6. Tilføj nøgleord, adskilt af et komma, som skal bruges af Webcrawlere.
  7. Tilføj titler og beskrivelser på de sprog, du ønsker, at brugeren skal se.
  8. Klik på Save knappen for at fortsætte.

Når du har gemt dit rangerede gitter, bliver du omdirigeret til siden med rangerede gitter, og dit gitter er nu klar til at blive delt med verden.

Rangliste
Et rangeret gitter med en skjult handlingsmenu

Ovenfor vises et billede med alle de tilgængelige handlinger for dit rangerede gitter:

  • OpdateringOpdaterer din gitterkonfiguration.
  • Tilføj til WinkLinksTilføjer det rangerede gitter til din WinkLinks-konto.
  • IntegrerViser dig, hvordan du integrerer dette gitter som enGitterind på din hjemmeside.
  • Brug med WordPressViser dig, hvordan du bruger voresWordPress-pluginat integrere dette kort på din hjemmeside.

Vi gennemgår nogle af disse muligheder mere detaljeret nedenfor.

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

Sådan integrerer du dit gitter på dit websted:

  • Linje 3 viser dig, hvordan du integrerer Wink-stilene på dit websted.
  • Linje 6 til 9 viser dig, hvordan du brugerwink-indholdslæsserWebkomponenten og bed den om at hente et rangeret gitter til din kode.
  • Linje 11 viser dig, hvordan du integrerer vores Javascript på dit websted.
  • Linje 13 viser dig, hvordan du integrererwink-app-loaderWebkomponenten og bed den om at hente dine konfigurationspræferencer på sideniveau.

Udviklere, der ønsker at administrere gitre, kan gå tilUdviklere > API > Inventar.