Siirry sisältöön
Wink

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ä kuratoidusta listastasi 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 ruudukostamme, 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 sijoitettu 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-listaa. 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ä ruudukko kertoo.
  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 kokonaismittarilla, kuten ympäristöystävällinen.
  5. Lisää avainsanoja pilkulla erotettuna, joita käyttävät Web Crawlers.
  6. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän ne.
  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 verkkosivustollesi.

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

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ä ruudukko kertoo.
  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 kokonaismittarilla, kuten ympäristöystävällinen.
  5. Lisää avainsanoja pilkulla erotettuna, joita käyttävät Web Crawlers.
  6. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän ne.
  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 konfiguraatioasetuksesi.

Sijoitettu ruudukko

Osio nimeltä “Sijoitettu ruudukko”

Luo

Osio nimeltä “Luo”

Luo sijoitettu ruudukko siirtymällä kohtaan Työkalut > Ruudukot ja napsauta Sijoitettu ruudukko -välilehteä. Napsauta Luo sijoitettu 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ä ruudukko kertoo. 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 pilkulla erotettuna, joita käyttävät Web Crawlers.
  7. Lisää otsikot ja kuvaukset kielillä, joilla haluat käyttäjän näkevän ne.
  8. Jatka napsauttamalla Tallenna.

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

Jaa

Osio nimeltä “Jaa”
Sijoitettu ruudukko
Sijoitettu 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 verkkosivustollesi.

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

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”