Grids

Uma grelha representa uma lista de fornecedores e de stock e expõe os detalhes através de uma interface de utilizador de grelha interativa e reservável. A grelha permite exibir qualquer inventário da sua lista selecionada ou pesquisa guardada. Um utilizador interage com uma grelha da mesma forma que interage com um indivíduo cartão com um recurso adicional:

Navegue pela grelha clicando no Show more botão (quando mais artigos estiverem disponíveis).

Pré-visualização da grelha — *Grelha mostrando vários tipos de quartos*

Acima está um exemplo da nossa grelha mostrando uma lista de cartões de tipos de sala.

O resto deste artigo explica como criar, personalizar e expor a grelha aos seus utilizadores.

Tipos de grelha

Existem três tipos de grades:

Grade baseada numa lista com curadoria.
Grade baseada numa pesquisa salva.
Grelha de grelha baseada num local e critérios de classificação (ou seja, grelha classificada).

Grelha de lista com curadoria

Esta é uma grelha que utiliza o inventário que recolheu numa das suas listas selecionadas e converte a lista num inventário de viagens reservável que pode mostrar aos seus utilizadores.

Criar

Navegar para Inventory > Curated Lists na barra de navegação principal. Para este exemplo, vamos utilizar o seu Favorites lista. Se ainda não adicionou nada ao seu Favorites, Vá para Pesquisa para aprender como.

Clique no Actions botão no Favorites lista.
Clique no Create a grid botão.
Uma nova janela será apresentada, permitindo nomear a sua grelha. Veja abaixo.
Clique OK botão para continuar.

A sua grade foi criada. Navegar para Tools > Grids na barra de navegação principal e clique em Curated Grids separador para ver a sua nova grelha.

Personalizar

O formulário permite personalizar a sua grelha das seguintes formas:

Dê um nome para que se possa lembrar do que se trata a grelha.
Selecione o Personalização que pretende aplicar a esta grelha.
Selecione a face inicial do cartão que pretende que os utilizadores vejam primeiro. Por defeito, é a face nativa deste inventário.
Selecione o emblema que pretende utilizar no cartão. Um emblema permite aos utilizadores comparar o inventário numa métrica agregada, como eco-friendly.
Adicione palavras-chave, separadas por vírgula, que serão utilizadas por Rastreadores da Web.
Adicione títulos e descrições nos idiomas que pretende que o utilizador veja.
Clique no Save botão para continuar.

Partilhar

Grelha de lista com curadoria — *Entrada de grelha de lista com curadoria e menu de ações recolhido*

Acima mostra uma imagem com todas as ações disponíveis para a sua grelha:

Atualização Atualiza a sua configuração de grelha.
Adicionar ao WinkLinks Adiciona a grelha à sua conta WinkLinks.
Incorporar Mostra como incorporar esta grelha como uma Rede no seu site.
Usar com WordPress Mostra como usar o nosso Plugin WordPress para incorporar esta grelha no seu site.

Abordaremos algumas destas opções com mais detalhe abaixo.

Incorporar

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

Veja como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu website.
As linhas 6 a 9 mostram como utilizar o carregador de conteúdo intermitente Componente Web e diga-lhe para procurar uma grelha para o seu código.
A linha 11 mostra como incorporar o nosso Javascript no seu site.
A linha 13 mostra como incorporar o carregador de aplicações wink Componente Web e peça-lhe para procurar as suas preferências de configuração ao nível da página.

Grelha de pesquisa guardada

Esta é uma grelha que utiliza o inventário na sua consulta de pesquisa guardada e converte os resultados da pesquisa num inventário de viagens reservável que pode mostrar aos seus utilizadores.

Criar

Navegar para Inventory > Saved searches na barra de navegação principal. Se ainda não criou uma pesquisa guardada, vá para Pesquisa para aprender como.

Clique no Actions botão na sua pesquisa guardada.
Clique no Create a grid botão.
Uma nova janela será apresentada, permitindo nomear a sua grelha. Veja abaixo.

Clique OK botão para continuar.

A sua grade foi criada. Navegar para Tools > Grids na barra de navegação principal e clique em Saved Search Grids separador para ver a sua nova grelha.

Personalizar

O formulário permite personalizar a sua grelha das seguintes formas:

Dê um nome para que se possa lembrar do que se trata a grelha.
Selecione o Personalização que pretende aplicar a esta grelha.
Selecione a face inicial do cartão que pretende que os utilizadores vejam primeiro. Por defeito, é a face nativa deste inventário.
Selecione o emblema que pretende utilizar no cartão. Um emblema permite aos utilizadores comparar o inventário numa métrica agregada, como eco-friendly.
Adicione palavras-chave, separadas por vírgula, que serão utilizadas por Rastreadores da Web.
Adicione títulos e descrições nos idiomas que pretende que o utilizador veja.
Clique no Save botão para continuar.

Partilhar

Grelha de pesquisa guardada — *Entrada de grelha de pesquisa guardada com menu de ações recolhido*

Incorporar

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

Veja como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu website.
As linhas 6 a 9 mostram como utilizar o carregador de conteúdo intermitente Componente Web e diga-lhe para procurar uma grelha para o seu código.
A linha 11 mostra como incorporar o nosso Javascript no seu site.
A linha 13 mostra como incorporar o carregador de aplicações wink Componente Web e peça-lhe para procurar as suas preferências de configuração ao nível da página.

Grelha classificada

Criar

Crie uma grelha classificada navegando até Tools > Grids e clique em Ranked Grid aba. Clique no Create ranked grid botão.

Personalizar

O formulário permite personalizar a sua grelha classificada das seguintes formas:

Escolha um destino. Por exemplo Tóquio.
Dê um nome para que se possa lembrar do que se trata a grelha. Por exemplo Hotéis ecológicos em Tóquio
Selecione o Personalização que pretende aplicar a esta grelha.
Selecione a face inicial do cartão que pretende que os utilizadores vejam primeiro. Por defeito, é a face nativa deste inventário.
Escolha a característica pela qual as propriedades serão classificadas. Por exemplo Eco-amizade.
Adicione palavras-chave, separadas por vírgula, que serão utilizadas por Rastreadores da Web.
Adicione títulos e descrições nos idiomas que pretende que o utilizador veja.
Clique no Save botão para continuar.

Depois de guardar a sua grelha classificada, será redirecionado para a sua página de grelhas classificadas e a sua grelha estará pronta para ser partilhada com o mundo.

Partilhar

Acima mostra uma imagem com todas as ações disponíveis para a sua grelha de classificação:

Atualização Atualiza a sua configuração de grelha.
Adicionar ao WinkLinks Adiciona a grelha classificada à sua conta WinkLinks.
Incorporar Mostra como incorporar esta grelha como uma Rede no seu site.
Usar com o WordPress Mostra como usar o nosso Plugin WordPress para incorporar este cartão no seu site.

Abordaremos algumas destas opções com mais detalhe abaixo.

Incorporar

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

Veja como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu website.
As linhas 6 a 9 mostram como utilizar o carregador de conteúdo intermitente Componente Web e diga-lhe para procurar uma grelha classificada para o seu código.
A linha 11 mostra como incorporar o nosso Javascript no seu site.
A linha 13 mostra como incorporar o carregador de aplicações wink Componente Web e peça-lhe para procurar as suas preferências de configuração ao nível da página.

API

Os programadores que desejam gerir grades podem aceder Programadores > API > Inventário.

Leitura adicional

Saiba mais sobre a nossa coleção de Componentes da Web.
Saiba mais sobre o Plugin Wink para WordPress.