Siirry sisältöön
Academy

Ruudukot

Ruudukko edustaa toimittajien ja varaston listaa ja näyttää tiedot interaktiivisessa, varattavassa ruudukon käyttöliittymässä. Ruudukko tukee minkä tahansa varaston näyttämistä kuratoidulta listaltasi tai tallennetusta hausta. Käyttäjä vuorovaikuttaa ruudukon kanssa samalla tavalla kuin yksittäisen kortin kanssa, mutta yhdellä lisäominaisuudella:

  1. Selaa ruudukkoa eteenpäin napsauttamalla Näytä lisää -painiketta (kun lisää kohteita on saatavilla).
Ruudukon esikatselu
Ruudukko, jossa näkyy useita huonetyyppejä

Yllä on esimerkki ruudukosta, joka näyttää listan huonetyyppikorteista.

Tämän artikkelin loput osat opastavat sinua ruudukon luomisessa, muokkaamisessa ja esittelemisessä käyttäjillesi.

Ruudukon tyypit

Osio nimeltä “Ruudukon tyypit”

Ruudukkoja on kolmenlaisia:

  1. Ruudukko, joka perustuu kuratoituun listaan.
  2. Ruudukko, joka perustuu tallennettuun hakuun.
  3. Ruudukko, joka perustuu sijaintiin ja lajittelukriteereihin (eli sijoiteltu ruudukko).

Kuratoitu listaruudukko

Osio nimeltä “Kuratoitu listaruudukko”

Tämä on ruudukko, joka käyttää varastoa, jonka olet kerännyt yhteen kuratoiduista listoistasi, ja muuntaa listan varattavaksi matkavarastoksi, jonka voit näyttää käyttäjillesi.

Luo

Osio nimeltä “Luo”

Siirry päävalikosta kohtaan Varasto > Kuratoidut listat. Tässä esimerkissä käytämme Suosikit-listaasi. Jos et ole vielä lisännyt mitään Suosikit-listallesi, mene Hakuun oppiaksesi miten.

Luo kuratoidun listan ruudukko
Luo kuratoidun listan ruudukon lomake
  1. Napsauta Toiminnot-painiketta Suosikit-listalla.
  2. Napsauta Luo ruudukko -painiketta.
  3. Uusi ikkuna avautuu, jossa voit nimetä ruudukon. Katso alla.
  4. Jatka napsauttamalla OK.

Ruudukko on luotu. Siirry päävalikosta kohtaan Työkalut > Ruudukot ja napsauta Kuratoidut ruudukot -välilehteä nähdäksesi uuden ruudukon.

Muokkaa

Osio nimeltä “Muokkaa”

Lomake antaa sinun muokata ruudukkoa seuraavilla tavoilla:

  1. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse.
  2. Valitse Mukautus, jonka haluat soveltaa tähän ruudukkoon.
  3. Valitse kortin alkuperäinen puoli, jonka haluat käyttäjien näkevän ensin. Oletuksena se on kyseisen varaston alkuperäinen puoli.
  4. Valitse merkki, jota haluat käyttää kortissa. Merkki antaa käyttäjille mahdollisuuden vertailla varastoa kokonaismittarin, kuten ympäristöystävällisyys, perusteella.
  5. Lisää avainsanoja pilkuilla erotettuna, joita Web Crawlers käyttävät.
  6. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän.
  7. Jatka napsauttamalla Tallenna.

Jaa

Osio nimeltä “Jaa”
Kuratoitu listaruudukko
Kuratoidun listan ruudukon merkintä, jossa toiminnot-valikko on supistettu

Yllä on kuva, jossa näkyvät kaikki ruudukon käytettävissä olevat toiminnot:

  • Päivitä Päivittää ruudukon asetukset.
  • Lisää WinkLinkseihin Lisää ruudukon WinkLinks-tilillesi.
  • Upota Näyttää, miten tämä ruudukko upotetaan Ruudukoksi verkkosivustollesi.
  • Käytä WordPressin kanssa Näyttää, miten käytät WordPress-laajennustamme tämän ruudukon upottamiseen sivustollesi.

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

Upota

Osio nimeltä “Upota”
<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 sivustollesi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustollesi.
  • Rivillä 6–9 näytetään, miten käytetään wink-content-loader Web-komponenttia ja kerrotaan sille, että se hakee ruudukon koodillesi.
  • Rivi 11 näyttää, miten upotetaan JavaScript-skripti sivustollesi.
  • Rivi 13 näyttää, miten upotetaan wink-app-loader Web-komponentti ja kerrotaan sille, että se hakee sivutason asetuksesi.

Tallennetun haun ruudukko

Osio nimeltä “Tallennetun haun ruudukko”

Tämä on ruudukko, joka käyttää varastoa tallennetussa hakukyselyssäsi ja muuntaa hakutulokset varattavaksi matkavarastoksi, jonka voit näyttää käyttäjillesi.

Luo

Osio nimeltä “Luo”

Siirry päävalikosta kohtaan Varasto > Tallennetut haut. Jos et ole vielä luonut tallennettua hakua, mene Hakuun oppiaksesi miten.

