Tinklo komponentai

Tinklo komponentai yra standartas, leidžiantis integruoti visą JavaScript funkcionalumą į jūsų svetainę, neturint programavimo žinių. Dėl šios puikios technologijos galite lengvai įterpti Wink kelionių inventorių. Šiame straipsnyje pristatome mūsų tinklo komponentų kolekciją ir parodome, kaip juos naudoti.

Įterpti Wink

Yra trys dalykai, kuriuos turite įtraukti į bet kurią puslapį, kuriame norite rodyti vieną iš mūsų tinklo komponentų.

Įtraukite mūsų stiliaus lapą.
Įtraukite mūsų JavaScript.
Įtraukite mūsų programos įkroviklį.

Stiliaus lapas

Įtraukite mūsų CSS stilius dokumento <head> dalyje.

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

JavaScript

Įtraukite mūsų JavaScript dokumento apačioje. (Rekomenduojame tiesiai prieš uždarantįjį body žymą).

<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ų tinklo komponentus.

Komponentai

Žemiau skaitykite apie mūsų komponentų biblioteką.

Programos įkroviklis

Įkroviklis atsakingas už būsenos palaikymą ir sąveikos valdymą tarp mūsų komponentų. (Įtraukite jį po mūsų JavaScript).

<html>
  <body>
    <wink-app-loader
      client-id="JŪSŲ KLIENTO ID ČIA"
      configuration-id="JŪSŲ PRITAIKYMO ID ČIA"
    ></wink-app-loader>
  </body>
</html>

Turinys įkroviklis

Turinio įkroviklis yra mūsų tinklo komponentų bibliotekos širdis. Jis atsakingas už jūsų inventoriaus rodymą (kortelės, tinkleliai, žemėlapiai).

Galimi atributai:

layout
id
sort

sort atributas galimas tik kai layout yra RANKED ir nenorite naudoti esamo reitinguoto tinklelio. Tokiais atvejais palikite id tuščią.

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ų rasite kortelėms, tinkleliams ir žemėlapiams.

Paieška

Paieška puikiai veikia kartu su vienu iš jūsų reitinguotų tinklelių. Ji leidžia vartotojams ieškoti viešbučių ir krypčių, o tinklelis atnaujinamas pagal paieškos rezultatus.

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

Lookup web component — *Paieškos tinklo komponentas*

Spustelėjus aukščiau esantį komponentą atsidaro modalas, kuriame galite įvesti ieškomą vietą arba viešbutį.

Lookup modal — *Paieškos modalas su rezultatais*

Maršrutas

Maršruto mygtukas rodo dabartinį maršrutą ant mygtuko. Paspaudus jį, pilnas maršruto pasirinkimo langas atsidaro kaip modalas.

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

Maršruto tinklo komponentas

Spustelėjus aukščiau esantį mygtuką atsidaro modalas, leidžiantis atnaujinti maršrutą.

Search modal — *Maršruto pasirinkimo modalas*

Paieška

Paieška yra tik ikona pažymėtas maršruto pasirinkimo mygtukas. Paspaudus jį, pilnas maršruto pasirinkimo langas atsidaro kaip modalas.

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

Search web component — *Paieškos tinklo komponentas*

Spustelėjus aukščiau esantį mygtuką atsidaro modalas, 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>

Itinerary formweb component — *Maršruto formos tinklo komponentas*

Keičiant maršrutą bet kuriame mūsų maršruto komponente, įvyksta maršruto atnaujinimo įvykis bet kuriam inventoriui, kuris šiuo metu rodomas puslapyje.

Paskyra

Paskyros mygtukas leidžia pridėti Wink autentifikaciją į jūsų svetainę.

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

Account web component — *Paskyros mygtuko tinklo komponentas*

Spustelėjus mygtuką, kai vartotojas nėra autentifikuotas, jis bus nukreiptas į autentifikaciją. Kai vartotojas yra autentifikuotas, rodoma vartotojo profilio piktograma.

Spustelėjus mygtuką atsidaro vartotojui skirtas išskleidžiamasis meniu.

Įterpti TripPay

Yra du dalykai, kuriuos turite įtraukti į bet kurį puslapį, kuriame norite naudoti TripPay mokėjimo tinklo komponentą.

Įtraukite mūsų stiliaus lapą.
Įtraukite mūsų JavaScript.

Stiliaus lapas

Įtraukite mūsų CSS stilius dokumento <head> dalyje.

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

JavaScript

Įtraukite mūsų JavaScript dokumento apačioje. (Rekomenduojame tiesiai prieš uždarantįjį body žymą).

<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ų tinklo komponentus.

Komponentai

Mokėjimas

Mokėjimo komponentas leidžia informuoti TripPay, kad keliautojas nori ką nors įsigyti, ir nurodyti taisykles bei kainas už tuos daiktus.

Yra vienas privalomas atributas valdikliui:

id Užsakymo sutarties identifikatorius, kurį norite vykdyti.

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

Valdiklis paruošia sutartį vykdymui ir rodo mokėjimo duomenis (1 pav.) vartotojui, kad užbaigtų užsakymą.

Payment details — *1 pav. Pavyzdinė mokėjimo forma*

Klaidos

Jei įterpiant vieną iš mūsų tinklo komponentų, tiek WinkLinks, tiek jūsų svetainėje, gaunate klaidos pranešimą, gali būti keletas priežasčių:

Prieinamumas

Inventorius gali būti nebepasiekiamas. Eikite į Wink Studio ir patikrinkite, ar “kortelės” būsena yra prieinama. Jei ne, ji bus pažymėta raudonai. Tokiu atveju galite palaukti, gal tiekėjas vėl ją padarys prieinamą, arba pašalinti ją iš savo sąrašo.

Pašalinta

Inventorius galėjo būti pašalintas. Eikite į Wink Studio ir patikrinkite, ar “kortelės” būsena yra prieinama. Jei ne, ji bus pažymėta raudonai. Tokiu atveju galite palaukti, gal tiekėjas vėl ją padarys prieinamą, arba pašalinti ją iš savo sąrašo.

Pritaikymas

Galbūt netyčia pašalinote pritaikymą, kurį nustatėte kartu su savo inventorium. Įsitikinkite, kad pritaikymas vis dar yra prieinamas, ir nustatykite naują, jei kažkuris trūksta.

Programa

Tai skirta tik žiniatinklio kūrėjams. Jei netyčia pašalinote Programą, dėl ko klientų ID nebėra, sukurkite naują programą ir naudokite naują klientų ID, kad įterptumėte mūsų tinklo komponentus.