Componentes web

Componentes webEs un estándar que te permite integrar funciones completas de Javascript en tu sitio web sin necesidad de saber programar. Gracias a esta innovadora tecnología, puedes integrar el inventario de viajes de Wink sin complicaciones. Este artículo te guía a través de nuestra colección de componentes web y te muestra cómo usarlos.

Insertar Wink

Hay tres cosas que debes incluir en cualquier página donde quieras mostrar uno de nuestros componentes web.

Incluya nuestra hoja de estilo.
Incluya nuestro Javascript.
Incluya nuestro cargador de aplicaciones.

Hoja de estilo

Incluya nuestros estilos CSS en el encabezado de su documento.

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

Javascript

Incluya nuestro Javascript en la parte inferior de su documento. (Recomendamos colocarlo inmediatamente encima de la etiqueta del cuerpo final.).

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

Su sitio ahora está listo y puede mostrar nuestros componentes web.

Componentes

Lea sobre nuestra biblioteca de componentes a continuación.

Cargador de aplicaciones

El cargador es responsable de mantener el estado y gestionar la interacción entre nuestros componentes.Inclúyelo debajo de nuestro 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>

Cargador de contenido

El cargador de contenido es el núcleo de nuestra biblioteca de componentes web. Es responsable de mostrar tu inventario (tarjetas, cuadrículas, mapas).

Atributos disponibles:

disposición
identificación
clasificar

El atributosortsolo está disponible cuando el diseño esRANKEDy no desea utilizar una cuadrícula de clasificación existente. Para estos casos, dejeid vacío.

Tipos de diseño disponibles:

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

Tipos de clasificación disponibles:

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>

Se pueden encontrar muestras paratarjetas,cuadrículas y mapas.

Buscar

La búsqueda funciona a la perfección con una de tus cuadrículas de clasificación. Permite a tus usuarios buscar hoteles y destinos, y la cuadrícula se actualiza según el resultado de la búsqueda.

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

Al hacer clic en el componente de arriba, se abre un modal que le permite escribir el destino o el hotel que está buscando.

Itinerario

El botón de itinerario muestra el itinerario actual. Al hacer clic en él, se muestra el selector de itinerario completo como ventana modal.

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

Componente web de itinerario

Al hacer clic en el botón de arriba, se abre un modal que le permite actualizar su itinerario.

Buscar

Buscar es un botón con un solo icono en el selector de itinerario. Al hacer clic en él, se muestra el selector de itinerario completo como una ventana modal.

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

Al hacer clic en el botón de arriba, se abre un modal que le permite actualizar su itinerario.

Formulario de itinerario

El componente de itinerario muestra un formulario de itinerario con el que los usuarios pueden interactuar.

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

*Componente web de formulario de itinerario*

Al cambiar el itinerario, en cualquiera de nuestros componentes de itinerario, se activa el evento de actualización de itinerario para cualquier inventario que tenga actualmente mostrado en la página.

Cuenta

El botón de cuenta le permite agregar la autenticación Wink a su sitio.

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

Componente web de cuenta — *Componente web del botón de cuenta*

Al hacer clic en el botón, si el usuario no está autenticado, se le redirigirá para que se autentique. Cuando el usuario esté autenticado, se mostrará su icono de perfil.

Al hacer clic en el botón, se abre el menú desplegable específico del usuario.

Integrar TripPay

Hay dos cosas que debes incluir en cualquier página donde quieras utilizar el componente web de pago TripPay.

Incluya nuestra hoja de estilo.
Incluya nuestro Javascript.

Hoja de estilo

Incluya nuestros estilos CSS en el encabezado de su documento.

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

Javascript

Incluya nuestro Javascript en la parte inferior de su documento. (Recomendamos colocarlo inmediatamente encima de la etiqueta del cuerpo final.).

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

Su sitio ahora está listo y puede mostrar nuestros componentes web.

Componentes

Pago

El componente de pago le permite informar a TripPay que un viajero desea comprar algo y las reglas y precios para esos artículos.

Hay un atributo obligatorio para el widget:

idEl identificador del contrato de reserva que desea ejecutar.

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

Para saber cómo generar el contrato de reservaid, lea la guía:Integración con TripPay. ::

El widget prepara el contrato para su ejecución y muestra los detalles del pago.(Figura 1)al usuario para finalizar la reserva.