Komponenty sieciowe

Komponenty siecioweto standard, który pozwala na integrację wszystkich funkcji JavaScript w witrynie bez konieczności znajomości kodowania. Dzięki tej fajnej technologii możesz osadzić Wink travel inventory z niewielkim zamieszaniem. Ten artykuł przeprowadzi Cię przez naszą kolekcję komponentów internetowych i pokaże Ci, jak ich używać.

Osadź mrugnięcie

Istnieją trzy rzeczy, które musisz uwzględnić na każdej stronie, na której chcesz wyświetlić któryś z naszych komponentów internetowych.

Dołącz nasz arkusz stylów.
Dodaj nasz JavaScript.
Dołącz nasz moduł ładujący aplikacje.

Arkusz stylów

Umieść nasze style CSS w nagłówku swojego dokumentu.

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

JavaScript

Umieść nasz kod JavaScript na dole dokumentu. (Zalecamy umieszczenie go tuż nad końcowym znacznikiem body).

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

Twoja witryna jest już gotowa i może wyświetlać nasze komponenty internetowe.

Komponenty

Więcej szczegółów na temat naszej biblioteki komponentów znajdziesz poniżej.

Ładowarka aplikacji

Moduł ładujący jest odpowiedzialny za przechowywanie stanu i zarządzanie interakcją między naszymi komponentami. (Umieść go poniżej naszego 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>

Ładowarka treści

Ładowarka treści jest sercem naszej biblioteki komponentów internetowych. Jest odpowiedzialna za wyświetlanie Twojego inwentarza (kart, siatek, map).

Dostępne atrybuty:

układ
id
sortować

Atrybutsortjest dostępny tylko wtedy, gdy układ jestRANKEDi nie chcesz używać istniejącej siatki rankingowej. W takich przypadkach pozostawid pusty.

Dostępne typy układów:

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

Dostępne typy sortowania:

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>

Próbki można znaleźć dlakarty,siatki I mapy.

Spojrzeć w górę

Lookup działa świetnie razem z jedną z Twoich siatek rankingowych. Umożliwia użytkownikom wyszukiwanie hoteli i miejsc docelowych, a siatka aktualizuje się w odpowiedzi na ich wyniki wyszukiwania.

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

Po kliknięciu powyższego komponentu otwiera się okno modalne, w którym możesz wpisać nazwę miejsca docelowego lub hotelu, którego szukasz.

Okno modalne wyszukiwania — *Okno dialogowe wyszukiwania z wynikami*

Trasa

Przycisk trasy pokazuje aktualną trasę na przycisku. Po kliknięciu go, pełny selektor trasy wyświetla się jako okno modalne.

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

Komponent sieciowy trasy

Po kliknięciu powyższego przycisku otworzy się okno dialogowe, w którym możesz zaktualizować swój plan podróży.

Szukaj

Szukaj to przycisk z ikoną w selektorze tras. Po kliknięciu go, pełny selektor tras wyświetla się jako okno modalne.

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

Po kliknięciu powyższego przycisku otworzy się okno dialogowe, w którym możesz zaktualizować swój plan podróży.

Formularz trasy

Komponent trasy wyświetla formularz trasy, z którym użytkownicy mogą wchodzić w interakcję.

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

*Komponent internetowy formularza trasy*

Zmiana dowolnego komponentu planu podróży powoduje aktywację zdarzenia aktualizacji planu podróży dla dowolnego asortymentu aktualnie wyświetlanego na stronie.

Konto

Przycisk konta umożliwia dodanie uwierzytelniania Wink do swojej witryny.

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

Komponent sieciowy konta — *Komponent sieciowy przycisku konta*

Kliknięcie przycisku, gdy użytkownik nie jest uwierzytelniony, przekieruje użytkownika do uwierzytelnienia. Gdy użytkownik jest uwierzytelniony, wyświetlana jest ikona profilu użytkownika.

Po kliknięciu przycisku otwiera się rozwijana lista przypisana do konkretnego użytkownika.

Osadź TripPay

Na każdej stronie, na której chcesz użyć komponentu płatności TripPay, musisz uwzględnić dwie rzeczy.

Dołącz nasz arkusz stylów.
Dodaj nasz JavaScript.

Arkusz stylów

Umieść nasze style CSS w nagłówku swojego dokumentu.

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

JavaScript

Umieść nasz kod JavaScript na dole dokumentu. (Zalecamy umieszczenie go tuż nad końcowym znacznikiem body).

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

Twoja witryna jest już gotowa i może wyświetlać nasze komponenty internetowe.

Komponenty

Zapłata

Komponent płatności umożliwia poinformowanie TripPay, że podróżny chce coś kupić, a także zapoznanie się z zasadami i cenami tych przedmiotów.

Widżet ma jeden wymagany atrybut:

idIdentyfikator umowy rezerwacyjnej, którą chcesz wykonać.

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

Aby dowiedzieć się, jak wygenerować umowę rezerwacjiid, przeczytaj przewodnik:Integracja z TripPay.

Widget przygotowuje umowę do realizacji i wyświetla szczegóły płatności(Rysunek 1)użytkownikowi w celu sfinalizowania rezerwacji.