Saltar al contingut
Academy

Components web

Components web és un estàndard que et permet integrar funcionalitats completes de Javascript al teu lloc web sense necessitat de saber programar. Gràcies a aquesta tecnologia tan interessant, et permet incrustar l’inventari de viatges de Wink amb molt poca complicació. Aquest article t’explica la nostra col·lecció de components web i et mostra com utilitzar-los.

Incrustar Wink

Section titled “Incrustar Wink”

Hi ha tres coses que has d’incloure a qualsevol pàgina on vulguis mostrar un dels nostres components web.

  1. Incloure la nostra fulla d’estils.
  2. Incloure el nostre Javascript.
  3. Incloure el nostre carregador d’aplicació.

Fulla d’estils

Section titled “Fulla d’estils”

Inclou els nostres estils CSS al capçal del teu document.

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

Javascript

Section titled “Javascript”

Inclou el nostre Javascript al final del teu document. (Recomanem just abans de la etiqueta de tancament body).

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

El teu lloc ja està preparat i capaç de mostrar els nostres components web.

Components

Section titled “Components”

Llegeix sobre la nostra biblioteca de components a continuació.

Carregador d’aplicació

Section titled “Carregador d’aplicació”

El carregador és responsable de mantenir l’estat i gestionar la interacció entre els nostres components. (Inclou-lo després del nostre 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 contingut

Section titled “Carregador de contingut”

El carregador de contingut és el nucli de la nostra biblioteca de components web. És responsable de mostrar el teu inventari (targetes, graelles, mapes).

Atributs disponibles:

  • layout
  • id
  • sort

L’atribut sort només està disponible quan el layout és RANKED i no vols utilitzar una graella classificada existent. En aquests casos, deixa id buit.

Tipus de layout disponibles:

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

Tipus de sortida 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>

Pots trobar exemples per a targetes, graelles i mapes.

Cerca

Section titled “Cerca”

Lookup funciona molt bé juntament amb una de les teves graelles classificades. Permet als teus usuaris cercar hotels i destinacions i la graella s’actualitza en resposta als resultats de la cerca.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Component web Lookup
Component web Lookup

Fer clic al component anterior obre un modal que et permet escriure la destinació o l’hotel que estàs cercant.

Modal Lookup
Modal Lookup amb resultats

Itinerari

Section titled “Itinerari”

El botó d’itinerari mostra l’itinerari actual al botó. Quan hi fas clic, es mostra el selector complet d’itinerari en un modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Component web Itinerari
Component web Itinerari

Fer clic al botó anterior obre un modal que et permet actualitzar el teu itinerari.

Modal de cerca
Selector d’itinerari com a modal

Cerca

Section titled “Cerca”

Search és un botó només amb icona del selector d’itinerari. Quan hi fas clic, es mostra el selector complet d’itinerari en un modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Component web Cerca
Component web Cerca

Fer clic al botó anterior obre un modal que et permet actualitzar el teu itinerari.

Modal de cerca
Selector d’itinerari com a modal

Formulari d’itinerari

Section titled “Formulari d’itinerari”

El component d’itinerari mostra un formulari d’itinerari amb què els usuaris poden interactuar.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Component web Formulari d’itinerari
Component web Formulari d’itinerari

Canviar l’itinerari, en qualsevol dels nostres components d’itinerari, desencadena l’esdeveniment d’actualització d’itinerari a qualsevol inventari que tinguis actualment mostrant a la pàgina.

Compte

Section titled “Compte”

El botó de compte et permet afegir l’autenticació de Wink al teu lloc.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Component web Compte
Component web Botó de compte

Fer clic al botó, quan l’usuari no està autenticat, el redirigeix perquè s’autentiqui. Quan l’usuari està autenticat, mostra la icona del perfil de l’usuari.

Botó de compte quan està autenticat
Component web Botó de compte (autenticat)

Quan fas clic al botó, s’obre el desplegable específic de l’usuari.

Botó de compte quan està autenticat
Component web Botó de compte (obert)

Incrustar TripPay

Section titled “Incrustar TripPay”

Hi ha dues coses que has d’incloure a qualsevol pàgina on vulguis utilitzar el component web de pagament TripPay.

  1. Incloure la nostra fulla d’estils.
  2. Incloure el nostre Javascript.

Fulla d’estils

Section titled “Fulla d’estils”

Inclou els nostres estils CSS al capçal del teu document.

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

Javascript

Section titled “Javascript”

Inclou el nostre Javascript al final del teu document. (Recomanem just abans de la etiqueta de tancament body).

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

El teu lloc ja està preparat i capaç de mostrar els nostres components web.

Components

Section titled “Components”

Pagament

Section titled “Pagament”

El component de pagament et permet informar TripPay que un viatger vol comprar alguna cosa i les regles i preus per aquests articles.

Hi ha un atribut obligatori per al widget:

  • id L’identificador del contracte de reserva que vols executar.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

El widget prepara el contracte per a l’execució i mostra els detalls de pagament (Figura 1) a l’usuari per finalitzar la reserva.

Detalls de pagament
Figura 1. Exemple de formulari de pagament

Errors

Section titled “Errors”

Si reps un missatge d’error quan incrustes un dels nostres components web, ja sigui a WinkLinks o al teu propi lloc web, hi ha algunes coses que podrien haver fallat:

Disponibilitat

Section titled “Disponibilitat”

L’inventari potser ja no està disponible. Ves a Wink Studio i comprova si l’estat de la “targeta” està disponible. Si no ho està, apareixerà en vermell. En aquest cas, pots esperar i potser el proveïdor el torna a posar a disposició o eliminar-lo de la teva llista.

Eliminat

Section titled “Eliminat”

L’inventari pot haver estat eliminat. Ves a Wink Studio i comprova si l’estat de la “targeta” està disponible. Si no ho està, apareixerà en vermell. En aquest cas, pots esperar i potser el proveïdor el torna a posar a disposició o eliminar-lo de la teva llista.

Personalització

Section titled “Personalització”

Potser has eliminat accidentalment la personalització que havies definit per anar juntament amb el teu inventari. Assegura’t que la personalització encara està disponible i estableix-ne una de nova si falta.

Aplicació

Section titled “Aplicació”

Això és només per a desenvolupadors web. Si has eliminat accidentalment la Aplicació ; fent que l’identificador del client ja no estigui disponible, crea una nova aplicació i utilitza el nou identificador de client per incrustar els nostres Components web.