Componentes Web

Componentes Web é um padrão que permite integrar recursos inteiros em Javascript ao seu site sem precisar saber programar. Graças a essa tecnologia incrível, você pode incorporar o inventário de viagens Wink com muito pouca complicação. Este artigo guia você pela nossa coleção de componentes web e mostra como usá-los.

Incorporar Wink

Há três coisas que você deve incluir em qualquer página onde quiser exibir um de nossos componentes web.

Incluir nossa folha de estilos.
Incluir nosso Javascript.
Incluir nosso carregador de aplicação.

Folha de estilos

Inclua nosso CSS no cabeçalho do seu documento.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

Inclua nosso Javascript no final do seu documento. (Recomendamos logo acima da tag de fechamento do body).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Seu site agora está pronto e capaz de exibir nossos componentes web.

Componentes

Leia sobre nossa biblioteca de componentes abaixo.

Carregador de aplicação

O carregador é responsável por manter o estado e gerenciar a interação entre nossos componentes. (Inclua-o abaixo do nosso Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="SEU CLIENT ID AQUI"
      configuration-id="SEU ID DE CUSTOMIZAÇÃO AQUI"
    ></wink-app-loader>
  </body>
</html>

Carregador de conteúdo

O carregador de conteúdo está no coração da nossa biblioteca de componentes web. Ele é responsável por exibir seu inventário (cartões, grades, mapas).

Atributos disponíveis:

layout
id
sort

O atributo sort está disponível apenas quando o layout é RANKED e você não quer usar uma grade ranqueada existente. Nesses casos, deixe id vazio.

Tipos de layout disponíveis:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Tipos de ordenação disponíveis:

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

Exemplos podem ser encontrados para cartões, grades e mapas.

Busca

O componente de busca funciona muito bem junto com uma de suas grades ranqueadas. Ele permite que seus usuários pesquisem por hotel e destino e a grade se atualiza em resposta ao resultado da busca.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Clicar no componente acima abre um modal que permite digitar o destino ou hotel que você está procurando.

Itinerário

O botão de itinerário mostra o itinerário atual no botão. Quando você clica nele, o seletor completo de itinerário é exibido como um modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Componente web de itinerário

Clicar no botão acima abre um modal que permite atualizar seu itinerário.

Busca (Search)

Busca é um botão apenas com ícone do seletor de itinerário. Quando você clica nele, o seletor completo de itinerário é exibido como um modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Clicar no botão acima abre um modal que permite atualizar seu itinerário.

Formulário de Itinerário

O componente de itinerário exibe um formulário de itinerário com o qual os usuários podem interagir.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

*Componente web de formulário de itinerário*

Ao alterar o itinerário, em qualquer um dos nossos componentes de itinerário, dispara o evento de atualização do itinerário para qualquer inventário que você tenha exibido na página.

Conta

O botão de conta permite que você adicione autenticação Wink ao seu site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Clicar no botão, quando o usuário não está autenticado, encaminha o usuário para autenticação. Quando o usuário está autenticado, exibe o ícone do perfil do usuário.

Ao clicar no botão, abre o menu suspenso específico do usuário.

Incorporar TripPay

Há duas coisas que você deve incluir em qualquer página onde quiser usar o componente web de pagamento TripPay.

Incluir nossa folha de estilos.
Incluir nosso Javascript.

Folha de estilos

Inclua nosso CSS no cabeçalho do seu documento.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Inclua nosso Javascript no final do seu documento. (Recomendamos logo acima da tag de fechamento do body).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Seu site agora está pronto e capaz de exibir nossos componentes web.

Componentes

Pagamento

O componente de pagamento permite informar ao TripPay que um viajante deseja comprar algo e as regras e preços desses itens.

Há um atributo obrigatório para o widget:

id O identificador do contrato de reserva que você deseja executar.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

O widget prepara o contrato para execução e exibe os detalhes do pagamento (Figura 1) para o usuário finalizar a reserva.

Erros

Se você receber uma mensagem de erro ao incorporar um de nossos componentes web, seja no WinkLinks ou no seu próprio site, algumas coisas podem ter dado errado:

Disponibilidade

O inventário pode não estar mais disponível. Vá para Wink Studio e verifique se o status do “cartão” está disponível. Se não estiver, aparecerá em vermelho. Nesse caso, você pode esperar e talvez o fornecedor o torne disponível novamente ou removê-lo da sua lista.

Removido

O inventário pode ter sido removido. Vá para Wink Studio e verifique se o status do “cartão” está disponível. Se não estiver, aparecerá em vermelho. Nesse caso, você pode esperar e talvez o fornecedor o torne disponível novamente ou removê-lo da sua lista.

Customização

Você pode ter removido acidentalmente a customização que definiu para acompanhar seu inventário. Certifique-se de que a customização ainda está disponível e defina uma nova se alguma estiver faltando.

Aplicação

Isso é apenas para desenvolvedores web. Se você removeu acidentalmente a Aplicação, fazendo com que o client ID não esteja mais disponível, por favor crie uma nova aplicação e use o novo client ID para incorporar nossos Componentes Web.