Componentes Web

Componentes Web é um standard que permite integrar funcionalidades completas em Javascript no seu website sem precisar saber programar. Graças a esta tecnologia inovadora, pode incorporar o inventário de viagens da Wink com muito pouca complicação. Este artigo guia-o pela nossa coleção de componentes web e mostra-lhe como usá-los.

Incorporar Wink

Há três coisas que tem de incluir em qualquer página onde queira mostrar um dos nossos componentes web.

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

Folha de estilos

Inclua os nossos estilos CSS no cabeçalho do seu documento.

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

Javascript

Inclua o nosso Javascript no final do seu documento. (Recomendamos imediatamente antes da tag de fecho </body>).

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

O seu site está agora pronto e capaz de mostrar os nossos componentes web.

Componentes

Leia sobre a nossa biblioteca de componentes abaixo.

Carregador de aplicação

O carregador é responsável por manter o estado e gerir a interação entre os 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. É responsável por mostrar o seu inventário (cartões, grelhas, mapas).

Atributos disponíveis:

layout
id
sort

O atributo sort está disponível apenas quando o layout é RANKED e não quer usar uma grelha classificada existente. Nestes casos, deixe o 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>

Pode encontrar exemplos para cartões, grelhas e mapas.

Pesquisa

O componente Lookup funciona muito bem em conjunto com uma das suas grelhas classificadas. Permite aos seus utilizadores pesquisar hotéis e destinos e a grelha atualiza-se em resposta ao resultado da pesquisa.

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

Clicar no componente acima abre um modal que permite escrever o destino ou hotel que está a procurar.

Itinerário

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

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

Componente web Itinerário

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

Pesquisa

O Search é um botão só com ícone do seletor de itinerário. Quando clica, 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 o seu itinerário.

Formulário de itinerário

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

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

*Componente web 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 tenha atualmente a mostrar na página.

Conta

O botão de conta permite adicionar autenticação Wink ao seu site.

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

Clicar no botão, quando o utilizador não está autenticado, encaminha o utilizador para se autenticar. Quando o utilizador está autenticado, mostra o ícone do perfil do utilizador.

Quando clica no botão, abre o menu suspenso específico do utilizador.

Incorporar TripPay

Há duas coisas que tem de incluir em qualquer página onde queira usar o componente web de pagamento TripPay.

Incluir a nossa folha de estilos.
Incluir o nosso Javascript.

Folha de estilos

Inclua os nossos estilos CSS no cabeçalho do seu documento.

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

Javascript

Inclua o nosso Javascript no final do seu documento. (Recomendamos imediatamente antes da tag de fecho <body>).

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

O seu site está agora pronto e capaz de mostrar os nossos componentes web.

Componentes

Pagamento

O componente de pagamento permite informar o TripPay que um viajante quer 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 quer executar.

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

O widget prepara o contrato para execução e mostra os detalhes do pagamento (Figura 1) ao utilizador para finalizar a reserva.

Erros

Se receber uma mensagem de erro ao incorporar um dos nossos componentes web, seja no WinkLinks ou no seu próprio site, há algumas coisas que podem ter corrido mal:

Disponibilidade

O inventário pode já não estar disponível. Vá a Wink Studio e verifique se o estado do “cartão” está disponível. Se não estiver, aparecerá em vermelho. Nesse caso, 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á a Wink Studio e verifique se o estado do “cartão” está disponível. Se não estiver, aparecerá em vermelho. Nesse caso, pode esperar e talvez o fornecedor o torne disponível novamente ou removê-lo da sua lista.

Customização

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

Aplicação

Isto é apenas para programadores web. Se acidentalmente removeu a Aplicação, tornando o client ID indisponível, por favor crie uma nova aplicação e use o novo client ID para incorporar os nossos Componentes Web.