Rutnät

Ett rutnät representerar en lista över leverantörer och inventarier och visar detaljerna via ett interaktivt, bokningsbart rutnätsgränssnitt. Rutnätet stödjer visning av vilken inventarie som helst från din kuraterade lista eller sparade sökning. En användare interagerar med ett rutnät på samma sätt som med ett enskilt kort med en extra funktion:

Bläddra genom rutnätet genom att klicka på knappen Visa mer (när fler objekt finns tillgängliga).

Förhandsvisning av rutnät — *Rutnät som visar flera rumstyper*

Ovan är ett exempel på vårt rutnät som visar en lista med rumstypkort.

Resten av denna artikel guidar dig genom hur du skapar, anpassar och exponerar rutnätet för dina användare.

Rutnäts typer

Det finns tre typer av rutnät:

Rutnät baserat på en kuraterad lista.
Rutnät baserat på en sparad sökning.
Rankat rutnät baserat på en plats och sorteringskriterier (dvs. Rankat rutnät).

Kuraterat list-rutnät

Detta är ett rutnät som använder inventariet du samlat i en av dina kuraterade listor och omvandlar listan till bokningsbar reseinventarie som du kan visa för dina användare.

Skapa

Navigera till Inventory > Curated Lists från huvudnavigeringsfältet. För detta exempel använder vi din lista Favorites. Om du ännu inte har lagt till något i din Favorites, gå till Sök för att lära dig hur.

Klicka på knappen Actions på listan Favorites.
Klicka på knappen Create a grid.
Ett nytt fönster visas där du kan namnge ditt rutnät. Se nedan.
Klicka på knappen OK för att fortsätta.

Ditt rutnät har skapats. Navigera till Tools > Grids från huvudnavigeringsfältet och klicka på fliken Curated Grids för att se ditt nya rutnät.

Anpassa

Formuläret låter dig 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 den anpassning du vill tillämpa på detta rutnät.
Välj den initiala kortsidan du vill att användarna ska se först. Som standard är det den ursprungliga sidan för den inventarien.
Välj den badge du vill använda på kortet. En badge låter användare jämföra inventarier på en aggregerad metrisk som miljövänlig.
Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Web Crawlers.
Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
Klicka på knappen Save för att fortsätta.

Dela

*Kuraterat list-rutnätsinmatning med kollapsad åtgärdsmeny*

Ovan visas en bild med alla tillgängliga åtgärder för ditt rutnät:

Update Uppdaterar din rutnätskonfiguration.
Add to WinkLinks Lägger till rutnätet i ditt WinkLinks-konto.
Embed Visar hur du bäddar in detta rutnät som ett Grid på din webbplats.
Use with WordPress Visar hur du använder vårt WordPress-plugin för att bädda in detta rutnät på din webbplats.

Vi går igenom några av dessa alternativ mer i detalj nedan.

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änder wink-content-loader Web Component och ber den hämta ett rutnät för din kod.
Rad 11 visar hur du bäddar in vår Javascript på din webbplats.
Rad 13 visar hur du bäddar in wink-app-loader Web Component och ber den hämta dina konfigurationsinställningar på sidnivå.

Sparat söknings-rutnät

Detta är ett rutnät som använder inventariet i din sparade sökfråga och omvandlar sökresultaten till bokningsbar reseinventarie som du kan visa för dina användare.

Skapa

Navigera till Inventory > Saved searches från huvudnavigeringsfältet. Om du ännu inte har skapat en sparad sökning, gå till Sök för att lära dig hur.

Klicka på knappen Actions på din sparade sökning.
Klicka på knappen Create a grid.
Ett nytt fönster visas där du kan namnge ditt rutnät. Se nedan.

Klicka på knappen OK för att fortsätta.

Ditt rutnät har skapats. Navigera till Tools > Grids från huvudnavigeringsfältet och klicka på fliken Saved Search Grids för att se ditt nya rutnät.

Anpassa

Formuläret låter dig 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 den anpassning du vill tillämpa på detta rutnät.
Välj den initiala kortsidan du vill att användarna ska se först. Som standard är det den ursprungliga sidan för den inventarien.
Välj den badge du vill använda på kortet. En badge låter användare jämföra inventarier på en aggregerad metrisk som miljövänlig.
Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Web Crawlers.
Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
Klicka på knappen Save för att fortsätta.

Dela

*Sparat söknings-rutnätsinmatning med kollapsad åtgärdsmeny*

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änder wink-content-loader Web Component och ber den hämta ett rutnät för din kod.
Rad 11 visar hur du bäddar in vår Javascript på din webbplats.
Rad 13 visar hur du bäddar in wink-app-loader Web Component och ber den hämta dina konfigurationsinställningar på sidnivå.

Rankat rutnät

Skapa

Skapa ett rankat rutnät genom att navigera till Tools > Grids och klicka på fliken Ranked Grid. Klicka på knappen Create ranked grid.

Anpassa

Formuläret låter dig 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 den anpassning du vill tillämpa på detta rutnät.
Välj den initiala kortsidan du vill att användarna ska se först. Som standard är det den ursprungliga sidan för den inventarien.
Välj vilken egenskap du vill sortera fastigheterna efter. T.ex. Miljövänlighet.
Lägg till nyckelord, separerade med kommatecken, som kommer att användas av Web Crawlers.
Lägg till titlar och beskrivningar på de språk du vill att användaren ska se.
Klicka på knappen Save för att fortsätta.

Efter att du sparat ditt rankade rutnät omdirigeras du till sidan för dina rankade rutnät och ditt rutnät är nu redo att delas med världen.

Dela

Rankat rutnät — *Ett rankat rutnät med kollapsad åtgärdsmeny*

Ovan visas en bild med alla tillgängliga åtgärder för ditt rankade rutnät:

Update Uppdaterar din rutnätskonfiguration.
Add to WinkLinks Lägger till det rankade rutnätet i ditt WinkLinks-konto.
Embed Visar hur du bäddar in detta rutnät som ett Grid på din webbplats.
Use with WordPress Visar hur du använder vårt WordPress-plugin för att bädda in detta kort på din webbplats.

Vi går igenom några av dessa alternativ mer i detalj nedan.

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änder wink-content-loader Web Component och ber den hämta ett rankat rutnät för din kod.
Rad 11 visar hur du bäddar in vår Javascript på din webbplats.
Rad 13 visar hur du bäddar in wink-app-loader Web Component och ber den hämta dina konfigurationsinställningar på sidnivå.

API

Utvecklare som vill hantera rutnät kan gå till Developers > API > Inventory.

Vidare läsning

Läs mer om vår samling av Web Components.
Läs mer om Wink WordPress-plugin.