Componentes da Web

Componentes da Web é um standard que permite integrar recursos Javascript inteiros no seu site sem ter de saber programar. Graças a esta tecnologia agradável, pode incorporar o inventário de viagens do Wink com muito pouco trabalho. Este artigo apresenta a nossa coleção de componentes web e mostra como utilizá-los.

Incorporar Wink

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

Inclua a nossa folha de estilos.
Inclua o nosso Javascript.
Inclua o nosso carregador de aplicações.

Folha de estilo

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 acima da etiqueta final do corpo).

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

O seu site está agora pronto e pode exibir os nossos componentes web.

Componentes

Leia sobre a nossa biblioteca de componentes abaixo.

Carregador de aplicações

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="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Carregador de conteúdo

O carregador de conteúdos está no coração da nossa biblioteca de componentes web. É responsável por exibir o seu inventário (cartas, grades, mapas).

Atributos disponíveis:

esquema
eu ia
ordenar

O atributo sort só está disponível quando o layout é RANKED e não pretende utilizar uma grelha classificada existente. Para estes 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 classificaçã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>

Podem ser encontradas amostras para cartas, grades e mapas.

Pesquisar

O Lookup funciona muito bem juntamente com uma das suas grelhas classificadas. Permite que os seus utilizadores pesquisem hotéis e destinos, e a grelha é atualizada em resposta aos resultados da pesquisa.

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

Clicar no componente acima abre um modal que lhe permite introduzir o destino ou hotel que procura.

Itinerário

O botão de itinerário mostra o itinerário atual no botão. Ao clicar nele, o seletor de itinerário completo é apresentado 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 lhe permite atualizar o seu itinerário.

Pesquisa

Pesquisar é um botão apenas de ícone do seletor de itinerário. Ao clicar nele, o seletor de itinerário completo é apresentado como um modal.

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

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

Formulário de itinerário

O componente de itinerário apresenta 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 do formulário de itinerário*

Ao alterar o itinerário, em qualquer um dos nossos componentes de itinerário, o evento de atualização do itinerário é acionado para qualquer inventário que esteja a ser apresentado na página.

Conta

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

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

Componente web da conta — *Componente web do botão Conta*

Clicar no botão, quando o utilizador não está autenticado, encaminhará o utilizador para a autenticação. Quando o utilizador é autenticado, é apresentado o ícone do perfil do utilizador.

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

Incorporar TripPay

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

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

Folha de estilo

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 acima da etiqueta final do corpo).

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

O seu site está agora pronto e pode exibir os nossos componentes web.

Componentes

Pagamento

A componente de pagamento permite informar o TripPay que um viajante deseja comprar algo e as regras e preços desses artigos.

Existe um atributo obrigatório para o widget:

id O identificador do contrato de reserva que pretende executar.

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

:::observação Para saber como gerar o contrato de reserva id, leia o guia: Integração com o TripPay. :::

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

Detalhes do pagamento — *Figura 1. Exemplo de formulário de pagamento*