Saltar al contingut
Academy

Grids

Una quadrícula representa una llista de proveïdors i inventari i exposa els detalls a través d’una interfície d’usuari de quadrícula interactiva i reservable. La quadrícula permet mostrar qualsevol inventari de la vostra llista seleccionada o cerca desada. Un usuari interactua amb una quadrícula de la mateixa manera que interactua amb una persona.targetaamb una característica addicional:

  1. Navegueu per la quadrícula fent clic aShow morebotó (quan hi hagi més articles disponibles).
Vista prèvia de la quadrícula
Graella que mostra diversos tipus d’habitacions

A dalt hi ha un exemple de la nostra graella que mostra una llista de targetes de tipus d’habitació.

La resta d’aquest article us guiarà sobre com crear, personalitzar i exposar la quadrícula als vostres usuaris.

Tipus de quadrícula

Section titled “Tipus de quadrícula”

Hi ha tres tipus de quadrícules:

  1. Graella basada en unallista curada.
  2. Graella basada en unacerca desada.
  3. Graella de quadrícula basada en una ubicació i criteris d’ordenació (és a dir, graella classificada).

Graella de llista seleccionada

Section titled “Graella de llista seleccionada”

Aquesta és una quadrícula que utilitza l’inventari que has recopilat en una de les teves llistes seleccionades i converteix la llista en un inventari de viatges que es pot reservar i mostrar als teus usuaris.

Crea

Section titled “Crea”

Navega aInventory > Curated Listsdes de la barra de navegació principal. Per a aquest exemple, farem servir el vostreFavoritesllista. Si encara no heu afegit res a la vostraFavorites, aneu aCercaper aprendre com.

Crea una quadrícula de llista seleccionada
Crea un formulari de quadrícula de llista curada
  1. Feu clic a Actions botó del Favorites llista.
  2. Feu clic a Create a grid botó.
  3. Apareixerà una finestra nova que us permetrà posar un nom a la vostra quadrícula. Vegeu a continuació.
  4. Feu clic OK botó per continuar.

La vostra quadrícula s’ha creat. Navegueu aTools > Gridsdes de la barra de navegació principal i feu clic aCurated Gridsper veure la nova quadrícula.

Personalitza

Section titled “Personalitza”

El formulari us permet personalitzar la vostra quadrícula de les maneres següents:

  1. Dóna-li un nom per recordar de què tracta la graella.
  2. Seleccioneu el Personalització voleu aplicar a aquesta graella.
  3. Seleccioneu la cara inicial de la carta que voleu que els usuaris vegin primer. Per defecte, és la cara original d’aquest inventari.
  4. Seleccioneu la insígnia que voleu utilitzar a la targeta. Una insígnia permet als usuaris comparar l’inventari en una mètrica agregada com ara eco-friendly.
  5. Afegiu paraules clau, separades per una coma, que seran utilitzades per Rastrejadors web.
  6. Afegiu títols i descripcions en els idiomes que voleu que l’usuari vegi.
  7. Feu clic a Save botó per continuar.

Comparteix

Section titled “Comparteix”
Graella de llista seleccionada
Entrada de quadrícula de llista seleccionada amb menú d’accions replegat

A dalt es mostra una imatge amb totes les accions disponibles per a la quadrícula:

  • ActualitzacióActualitza la configuració de la quadrícula.
  • Afegeix a WinkLinksAfegeix la quadrícula al teu compte de WinkLinks.
  • IncrustarMostra com incrustar aquesta graella com aGraellaal vostre lloc web.
  • Utilitzar amb WordPressEt mostra com utilitzar el nostreComplement de WordPressper integrar aquesta graella al vostre lloc web.

A continuació, tractem algunes d’aquestes opcions amb més detall.

Incrustar

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

A continuació s’explica com integrar la quadrícula al lloc web:

  • La línia 3 us mostra com integrar els estils Wink al vostre lloc web.
  • Les línies 6 a 9 us mostren com utilitzar-lescarregador de contingut winkComponent web i digueu-li que busqui una quadrícula per al vostre codi.
  • La línia 11 us mostra com integrar el nostre Javascript al vostre lloc web.
  • La línia 13 mostra com incrustar elcarregador d’aplicacions winkComponent web i indica-li que obtingui les teves preferències de configuració a nivell de pàgina.

Graella de cerca desada

Section titled “Graella de cerca desada”

Aquesta és una quadrícula que utilitza l’inventari de la consulta de cerca desada i converteix els resultats de la cerca en inventari de viatges que es pot reservar i mostrar als usuaris.

Crea

Section titled “Crea”

Navega aInventory > Saved searchesdes de la barra de navegació principal. Si encara no heu creat una cerca desada, aneu aCercaper aprendre com.

