Grids
Ett rutnät representerar en lista över leverantörer och lager och visar detaljerna via ett interaktivt, bokningsbart rutnätsgränssnitt. Rutnätet stöder visning av lager från din kurerade lista eller sparade sökning. En användare interagerar med ett rutnät på samma sätt som hon interagerar med en individ.kortmed en ytterligare funktion:
- Sidna igenom rutnätet genom att klicka på
Show more
knapp (när fler varor finns tillgängliga).
Ovan är ett exempel på vårt rutnät som visar en lista med rumstypskort.
Resten av den här artikeln guidar dig genom hur du skapar, anpassar och exponerar rutnätet för dina användare.
Rutnätstyper
Section titled “Rutnätstyper”Det finns tre typer av rutnät:
- Rutnät baserat på ettutvald lista.
- Rutnät baserat på ettsparad sökning.
- Rutnät baserat på plats och sorteringskriterier (d.v.s. rankad rutnät).
Kuraterad listruta
Section titled “Kuraterad listruta”Detta är ett rutnät som använder det inventarium du har samlat i en av dina utvalda listor och konverterar listan till bokningsbart reseinventarium som du kan visa för dina användare.
Navigera tillInventory > Curated Lists
från huvudnavigeringsfältet. I det här exemplet använder vi dinFavorites
lista. Om du inte har lagt till något i dinFavorites
, gå tillSökaatt lära sig hur.
- Klicka på
Actions
knappen påFavorites
lista. - Klicka på
Create a grid
knapp. - Ett nytt fönster visas där du kan namnge ditt rutnät. Se nedan.
- Klick
OK
knappen för att fortsätta.
Ditt rutnät har skapats. Navigera tillTools > Grids
från huvudnavigeringsfältet och klicka påCurated Grids
fliken för att se ditt nya rutnät.
Anpassa
Section titled “Anpassa”I formuläret kan du anpassa ditt rutnät på följande sätt:
- Ge det ett namn så att du kommer ihåg vad rutnätet handlar om.
- Välj Anpassning du vill tillämpa på det här rutnätet.
- Välj den kortvy som du vill att användarna ska se först. Som standard är det den ursprungliga vyn för det lagret.
- Välj det märke du vill använda på kortet. Ett märke låter användare jämföra annonsutrymme på ett aggregerat mätvärde, till exempel
eco-friendly
. - Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Webbcrawlers.
- Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
- Klicka på
Save
knappen för att fortsätta.
Ovanstående visar en bild med alla tillgängliga åtgärder för ditt rutnät:
- UppdateraUppdaterar din rutnätskonfiguration.
- Lägg till i WinkLinksLägger till rutnätet i ditt WinkLinks-konto.
- Bädda inVisar hur du bäddar in det här rutnätet som enRutnätin på din webbplats.
- Använd med WordPressVisar dig hur du använder vårWordPress-pluginför att bädda in det här rutnätet på din webbplats.
Vi går igenom några av dessa alternativ mer i detalj nedan.
Bädda in
Section titled “Bädda in”<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å här bäddar du in ditt rutnät på din webbplats:
- Rad 3 visar hur du bäddar in Wink-stilarna på din webbplats.
- Raderna 6 till 9 visar hur du använderwink-innehållsladdareWeb Component och be den hämta ett rutnät för din kod.
- Rad 11 visar hur du bäddar in vårt Javascript på din webbplats.
- Rad 13 visar hur du bäddar inwink-app-loaderWebbkomponenten och be den hämta dina konfigurationsinställningar på sidnivå.
Sparat sökrutnät
Section titled “Sparat sökrutnät”Detta är ett rutnät som använder inventariet i din sparade sökfråga och konverterar sökresultaten till bokningsbara reseannonser som du kan visa för dina användare.
Navigera tillInventory > Saved searches
från huvudnavigeringsfältet. Om du inte har skapat en sparad sökning ännu, gå tillSökaatt lära sig hur.
- Klicka på
Actions
knappen på din sparade sökning. - Klicka på
Create a grid
knapp. - Ett nytt fönster visas där du kan namnge ditt rutnät. Se nedan.
- Klicka
OK
knappen för att fortsätta.
Ditt rutnät har skapats. Navigera tillTools > Grids
från huvudnavigeringsfältet och klicka påSaved Search Grids
fliken för att se ditt nya rutnät.
Anpassa
Section titled “Anpassa”I formuläret kan du anpassa ditt rutnät på följande sätt:
- Ge det ett namn så att du kommer ihåg vad rutnätet handlar om.
- Välj Anpassning du vill tillämpa på det här rutnätet.
- Välj den kortvy som du vill att användarna ska se först. Som standard är det den ursprungliga vyn för det lagret.
- Välj det märke du vill använda på kortet. Ett märke låter användare jämföra annonsutrymme på ett aggregerat mätvärde, till exempel
eco-friendly
. - Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Webbcrawlers.
- Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
- Klicka på
Save
knappen för att fortsätta.
Bädda in
Section titled “Bädda in”<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å här bäddar du in ditt rutnät på din webbplats:
- Rad 3 visar hur du bäddar in Wink-stilarna på din webbplats.
- Raderna 6 till 9 visar hur du använderwink-innehållsladdareWeb Component och be den hämta ett rutnät för din kod.
- Rad 11 visar hur du bäddar in vårt Javascript på din webbplats.
- Rad 13 visar hur du bäddar inwink-app-loaderWebbkomponenten och be den hämta dina konfigurationsinställningar på sidnivå.
Rankat rutnät
Section titled “Rankat rutnät”Skapa ett rangordnat rutnät genom att navigera tillTools > Grids
och klicka påRanked Grid
fliken. Klicka påCreate ranked grid
knappen.
Anpassa
Section titled “Anpassa”I formuläret kan du anpassa ditt rankade rutnät på följande sätt:
- Välj en destination. T.ex. Tokyo.
- Ge det ett namn så att du kommer ihåg vad rutnätet handlar om. T.ex. miljövänliga hotell i Tokyo
- Välj Anpassning du vill tillämpa på det här rutnätet.
- Välj den kortvy som du vill att användarna ska se först. Som standard är det den ursprungliga vyn för det lagret.
- Välj vilken egenskap egenskaperna ska sorteras efter. T.ex. miljövänlighet.
- Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Webbcrawlers.
- Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
- Klicka på
Save
knappen för att fortsätta.
När du har sparat ditt rankade rutnät omdirigeras du till sidan med rankade rutnät och ditt rutnät är nu klart att delas med världen.
Ovanstående visar en bild med alla tillgängliga åtgärder för ditt rankningsnät:
- UppdateraUppdaterar din rutnätskonfiguration.
- Lägg till i WinkLinksLägger till det rankade rutnätet i ditt WinkLinks-konto.
- Bädda inVisar hur du bäddar in det här rutnätet som enRutnätin på din webbplats.
- Använd med WordPressVisar dig hur du använder vårWordPress-pluginatt bädda in det här kortet på din webbplats.
Vi går igenom några av dessa alternativ mer i detalj nedan.
Bädda in
Section titled “Bädda in”<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å här bäddar du in ditt rutnät på din webbplats:
- Rad 3 visar hur du bäddar in Wink-stilarna på din webbplats.
- Raderna 6 till 9 visar hur du använderwink-innehållsladdareWeb Component och be den att hämta ett rangordnat rutnät för din kod.
- Rad 11 visar hur du bäddar in vårt Javascript på din webbplats.
- Rad 13 visar hur du bäddar inwink-app-loaderWebbkomponenten och be den hämta dina konfigurationsinställningar på sidnivå.
Utvecklare som vill hantera nät kan gå vidare tillUtvecklare > API > Inventering.
Vidare läsning
Section titled “Vidare läsning”- Läs mer om vår samling avWebbkomponenter.
- Läs mer omWink WordPress-plugin.