Grelhas

Uma grelha representa uma lista de fornecedores e inventário e expõe os detalhes através de uma interface interativa e reservável em grelha. A grelha suporta a exibição de qualquer inventário da sua lista selecionada ou pesquisa guardada. Um utilizador interage com uma grelha da mesma forma que interage com um cartão individual, com uma funcionalidade adicional:

Paginar pela grelha clicando no botão Mostrar mais (quando houver mais itens disponíveis).

Pré-visualização da grelha — *Grelha a mostrar múltiplos tipos de quartos*

Acima está um exemplo da nossa grelha a mostrar uma lista de cartões de tipos de quarto.

O resto deste artigo guia-o sobre como criar, personalizar e expor a grelha aos seus utilizadores.

Tipos de grelhas

Existem três tipos de grelhas:

Grelha baseada numa lista selecionada.
Grelha baseada numa pesquisa guardada.
Grelha baseada numa localização e critérios de ordenação (ou seja, Grelha classificada).

Grelha de lista selecionada

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

Criar

Navegue para Inventário > Listas Selecionadas na barra de navegação principal. Para este exemplo, usaremos a sua lista Favoritos. Se ainda não adicionou nada aos seus Favoritos, vá a Pesquisa para aprender como.

Clique no botão Ações na lista Favoritos.
Clique no botão Criar uma grelha.
Será exibida uma nova janela, permitindo-lhe nomear a sua grelha. Veja abaixo.
Clique no botão OK para continuar.

A sua grelha foi criada. Navegue para Ferramentas > Grelhas na barra de navegação principal e clique no separador Grelhas Selecionadas para ver a sua nova grelha.

Personalizar

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

Dê-lhe um nome para se lembrar do que se trata a grelha.
Selecione a Personalização que deseja aplicar a esta grelha.
Selecione a face inicial do cartão que quer que os utilizadores vejam primeiro. Por defeito, é a face nativa desse inventário.
Selecione o emblema que quer usar no cartão. Um emblema permite aos utilizadores comparar inventário com base numa métrica agregada, como ecológico.
Adicione palavras-chave, separadas por vírgulas, que serão usadas por Web Crawlers.
Adicione títulos e descrições nos idiomas que quer que o utilizador veja.
Clique no botão Guardar para continuar.

Partilhar

Grelha de lista selecionada — *Entrada da grelha de lista selecionada com menu de ações recolhido*

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

Atualizar Atualiza a configuração da sua grelha.
Adicionar ao WinkLinks Adiciona a grelha à sua conta WinkLinks.
Incorporar Mostra como incorporar esta grelha como um Grid no seu site.
Usar com WordPress Mostra como usar o nosso plugin WordPress para incorporar esta grelha no seu site.

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

Aqui está como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu site.
As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e indicar-lhe para buscar 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 wink-app-loader Web Component e indicar-lhe para buscar as suas preferências de configuração a nível de página.

Grelha de pesquisa guardada

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

Criar

Navegue para Inventário > Pesquisas guardadas na barra de navegação principal. Se ainda não criou uma pesquisa guardada, vá a Pesquisa para aprender como.

Clique no botão Ações na sua pesquisa guardada.
Clique no botão Criar uma grelha.
Será exibida uma nova janela, permitindo-lhe nomear a sua grelha. Veja abaixo.

Clique no botão OK para continuar.

A sua grelha foi criada. Navegue para Ferramentas > Grelhas na barra de navegação principal e clique no separador Grelhas de Pesquisa Guardada para ver a sua nova grelha.

Personalizar

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

Dê-lhe um nome para se lembrar do que se trata a grelha.
Selecione a Personalização que deseja aplicar a esta grelha.
Selecione a face inicial do cartão que quer que os utilizadores vejam primeiro. Por defeito, é a face nativa desse inventário.
Selecione o emblema que quer usar no cartão. Um emblema permite aos utilizadores comparar inventário com base numa métrica agregada, como ecológico.
Adicione palavras-chave, separadas por vírgulas, que serão usadas por Web Crawlers.
Adicione títulos e descrições nos idiomas que quer que o utilizador veja.
Clique no botão Guardar para continuar.

Partilhar

Grelha de pesquisa guardada — *Entrada da 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>

Aqui está como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu site.
As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e indicar-lhe para buscar 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 wink-app-loader Web Component e indicar-lhe para buscar as suas preferências de configuração a nível de página.

Grelha classificada

Criar

Crie uma grelha classificada navegando para Ferramentas > Grelhas e clicando no separador Grelha Classificada. Clique no botão Criar grelha classificada.

Personalizar

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

Escolha um destino. Ex.: Tóquio.
Dê-lhe um nome para se lembrar do que se trata a grelha. Ex.: Hotéis ecológicos em Tóquio
Selecione a Personalização que deseja aplicar a esta grelha.
Selecione a face inicial do cartão que quer que os utilizadores vejam primeiro. Por defeito, é a face nativa desse inventário.
Escolha a característica pela qual ordenar as propriedades. Ex.: Ecologia.
Adicione palavras-chave, separadas por vírgulas, que serão usadas por Web Crawlers.
Adicione títulos e descrições nos idiomas que quer que o utilizador veja.
Clique no botão Guardar para continuar.

Após guardar a sua grelha classificada, será redirecionado para a página das suas 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 classificada:

Atualizar Atualiza a configuração da sua grelha.
Adicionar ao WinkLinks Adiciona a grelha classificada à sua conta WinkLinks.
Incorporar Mostra como incorporar esta grelha como um Grid no seu site.
Usar com WordPress Mostra como usar o nosso plugin WordPress para incorporar este cartão no seu site.

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

Aqui está como incorporar a sua grelha no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu site.
As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e indicar-lhe para buscar 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 wink-app-loader Web Component e indicar-lhe para buscar as suas preferências de configuração a nível de página.

API

Os desenvolvedores que querem gerir grelhas podem ir a Developers > API > Inventory.

Leitura adicional

Saiba mais sobre a nossa coleção de Web Components.
Saiba mais sobre o plugin WordPress Wink.