Crea una quadrícula de cerca desada
Crea un formulari de quadrícula de cerca desat
  1. Feu clic a Actions botó a la cerca desada.
  2. Feu clic a Create a grid botó.
  3. Apareixerà una finestra nova que us permetrà posar un nom a la vostra quadrícula. Vegeu a continuació.
  1. Feu clicOKbotó per continuar.

La vostra quadrícula s’ha creat. Navegueu aTools > Gridsdes de la barra de navegació principal i feu clic aSaved Search Gridsper veure la nova quadrícula.

Personalitza

Section titled “Personalitza”

El formulari us permet personalitzar la vostra quadrícula de les maneres següents:

  1. Dóna-li un nom per recordar de què tracta la graella.
  2. Seleccioneu el Personalització voleu aplicar a aquesta graella.
  3. Seleccioneu la cara inicial de la carta que voleu que els usuaris vegin primer. Per defecte, és la cara original d’aquest inventari.
  4. Seleccioneu la insígnia que voleu utilitzar a la targeta. Una insígnia permet als usuaris comparar l’inventari en una mètrica agregada com ara eco-friendly.
  5. Afegiu paraules clau, separades per una coma, que seran utilitzades per Rastrejadors web.
  6. Afegiu títols i descripcions en els idiomes que voleu que l’usuari vegi.
  7. Feu clic a Save botó per continuar.

Comparteix

Section titled “Comparteix”
Graella de cerca desada
Entrada de quadrícula de cerca desada amb menú d’accions reduït

Incrustar

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

A continuació s’explica com integrar la quadrícula al lloc web:

  • La línia 3 us mostra com integrar els estils Wink al vostre lloc web.
  • Les línies 6 a 9 us mostren com utilitzar-lescarregador de contingut winkComponent web i digueu-li que busqui una quadrícula per al vostre codi.
  • La línia 11 us mostra com integrar el nostre Javascript al vostre lloc web.
  • La línia 13 mostra com incrustar elcarregador d’aplicacions winkComponent web i indica-li que obtingui les teves preferències de configuració a nivell de pàgina.

Graella classificada

Section titled “Graella classificada”

Crea

Section titled “Crea”

Crea una quadrícula classificada navegant fins aTools > Gridsi feu clic aRanked Gridpestanya. Feu clic a la pestanyaCreate ranked gridbotó.

Personalitza

Section titled “Personalitza”

El formulari us permet personalitzar la vostra graella classificada de les maneres següents:

  1. Trieu una destinació. P. ex. Tòquio.
  2. Dóna-li un nom per recordar de què tracta la graella. P. ex. Hotels ecològics a Tòquio
  3. Seleccioneu el Personalització voleu aplicar a aquesta graella.
  4. Seleccioneu la cara inicial de la carta que voleu que els usuaris vegin primer. Per defecte, és la cara original d’aquest inventari.
  5. Trieu per quina característica voleu ordenar les propietats. P. ex. Respecte amb el medi ambient.
  6. Afegiu paraules clau, separades per una coma, que seran utilitzades per Rastrejadors web.
  7. Afegiu títols i descripcions en els idiomes que voleu que l’usuari vegi.
  8. Feu clic a Save botó per continuar.

Després de desar la teva graella classificada, se’t redirigeix ​​a la pàgina de graelles classificades i la graella ja està a punt per ser compartida amb el món.

Comparteix

Section titled “Comparteix”
Graella classificada
Una quadrícula classificada amb un menú d’accions reduït

A dalt es mostra una imatge amb totes les accions disponibles per a la vostra graella de classificació:

  • ActualitzacióActualitza la configuració de la quadrícula.
  • Afegeix a WinkLinksAfegeix la graella classificada al teu compte de WinkLinks.
  • IncrustarMostra com incrustar aquesta graella com aGraellaal vostre lloc web.
  • Utilitzar amb WordPressEt mostra com utilitzar el nostreComplement de WordPressper incrustar aquesta targeta al vostre lloc web.

A continuació, tractem algunes d’aquestes opcions amb més detall.

Incrustar

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

A continuació s’explica com integrar la quadrícula al lloc web:

  • La línia 3 us mostra com integrar els estils Wink al vostre lloc web.
  • Les línies 6 a 9 us mostren com utilitzar-lescarregador de contingut winkComponent web i digueu-li que obtingui una graella classificada per al vostre codi.
  • La línia 11 us mostra com integrar el nostre Javascript al vostre lloc web.
  • La línia 13 mostra com incrustar elcarregador d’aplicacions winkComponent web i indica-li que obtingui les teves preferències de configuració a nivell de pàgina.

API

Section titled “API”

Els desenvolupadors que vulguin gestionar quadrícules poden anar aDesenvolupadors > API > Inventari.

Lectures addicionals

Section titled “Lectures addicionals”