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 moreknapp (när fler varor 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 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

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

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.

Skapa

Navigera tillInventory > Curated Listsfrån huvudnavigeringsfältet. I det här exemplet använder vi dinFavoriteslista. 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 > Gridsfrån huvudnavigeringsfältet och klicka påCurated Gridsfliken för att se ditt nya rutnät.

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.

Dela

Kuraterad listruta — *Rutnätspost i kuraterad lista med hopfälld åtgärdsmeny*

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

<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

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.

Skapa

Navigera tillInventory > Saved searchesfrå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.

KlickaOKknappen för att fortsätta.

Ditt rutnät har skapats. Navigera tillTools > Gridsfrån huvudnavigeringsfältet och klicka påSaved Search Gridsfliken för att se ditt nya rutnät.

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.

Dela

Sparat sökrutnät — *Sparad sökrutnätspost med hopfälld å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ä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

Skapa

Skapa ett rangordnat rutnät genom att navigera tillTools > Gridsoch klicka påRanked Gridfliken. Klicka påCreate ranked gridknappen.

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.

Dela

Rankat rutnät — *Ett rangordnat rutnät med hopfälld åtgärdsmeny*

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

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

API

Utvecklare som vill hantera nät kan gå vidare tillUtvecklare > API > Inventering.

Vidare läsning

Läs mer om vår samling avWebbkomponenter.
Läs mer omWink WordPress-plugin.