Luo tallennetun haun ruudukko
Luo tallennetun haun ruudukon lomake
  1. Napsauta Toiminnot-painiketta tallennetussa haussasi.
  2. Napsauta Luo ruudukko -painiketta.
  3. Uusi ikkuna avautuu, jossa voit nimetä ruudukon. Katso alla.
  1. Jatka napsauttamalla OK.

Ruudukko on luotu. Siirry päävalikosta kohtaan Työkalut > Ruudukot ja napsauta Tallennetun haun ruudukot -välilehteä nähdäksesi uuden ruudukon.

Muokkaa

Osio nimeltä “Muokkaa”

Lomake antaa sinun muokata ruudukkoa seuraavilla tavoilla:

  1. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse.
  2. Valitse Mukautus, jonka haluat soveltaa tähän ruudukkoon.
  3. Valitse kortin alkuperäinen puoli, jonka haluat käyttäjien näkevän ensin. Oletuksena se on kyseisen varaston alkuperäinen puoli.
  4. Valitse merkki, jota haluat käyttää kortissa. Merkki antaa käyttäjille mahdollisuuden vertailla varastoa kokonaismittarin, kuten ympäristöystävällisyys, perusteella.
  5. Lisää avainsanoja pilkuilla erotettuna, joita Web Crawlers käyttävät.
  6. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän.
  7. Jatka napsauttamalla Tallenna.

Jaa

Osio nimeltä “Jaa”
Tallennetun haun ruudukko
Tallennetun haun ruudukon merkintä, jossa toiminnot-valikko on supistettu

Upota

Osio nimeltä “Upota”
<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 sivustollesi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustollesi.
  • Rivillä 6–9 näytetään, miten käytetään wink-content-loader Web-komponenttia ja kerrotaan sille, että se hakee ruudukon koodillesi.
  • Rivi 11 näyttää, miten upotetaan JavaScript-skripti sivustollesi.
  • Rivi 13 näyttää, miten upotetaan wink-app-loader Web-komponentti ja kerrotaan sille, että se hakee sivutason asetuksesi.

Sijoiteltu ruudukko

Osio nimeltä “Sijoiteltu ruudukko”

Luo

Osio nimeltä “Luo”

Luo sijoiteltu ruudukko siirtymällä kohtaan Työkalut > Ruudukot ja napsauta Sijoiteltu ruudukko -välilehteä. Napsauta Luo sijoiteltu ruudukko -painiketta.

Muokkaa

Osio nimeltä “Muokkaa”

Lomake antaa sinun muokata sijoitettua ruudukkoa seuraavilla tavoilla:

  1. Valitse kohde. Esim. Tokio.
  2. Anna sille nimi, jotta muistat, mistä ruudukossa on kyse. Esim. Ympäristöystävälliset hotellit Tokiossa
  3. Valitse Mukautus, jonka haluat soveltaa tähän ruudukkoon.
  4. Valitse kortin alkuperäinen puoli, jonka haluat käyttäjien näkevän ensin. Oletuksena se on kyseisen varaston alkuperäinen puoli.
  5. Valitse ominaisuus, jonka mukaan kiinteistöt lajitellaan. Esim. Ympäristöystävällisyys.
  6. Lisää avainsanoja pilkuilla erotettuna, joita Web Crawlers käyttävät.
  7. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän.
  8. Jatka napsauttamalla Tallenna.

Tallennettuasi sijoitetun ruudukon sinut ohjataan sijoitettujen ruutujen sivulle, ja ruudukko on nyt valmis jaettavaksi maailmalle.

Jaa

Osio nimeltä “Jaa”
Sijoiteltu ruudukko
Sijoiteltu ruudukko, jossa toiminnot-valikko on supistettu

Yllä on kuva, jossa näkyvät kaikki sijoitetun ruudukon käytettävissä olevat toiminnot:

  • Päivitä Päivittää ruudukon asetukset.
  • Lisää WinkLinkseihin Lisää sijoitetun ruudukon WinkLinks-tilillesi.
  • Upota Näyttää, miten tämä ruudukko upotetaan Ruudukoksi verkkosivustollesi.
  • Käytä WordPressin kanssa Näyttää, miten käytät WordPress-laajennustamme tämän kortin upottamiseen sivustollesi.

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

Upota

Osio nimeltä “Upota”
<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 sivustollesi:

  • Rivi 3 näyttää, miten Wink-tyylit upotetaan sivustollesi.
  • Rivillä 6–9 näytetään, miten käytetään wink-content-loader Web-komponenttia ja kerrotaan sille, että se hakee sijoitetun ruudukon koodillesi.
  • Rivi 11 näyttää, miten upotetaan JavaScript-skripti sivustollesi.
  • Rivi 13 näyttää, miten upotetaan wink-app-loader Web-komponentti ja kerrotaan sille, että se hakee sivutason asetuksesi.

API

Osio nimeltä “API”

Kehittäjät, jotka haluavat hallita ruudukkoja, voivat siirtyä kohtaan Kehittäjät > API > Varasto.

Lisälukemista

Osio nimeltä “Lisälukemista”