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
Dział zatytułowany „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
Dział zatytułowany „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
Dział zatytułowany „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
Dział zatytułowany „Komponenty”Więcej szczegółów na temat naszej biblioteki komponentów znajdziesz poniżej.
Ładowarka aplikacji
Dział zatytułowany „Ł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
Dział zatytułowany „Ł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ć
Atrybutsort
jest dostępny tylko wtedy, gdy układ jestRANKED
i 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ę
Dział zatytułowany „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.
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>
Po kliknięciu powyższego przycisku otworzy się okno dialogowe, w którym możesz zaktualizować swój plan podróży.
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
Dział zatytułowany „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>
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>
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
Dział zatytułowany „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
Dział zatytułowany „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
Dział zatytułowany „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
Dział zatytułowany „Komponenty”Zapłata
Dział zatytułowany „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:
id
Identyfikator 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.