Skip to content
Academy

Grids

Ruudukko edustaa luetteloa toimittajista ja varastosta ja näyttää tiedot interaktiivisen, varattavissa olevan ruudukkokäyttöliittymän kautta. Ruudukko tukee minkä tahansa varaston näyttämistä kuratoidusta listastasi tai tallennetusta hausta. Käyttäjä on vuorovaikutuksessa ruudukon kanssa samalla tavalla kuin hän on vuorovaikutuksessa yksittäisen henkilön kanssa.korttiyhdellä lisäominaisuudella:

  1. Sivuta ruudukko napsauttamallaShow morepainike (kun lisää tuotteita on saatavilla).
Ruudukon esikatselu
Ruudukko, joka näyttää useita huonetyyppejä

Yllä on esimerkki ruudukosta, joka näyttää huonetyyppikorttien luettelon.

Tämän artikkelin loppuosa opastaa sinua ruudukon luomisessa, mukauttamisessa ja käyttäjille näyttämisessä.

Ruudukkotyypit

Section titled “Ruudukkotyypit”

Ruudukoita on kolmea tyyppiä:

  1. Ruudukko perustuu a:han[kuratoitu lista](/studio/curated-lists#list-actions).
  2. Ruudukko perustuu a:han[tallennettu haku](/studio/saved-searches#list-actions).
  3. Ruudukko sijainnin ja lajittelukriteerien perusteella (ts. rankattu ruudukko).

Kuratoitu listaruudukko

Section titled “Kuratoitu listaruudukko”

Tämä on ruudukko, joka käyttää kuratoituihin listoihisi keräämääsi inventaariota ja muuntaa listan varattavaksi matkailuinventaarioksi, jota voit näyttää käyttäjillesi.

Luoda

Section titled “Luoda”

Navigoi kohteeseenInventory > Curated Listspäänavigointipalkista. Tässä esimerkissä käytämme sinunFavoriteslista. Jos et ole vielä lisännyt mitään listaasiFavorites, mene osoitteeseenHakuoppiakseen miten.

Luo kuratoitu listaruudukko
Luo kuratoitu luetteloruudukkolomake
  1. Klikkaa Actions -painiketta Favorites lista.
  2. Klikkaa Create a grid painiketta.
  3. Uusi ikkuna avautuu, jossa voit nimetä ruudukon. Katso alta.
  4. Klikkaa OK -painiketta jatkaaksesi.

Ruudukko on luotu. Siirry kohtaanTools > Gridspäänavigointipalkista ja napsautaCurated Grids-välilehti nähdäksesi uuden ruudukon.

Mukauta

Section titled “Mukauta”

Lomakkeen avulla voit mukauttaa ruudukkoa seuraavilla tavoilla:

  1. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse.
  2. Valitse Mukauttaminen haluat käyttää tähän ruudukkoon.
  3. Valitse kortin alkuperäinen kuva, jonka haluat käyttäjien näkevän ensin. Oletusarvoisesti se on kyseisen varaston alkuperäinen kuva.
  4. Valitse kortissa käytettävä merkki. Merkin avulla käyttäjät voivat vertailla varastoa koostemittarin, kuten eco-friendly.
  5. Lisää pilkulla erotettuina avainsanat, joita käytetään Verkkoindeksoijat.
  6. Lisää otsikot ja kuvaukset kielillä, jotka haluat käyttäjän näkevän.
  7. Klikkaa Save -painiketta jatkaaksesi.

Jakaa

Section titled “Jakaa”
Kuratoitu listaruudukko
Kuratoitu listaruudukkomerkintä ja kutistettu toimintovalikko

Yllä olevassa kuvassa näkyvät kaikki ruudukossa käytettävissä olevat toiminnot:

  • PäivittääPäivittää ruudukkosi kokoonpanon.
  • Lisää WinkLinksiinLisää ruudukon WinkLinks-tilillesi.
  • UpottaaNäyttää, miten tämä ruudukko upotetaanRuudukkoverkkosivustollesi.
  • Käytä WordPressin kanssaNäyttää, miten käytät meidänWordPress-laajennusupottaaksesi tämän ruudukon verkkosivustollesi.

Käsittelemme joitakin näistä vaihtoehdoista tarkemmin alla.

Upottaa

Section titled “Upottaa”
<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>

Näin upotat ruudukon sivustoosi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustoosi.
  • Rivit 6–9 näyttävät, miten käytätwink-content-loaderVerkkokomponentti ja käske sitä hakemaan ruudukko koodillesi.
  • Rivi 11 näyttää, miten voit upottaa Javascriptimme sivustoosi.
  • Rivi 13 näyttää, miten upotetaanwink-sovelluksen latausohjelmaVerkkokomponentti ja käske sitä hakemaan sivutason määritysasetuksesi.

Tallennettu hakuruudukko

Section titled “Tallennettu hakuruudukko”

Tämä on ruudukko, joka käyttää tallennetun hakukyselysi varastoa ja muuntaa hakutulokset varattavissa olevaksi matkailuvarastoksi, jota voit näyttää käyttäjillesi.

Luoda

Section titled “Luoda”

Navigoi kohteeseenInventory > Saved searchespäänavigointipalkista. Jos et ole vielä luonut tallennettua hakua, siirry osoitteeseenHakuoppiakseen miten.

Luo tallennettu hakuruudukko
Luo tallennettu hakuruudukkolomake
  1. Klikkaa Actions -painiketta tallennetussa haussasi.
  2. Klikkaa Create a grid painiketta.
  3. Uusi ikkuna avautuu, jossa voit nimetä ruudukon. Katso alta.
  1. KlikkaaOK-painiketta jatkaaksesi.

Ruudukko on luotu. Siirry kohtaanTools > Gridspäänavigointipalkista ja napsautaSaved Search Grids-välilehti nähdäksesi uuden ruudukon.

Mukauta

Section titled “Mukauta”

Lomakkeen avulla voit mukauttaa ruudukkoa seuraavilla tavoilla:

  1. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse.
  2. Valitse Mukauttaminen haluat käyttää tähän ruudukkoon.
  3. Valitse kortin alkuperäinen kuva, jonka haluat käyttäjien näkevän ensin. Oletusarvoisesti se on kyseisen varaston alkuperäinen kuva.
  4. Valitse kortissa käytettävä merkki. Merkin avulla käyttäjät voivat vertailla varastoa koostemittarin, kuten eco-friendly.
  5. Lisää pilkulla erotettuina avainsanat, joita käytetään Verkkoindeksoijat.
  6. Lisää otsikot ja kuvaukset kielillä, jotka haluat käyttäjän näkevän.
  7. Klikkaa Save -painiketta jatkaaksesi.

Jakaa

Section titled “Jakaa”
Tallennettu hakuruudukko
Tallennettu hakuruudukon merkintä ja kutistettu toimintovalikko

Upottaa

Section titled “Upottaa”
<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>

Näin upotat ruudukon sivustoosi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustoosi.
  • Rivit 6–9 näyttävät, miten käytätwink-content-loaderVerkkokomponentti ja käske sitä hakemaan ruudukko koodillesi.
  • Rivi 11 näyttää, miten voit upottaa Javascriptimme sivustoosi.
  • Rivi 13 näyttää, miten upotetaanwink-sovelluksen latausohjelmaVerkkokomponentti ja käske sitä hakemaan sivutason määritysasetuksesi.

Sijoitettu ruudukko

Section titled “Sijoitettu ruudukko”

Luoda

Section titled “Luoda”

Luo sijoitettu ruudukko siirtymällä kohtaanTools > Gridsja napsautaRanked Gridvälilehti. NapsautaCreate ranked gridpainiketta.

Mukauta

Section titled “Mukauta”

Lomakkeen avulla voit mukauttaa sijoitettua ruudukkoa seuraavilla tavoilla:

  1. Valitse määränpää. Esim. Tokio.
  2. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse. Esim. ympäristöystävälliset hotellit Tokiossa
  3. Valitse Mukauttaminen haluat käyttää tähän ruudukkoon.
  4. Valitse kortin alkuperäinen kuva, jonka haluat käyttäjien näkevän ensin. Oletusarvoisesti se on kyseisen varaston alkuperäinen kuva.
  5. Valitse, minkä ominaisuuden mukaan ominaisuudet lajitellaan. Esim. ympäristöystävällisyys.
  6. Lisää pilkulla erotettuina avainsanat, joita käytetään Verkkoindeksoijat.
  7. Lisää otsikot ja kuvaukset kielillä, jotka haluat käyttäjän näkevän.
  8. Klikkaa Save -painiketta jatkaaksesi.

Kun olet tallentanut rankatun ruudukon, sinut ohjataan rankattujen ruudukoiden sivulle ja ruudukkosi on nyt valmis jaettavaksi maailman kanssa.

Jakaa

Section titled “Jakaa”
Sijoitettu ruudukko
Sijoitettu ruudukko, jossa on tiivistetty toimintovalikko

Yllä olevassa kuvassa näkyvät kaikki käytettävissä olevat toiminnot rankk-ruudukossasi:

  • PäivittääPäivittää ruudukkosi kokoonpanon.
  • Lisää WinkLinksiinLisää sijoitetun ruudukon WinkLinks-tilillesi.
  • UpottaaNäyttää, miten tämä ruudukko upotetaanRuudukkoverkkosivustollesi.
  • Käytä WordPressin kanssaNäyttää, miten käytät meidänWordPress-laajennusupottaaksesi tämän kortin verkkosivustollesi.

Käsittelemme joitakin näistä vaihtoehdoista tarkemmin alla.

Upottaa

Section titled “Upottaa”
<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>

Näin upotat ruudukon sivustoosi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustoosi.
  • Rivit 6–9 näyttävät, miten käytätwink-content-loaderVerkkokomponentti ja käske sitä hakemaan koodillesi rankattu ruudukko.
  • Rivi 11 näyttää, miten voit upottaa Javascriptimme sivustoosi.
  • Rivi 13 näyttää, miten upotetaanwink-sovelluksen latausohjelmaVerkkokomponentti ja käske sitä hakemaan sivutason määritysasetuksesi.

API

Section titled “API”

Kehittäjät, jotka haluavat hallita ruudukoita, voivat siirtyä osoitteeseenKehittäjät > API > Mainosalue.

Lisälukemista

Section titled “Lisälukemista”