Žiniatinklio komponentai

Žiniatinklio komponentaiyra standartas, leidžiantis integruoti visas „Javascript“ funkcijas į savo svetainę nemokant programuoti. Dėl šios puikios technologijos galite labai lengvai įterpti „Wink“ kelionių inventorių. Šiame straipsnyje pateikiama išsami informacija apie mūsų žiniatinklio komponentų kolekciją ir parodyta, kaip juos naudoti.

Įterpti mirktelėjimą

Į bet kurį puslapį, kuriame norite rodyti vieną iš mūsų žiniatinklio komponentų, turite įtraukti tris dalykus.

Įtraukite mūsų stiliaus lapą.
Įtraukite mūsų „Javascript“.
Įtraukite mūsų programų įkroviklį.

Stiliaus lapas

Įtraukite mūsų CSS stilius į savo dokumento antraštę.

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

Javascript

Įtraukite mūsų „Javascript“ kodą dokumento apačioje. (Rekomenduojame iš karto virš galinės teksto žymos).

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

Jūsų svetainė dabar paruošta ir gali rodyti mūsų žiniatinklio komponentus.

Komponentai

Skaitykite apie mūsų komponentų biblioteką žemiau.

Programų įkėlėjas

Įkroviklis yra atsakingas už būsenos palaikymą ir mūsų komponentų sąveikos valdymą.Įtraukite jį po mūsų „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>

Turinio įkėlėjas

Turinio įkėlimo programa yra mūsų žiniatinklio komponentų bibliotekos pagrindas. Ji atsakinga už jūsų inventoriaus (kortelių, tinklelių, žemėlapių) rodymą.

Galimi atributai:

išdėstymas
id
rūšiuoti

Atributassortgalima tik tada, kai išdėstymas yraRANKEDir nenorite naudoti esamos reitinguotos lentelės. Tokiais atvejais palikiteidtuščias.

Galimi išdėstymo tipai:

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

Galimi rūšiavimo tipai:

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>

Pavyzdžių galima rastikortelės,tinkleliaiiržemėlapiai.

Paieška

Paieška puikiai veikia kartu su vienu iš jūsų reitinguotų tinklelių. Tai leidžia jūsų vartotojams ieškoti viešbučio ir kelionės tikslo, o tinklelis atnaujinamas pagal jų paieškos rezultatą.

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

Spustelėjus aukščiau esantį komponentą, atidaromas modalinis langas, kuriame galite įvesti ieškomą kelionės tikslą arba viešbutį.

Maršrutas

Maršruto mygtukas rodo dabartinį maršrutą. Jį spustelėjus, modaliniame lange atidaromas visas maršruto parinkiklis.

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

Maršruto žiniatinklio komponentas

Paspaudus aukščiau esantį mygtuką, atidaromas modalinis langas, leidžiantis atnaujinti maršrutą.

Paieška

Paieška yra tik piktogramomis pateikiamas maršruto parinkiklio mygtukas. Jį spustelėjus, visas maršruto parinkiklis rodomas kaip modalinis langas.

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

Paspaudus aukščiau esantį mygtuką, atidaromas modalinis langas, leidžiantis atnaujinti maršrutą.

Maršruto forma

Maršruto komponentas rodo maršruto formą, su kuria vartotojai gali sąveikauti.

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

*Maršruto formos žiniatinklio komponentas*

Pakeitus maršrutą bet kuriame mūsų maršruto komponente, suaktyvinamas maršruto atnaujinimo įvykis bet kuriame puslapyje rodomame inventoriuje.

Paskyra

Paskyros mygtukas leidžia jums pridėti „Wink“ autentifikavimą prie savo svetainės.

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

Paskyros žiniatinklio komponentas — *Paskyros mygtuko žiniatinklio komponentas*

Paspaudus mygtuką, kai vartotojo tapatybė neidentifikuota, jis bus nukreiptas autentifikuotis. Kai vartotojas autentifikuojamas, rodoma vartotojo profilio piktograma.

Paspaudus mygtuką, atidaromas išskleidžiamasis meniu, skirtas konkrečiam vartotojui.

Įterpti „TripPay“

Į bet kurį puslapį, kuriame norite naudoti „TripPay“ mokėjimų žiniatinklio komponentą, turite įtraukti du dalykus.

Įtraukite mūsų stiliaus lapą.
Įtraukite mūsų „Javascript“.

Stiliaus lapas

Įtraukite mūsų CSS stilius į savo dokumento antraštę.

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

Javascript

Įtraukite mūsų „Javascript“ kodą dokumento apačioje. (Rekomenduojame iš karto virš galinės teksto žymos).

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

Jūsų svetainė dabar paruošta ir gali rodyti mūsų žiniatinklio komponentus.

Komponentai

Mokėjimas

Mokėjimo komponentas leidžia informuoti „TripPay“, kad keliautojas nori ką nors įsigyti, ir sužinoti šių prekių taisykles bei kainas.

Valdikliui yra vienas privalomas atributas:

idNorimos sudaryti rezervavimo sutarties identifikatorius.

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

Valdiklis parengia sutartį vykdymui ir rodo mokėjimo informaciją(1 pav.)vartotojui, kad užbaigtų užsakymą.

Mokėjimo informacija — *1 pav. Mokėjimo formos pavyzdys*