Pular para o conteúdo
Academy

Grades

Uma grade representa uma lista de fornecedores e inventário e exibe os detalhes por meio de uma interface interativa e reservável em grade. A grade suporta a exibição de qualquer inventário da sua lista selecionada ou pesquisa salva. Um usuário interage com uma grade da mesma forma que interage com um card individual, com um recurso adicional:

  1. Paginar pela grade clicando no botão Mostrar mais (quando houver mais itens disponíveis).
Visualização da grade
Grade mostrando múltiplos tipos de quarto

Acima está um exemplo da nossa grade mostrando uma lista de cards de tipos de quarto.

O restante deste artigo orienta você sobre como criar, personalizar e expor a grade para seus usuários.

Tipos de grade

Seção intitulada “Tipos de grade”

Existem três tipos de grades:

  1. Grade baseada em uma lista selecionada.
  2. Grade baseada em uma pesquisa salva.
  3. Grade baseada em localização e critérios de ordenação (ou seja, Grade ranqueada).

Grade de lista selecionada

Seção intitulada “Grade de lista selecionada”

Esta é uma grade que usa o inventário que você coletou em uma de suas listas selecionadas e converte a lista em inventário de viagem reservável que você pode mostrar aos seus usuários.

Criar

Seção intitulada “Criar”

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

Criar grade de lista selecionada
Formulário para criar grade de lista selecionada
  1. Clique no botão Ações na lista Favoritos.
  2. Clique no botão Criar uma grade.
  3. Uma nova janela será exibida, permitindo que você nomeie sua grade. Veja abaixo.
  4. Clique no botão OK para continuar.

Sua grade foi criada. Navegue até Ferramentas > Grades na barra de navegação principal e clique na aba Grades Selecionadas para ver sua nova grade.

Personalizar

Seção intitulada “Personalizar”

O formulário permite que você personalize sua grade das seguintes maneiras:

  1. Dê um nome para que você se lembre do que a grade trata.
  2. Selecione a Personalização que deseja aplicar a esta grade.
  3. Selecione a face inicial do card que deseja que os usuários vejam primeiro. Por padrão, é a face nativa daquele inventário.
  4. Selecione o distintivo que deseja usar no card. Um distintivo permite que os usuários comparem inventário com base em uma métrica agregada, como ecológico.
  5. Adicione palavras-chave, separadas por vírgula, que serão usadas por Web Crawlers.
  6. Adicione títulos e descrições nos idiomas que deseja que o usuário veja.
  7. Clique no botão Salvar para continuar.

Compartilhar

Seção intitulada “Compartilhar”
Grade de lista selecionada
Entrada da grade de lista selecionada com menu de ações recolhido

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

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

Cobrimos algumas dessas opções, com mais detalhes, abaixo.

Incorporar

Seção intitulada “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 sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink em seu site.
  • As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e instruí-lo a buscar uma grade para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar o wink-app-loader Web Component e instruí-lo a buscar suas preferências de configuração em nível de página.

Grade de pesquisa salva

Seção intitulada “Grade de pesquisa salva”

Esta é uma grade que usa o inventário na sua consulta de pesquisa salva e converte os resultados da pesquisa em inventário de viagem reservável que você pode mostrar aos seus usuários.

Criar

Seção intitulada “Criar”

Navegue até Inventário > Pesquisas salvas na barra de navegação principal. Se você ainda não criou uma pesquisa salva, vá para Pesquisa para aprender como.

Criar grade de pesquisa salva
Formulário para criar grade de pesquisa salva
  1. Clique no botão Ações na sua pesquisa salva.
  2. Clique no botão Criar uma grade.
  3. Uma nova janela será exibida, permitindo que você nomeie sua grade. Veja abaixo.
  1. Clique no botão OK para continuar.

Sua grade foi criada. Navegue até Ferramentas > Grades na barra de navegação principal e clique na aba Grades de Pesquisa Salva para ver sua nova grade.

Personalizar

Seção intitulada “Personalizar”

O formulário permite que você personalize sua grade das seguintes maneiras:

  1. Dê um nome para que você se lembre do que a grade trata.
  2. Selecione a Personalização que deseja aplicar a esta grade.
  3. Selecione a face inicial do card que deseja que os usuários vejam primeiro. Por padrão, é a face nativa daquele inventário.
  4. Selecione o distintivo que deseja usar no card. Um distintivo permite que os usuários comparem inventário com base em uma métrica agregada, como ecológico.
  5. Adicione palavras-chave, separadas por vírgula, que serão usadas por Web Crawlers.
  6. Adicione títulos e descrições nos idiomas que deseja que o usuário veja.
  7. Clique no botão Salvar para continuar.

Compartilhar

Seção intitulada “Compartilhar”
Grade de pesquisa salva
Entrada da grade de pesquisa salva com menu de ações recolhido

Incorporar

Seção intitulada “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 sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink em seu site.
  • As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e instruí-lo a buscar uma grade para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar o wink-app-loader Web Component e instruí-lo a buscar suas preferências de configuração em nível de página.

Grade ranqueada

Seção intitulada “Grade ranqueada”

Criar

Seção intitulada “Criar”

Crie uma grade ranqueada navegando até Ferramentas > Grades e clicando na aba Grade Ranqueada. Clique no botão Criar grade ranqueada.

Personalizar

Seção intitulada “Personalizar”

O formulário permite que você personalize sua grade ranqueada das seguintes maneiras:

  1. Escolha um destino. Ex.: Tóquio.
  2. Dê um nome para que você se lembre do que a grade trata. Ex.: Hotéis ecológicos em Tóquio
  3. Selecione a Personalização que deseja aplicar a esta grade.
  4. Selecione a face inicial do card que deseja que os usuários vejam primeiro. Por padrão, é a face nativa daquele inventário.
  5. Escolha qual característica usar para ordenar as propriedades. Ex.: Ecologicamente correto.
  6. Adicione palavras-chave, separadas por vírgula, que serão usadas por Web Crawlers.
  7. Adicione títulos e descrições nos idiomas que deseja que o usuário veja.
  8. Clique no botão Salvar para continuar.

Após salvar sua grade ranqueada, você será redirecionado para a página de suas grades ranqueadas e sua grade estará pronta para ser compartilhada com o mundo.

Compartilhar

Seção intitulada “Compartilhar”
Grade ranqueada
Uma grade ranqueada com menu de ações recolhido

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

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

Cobrimos algumas dessas opções, com mais detalhes, abaixo.

Incorporar

Seção intitulada “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 sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink em seu site.
  • As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e instruí-lo a buscar uma grade ranqueada para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar o wink-app-loader Web Component e instruí-lo a buscar suas preferências de configuração em nível de página.

API

Seção intitulada “API”

Desenvolvedores que desejam gerenciar grades podem acessar Desenvolvedores > API > Inventário.

Leitura adicional

Seção intitulada “Leitura adicional”