Componentes Web

Componentes Web es un estándar que te permite integrar funciones completas de Javascript en tu sitio web sin necesidad de saber programar. Gracias a esta tecnología genial, te permite insertar el inventario de viajes de Wink con muy poco esfuerzo. 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.

Incluir nuestra hoja de estilos.
Incluir nuestro Javascript.
Incluir nuestro cargador de aplicación.

Hoja de estilos

Incluye nuestros estilos CSS en el head de tu documento.

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

Javascript

Incluye nuestro Javascript al final de tu documento. (Recomendamos justo antes de la etiqueta de cierre body).

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

Tu sitio ya está listo y puede mostrar nuestros componentes web.

Componentes

Lee sobre nuestra biblioteca de componentes a continuación.

Cargador de aplicación

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="TU CLIENT ID AQUÍ"
      configuration-id="TU ID DE PERSONALIZACIÓN AQUÍ"
    ></wink-app-loader>
  </body>
</html>

Cargador de contenido

El cargador de contenido está en el corazón de nuestra biblioteca de componentes web. Es responsable de mostrar tu inventario (tarjetas, grillas, mapas).

Atributos disponibles:

layout
id
sort

El atributo sort solo está disponible cuando el layout es RANKED y no quieres usar una grilla clasificada existente. En estos casos, deja id vacío.

Tipos de layout disponibles:

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

Tipos de sort 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>

Puedes encontrar ejemplos para tarjetas, grillas y mapas.

Búsqueda (Lookup)

Lookup funciona muy bien junto con una de tus grillas clasificadas. Permite a tus usuarios buscar hoteles y destinos y la grilla se actualiza en respuesta a su resultado de búsqueda.

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

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

Itinerario

El botón de itinerario muestra el itinerario actual en el botón. Cuando haces clic, el selector completo de itinerario se muestra como un modal.

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

Componente web Itinerario

Al hacer clic en el botón de arriba se abre un modal que te permite actualizar tu itinerario.

Búsqueda

Search es un botón solo con ícono del selector de itinerario. Cuando haces clic, el selector completo de itinerario se muestra como un modal.

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

Al hacer clic en el botón de arriba se abre un modal que te permite actualizar tu 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 formulario de itinerario*

Al cambiar el itinerario, en cualquiera de nuestros componentes de itinerario, se dispara el evento de actualización de itinerario para cualquier inventario que tengas mostrando en la página.

Cuenta

El botón de cuenta te permite agregar autenticación de Wink a tu sitio.

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

Componente web Cuenta — *Componente web botón Cuenta*

Al hacer clic en el botón, cuando el usuario no está autenticado, se redirige al usuario para que se autentique. Cuando el usuario está autenticado, muestra el ícono del perfil del usuario.

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

Insertar TripPay

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

Incluir nuestra hoja de estilos.
Incluir nuestro Javascript.

Hoja de estilos

Incluye nuestros estilos CSS en el head de tu documento.

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

Javascript

Incluye nuestro Javascript al final de tu documento. (Recomendamos justo antes de la etiqueta de cierre body).

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

Tu sitio ya está listo y puede mostrar nuestros componentes web.

Componentes

Pago

El componente de pago te permite informar a TripPay que un viajero quiere comprar algo y las reglas y precios para esos ítems.

Hay un atributo obligatorio para el widget:

id El identificador del contrato de reserva que quieres ejecutar.

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

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

Errores

Si te aparece un mensaje de error al insertar uno de nuestros componentes web, ya sea en WinkLinks o en tu propio sitio web, hay algunas cosas que podrían haber salido mal:

Disponibilidad

El inventario podría ya no estar disponible. Ve a Wink Studio y verifica si el estado de la “tarjeta” está disponible. Si no lo está, aparecerá en rojo. En ese caso, puedes esperar y tal vez el proveedor lo vuelva a poner disponible o eliminarlo de tu lista.

Eliminado

El inventario podría haber sido eliminado. Ve a Wink Studio y verifica si el estado de la “tarjeta” está disponible. Si no lo está, aparecerá en rojo. En ese caso, puedes esperar y tal vez el proveedor lo vuelva a poner disponible o eliminarlo de tu lista.

Personalización

Podrías haber eliminado accidentalmente la personalización que definiste para acompañar tu inventario. Asegúrate de que la personalización siga disponible y configura una nueva si falta alguna.

Aplicación

Esto es solo para desarrolladores web. Si eliminaste accidentalmente la Aplicación ; haciendo que el client ID ya no esté disponible, por favor crea una nueva aplicación y usa el nuevo client ID para insertar nuestros Componentes Web.