Przejdź do głównej zawartości

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ć.

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.

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

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

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

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.

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

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 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.

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>
Komponent wyszukiwania internetowego
Komponent wyszukiwania internetowego

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

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
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 w oknie modalnym
Selektor trasy jako okno modalne

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>
Wyszukaj komponent sieciowy
Wyszukaj komponent sieciowy

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

Szukaj w oknie modalnym
Selektor trasy jako okno modalne

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
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.

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.

Przycisk konta po uwierzytelnieniu
Komponent sieciowy przycisku konta (uwierzytelniony)

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

Przycisk konta po uwierzytelnieniu
Komponent sieciowy przycisku konta (otwórz)

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

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

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

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

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.

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.

Szczegóły płatności
Rysunek 1. Przykładowy formularz płatności