Pular para o conteúdo
Academy

Grids

Uma grade representa uma lista de fornecedores e estoque e expõe os detalhes por meio de uma interface de usuário interativa e reservável. A grade permite a exibição de qualquer estoque da sua lista selecionada ou de uma pesquisa salva. Um usuário interage com uma grade da mesma forma que interage com um indivíduo.cartãocom um recurso adicional:

  1. Navegue pela grade clicando noShow more botão (quando mais itens estiverem disponíveis).
Pré-visualização da grade
Grade mostrando vários tipos de quartos

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

O restante deste artigo explica como criar, personalizar e expor a grade aos seus usuários.

Tipos de grade

Seção intitulada “Tipos de grade”

Existem três tipos de grades:

  1. Grade baseada em umalista com curadoria.
  2. Grade baseada em umapesquisa salva.
  3. Grade de grade baseada em um local e critérios de classificação (ou seja, grade classificada).

Grade de lista com curadoria

Seção intitulada “Grade de lista com curadoria”

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

Criar

Seção intitulada “Criar”

Navegar paraInventory > Curated Listsda barra de navegação principal. Para este exemplo, usaremos seuFavoriteslista. Se você ainda não adicionou nada à suaFavorites, Vá para Procurarpara aprender como.

Criar grade de lista de curadoria
Criar formulário de grade de lista com curadoria
  1. Clique no Actions botão no Favorites lista.
  2. Clique no Create a grid botão.
  3. Uma nova janela será exibida, permitindo que você nomeie sua grade. Veja abaixo.
  4. Clique OK botão para continuar.

Sua grade foi criada. Navegue atéTools > Gridsna barra de navegação principal e clique emCurated Gridsaba 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ê possa lembrar do que se trata a grade.
  2. Selecione o Personalização que você deseja aplicar a esta grade.
  3. Selecione a face inicial da carta que você deseja que os usuários vejam primeiro. Por padrão, é a face nativa do inventário.
  4. Selecione o emblema que deseja usar no cartão. Um emblema permite que os usuários comparem o inventário com base em uma métrica agregada, como eco-friendly.
  5. Adicione palavras-chave, separadas por vírgula, que serão usadas por Rastreadores da Web.
  6. Adicione títulos e descrições nos idiomas que você deseja que o usuário veja.
  7. Clique no Save botão para continuar.

Compartilhar

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

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

  • AtualizarAtualiza sua configuração de grade.
  • Adicionar ao WinkLinksAdiciona a grade à sua conta WinkLinks.
  • IncorporarMostra como incorporar esta grade como umaGradeno seu site.
  • Usar com WordPressMostra como usar nossoPlugin do WordPresspara incorporar esta grade em seu site.

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

Veja como incorporar sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink no seu site.
  • As linhas 6 a 9 mostram como usar ocarregador de conteúdo piscanteComponente Web e diga para ele buscar uma grade para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar ocarregador de aplicativo winkComponente Web e peça para ele buscar suas preferências de configuração no nível da 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 um inventário de viagens reservável que você pode mostrar aos seus usuários.

Criar

Seção intitulada “Criar”

Navegar paraInventory > Saved searchesna barra de navegação principal. Se você ainda não criou uma pesquisa salva, vá paraProcurarpara aprender como.

Criar grade de pesquisa salva
Criar formulário de grade de pesquisa salva
  1. Clique no Actions botão na sua pesquisa salva.
  2. Clique no Create a grid botão.
  3. Uma nova janela será exibida, permitindo que você nomeie sua grade. Veja abaixo.
  1. CliqueOKbotão para continuar.

Sua grade foi criada. Navegue atéTools > Gridsna barra de navegação principal e clique emSaved Search Gridsaba 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ê possa lembrar do que se trata a grade.
  2. Selecione o Personalização que você deseja aplicar a esta grade.
  3. Selecione a face inicial da carta que você deseja que os usuários vejam primeiro. Por padrão, é a face nativa do inventário.
  4. Selecione o emblema que deseja usar no cartão. Um emblema permite que os usuários comparem o inventário com base em uma métrica agregada, como eco-friendly.
  5. Adicione palavras-chave, separadas por vírgula, que serão usadas por Rastreadores da Web.
  6. Adicione títulos e descrições nos idiomas que você deseja que o usuário veja.
  7. Clique no Save botão para continuar.

Compartilhar

Seção intitulada “Compartilhar”
Grade de pesquisa salva
Entrada de 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>

Veja como incorporar sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink no seu site.
  • As linhas 6 a 9 mostram como usar ocarregador de conteúdo piscanteComponente Web e diga para ele buscar uma grade para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar ocarregador de aplicativo winkComponente Web e peça para ele buscar suas preferências de configuração no nível da página.

Grade classificada

Seção intitulada “Grade classificada”

Criar

Seção intitulada “Criar”

Crie uma grade classificada navegando atéTools > Gridse clique emRanked Gridaba. Clique naCreate ranked grid botão.

Personalizar

Seção intitulada “Personalizar”

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

  1. Escolha um destino. Por exemplo, Tóquio.
  2. Dê um nome para que você possa lembrar do que se trata a grade. Por exemplo, hotéis ecológicos em Tóquio
  3. Selecione o Personalização que você deseja aplicar a esta grade.
  4. Selecione a face inicial da carta que você deseja que os usuários vejam primeiro. Por padrão, é a face nativa do inventário.
  5. Escolha a característica pela qual as propriedades serão classificadas. Por exemplo, respeito ao meio ambiente.
  6. Adicione palavras-chave, separadas por vírgula, que serão usadas por Rastreadores da Web.
  7. Adicione títulos e descrições nos idiomas que você deseja que o usuário veja.
  8. Clique no Save botão para continuar.

Depois de salvar sua grade classificada, você será redirecionado para sua página de grades classificadas e sua grade estará pronta para ser compartilhada com o mundo.

Compartilhar

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

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

  • AtualizarAtualiza sua configuração de grade.
  • Adicionar ao WinkLinksAdiciona a grade classificada à sua conta WinkLinks.
  • IncorporarMostra como incorporar esta grade como umaGradeno seu site.
  • Usar com WordPressMostra como usar nossoPlugin do WordPresspara incorporar este cartão em seu site.

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

Veja como incorporar sua grade em seu site:

  • A linha 3 mostra como incorporar os estilos Wink no seu site.
  • As linhas 6 a 9 mostram como usar ocarregador de conteúdo piscanteComponente Web e diga para ele buscar uma grade classificada para seu código.
  • A linha 11 mostra como incorporar nosso Javascript em seu site.
  • A linha 13 mostra como incorporar ocarregador de aplicativo winkComponente Web e peça para ele buscar suas preferências de configuração no nível da página.

API

Seção intitulada “API”

Os desenvolvedores que desejam gerenciar grades podem acessarDesenvolvedores > API > Inventário.

Leitura adicional

Seção intitulada “Leitura adicional”