Componentes da Web

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

Incorporar Wink

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

Inclua nossa folha de estilo.
Inclua nosso Javascript.
Inclua nosso carregador de aplicativos.

Folha de estilo

Inclua 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 nosso Javascript no final do seu documento.Recomendamos imediatamente acima da tag final do corpo).

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

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

Componentes

Leia sobre nossa biblioteca de componentes abaixo.

Carregador de aplicativos

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="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údo é o coração da nossa biblioteca de componentes web. Ele é responsável por exibir seu inventário (cartões, grades, mapas).

Atributos disponíveis:

disposição
eu ia
organizar

O atributosortsó está disponível quando o layout éRANKEDe você não quer usar uma grade classificada existente. Para esses casos, deixeid 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>

Amostras podem ser encontradas paracartas,grades e mapas.

Pesquisar

O Lookup funciona muito bem com uma de suas grades classificadas. Ele permite que seus usuários pesquisem hotéis e destinos, e a grade é atualizada em resposta ao resultado da pesquisa.

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

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

Itinerário

O botão de itinerário exibe o itinerário atual. Ao clicar nele, o seletor de itinerário completo é 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.

Procurar

Pesquisar é um botão com apenas um ícone no seletor de itinerários. Ao clicar nele, o seletor de itinerários completo é 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 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 de itinerário é acionado para qualquer inventário que esteja sendo 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>

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

Clicar no botão, quando o usuário não estiver autenticado, encaminhará o usuário para a autenticação. Quando o usuário estiver autenticado, o ícone do perfil do usuário será exibido.

Quando você clica no botão, ele abre o menu suspenso específico do usuário.

Incorporar TripPay

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

Inclua nossa folha de estilo.
Inclua nosso Javascript.

Folha de estilo

Inclua 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 nosso Javascript no final do seu documento.Recomendamos imediatamente acima da tag final do corpo).

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

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

Componentes

Pagamento

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

Há um atributo obrigatório para o widget:

idO identificador do contrato de reserva que você deseja executar.

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

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

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

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