Przejdź do głównej zawartości
Wink

Komponenty Webowe

Komponenty Webowe to standard, który pozwala na integrację całych funkcji JavaScript na Twojej stronie bez konieczności znajomości programowania. Dzięki tej świetnej technologii możesz osadzić zasoby podróżnicze Wink z minimalnym wysiłkiem. Ten artykuł przeprowadzi Cię przez naszą kolekcję komponentów webowych i pokaże, jak ich używać.

Osadź Wink

Dział zatytułowany „Osadź Wink”

Istnieją trzy rzeczy, które musisz dołączyć do każdej strony, na której chcesz wyświetlić jeden z naszych komponentów webowych.

  1. Dołącz nasz arkusz stylów.
  2. Dołącz nasz Javascript.
  3. Dołącz nasz loader aplikacji.

Arkusz stylów

Dział zatytułowany „Arkusz stylów”

Dołącz nasze style CSS w sekcji head dokumentu.

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

Javascript

Dział zatytułowany „Javascript”

Dołącz nasz Javascript na dole dokumentu. (Zalecamy tuż przed końcowym tagiem </body>).

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

Twoja strona jest teraz gotowa i może wyświetlać nasze komponenty webowe.

Komponenty

Dział zatytułowany „Komponenty”

Przeczytaj o naszej bibliotece komponentów poniżej.

Loader aplikacji

Dział zatytułowany „Loader aplikacji”

Loader odpowiada za utrzymanie stanu i zarządzanie interakcją między naszymi komponentami. (Dołącz go poniżej naszego Javascriptu).

<html>
  <body>
    <wink-app-loader
      client-id="TUTAJ WPISZ SWÓJ CLIENT ID"
      configuration-id="TUTAJ WPISZ SWÓJ ID PERSONALIZACJI"
    ></wink-app-loader>
  </body>
</html>

Loader treści

Dział zatytułowany „Loader treści”

Loader treści jest sercem naszej biblioteki komponentów webowych. Odpowiada za wyświetlanie Twojego zasobu (karty, siatki, mapy).

Dostępne atrybuty:

  • layout
  • id
  • sort

Atrybut sort jest dostępny tylko, gdy layout to RANKED i nie chcesz używać istniejącej siatki rankingowej. W takich przypadkach pozostaw id puste.

Dostępne typy layoutu:

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

Przykłady można znaleźć dla kart, siatek i map.

Wyszukiwarka

Dział zatytułowany „Wyszukiwarka”

Wyszukiwarka świetnie współpracuje z jedną z Twoich siatek rankingowych. Pozwala użytkownikom wyszukiwać hotel i miejsce docelowe, a siatka aktualizuje się w odpowiedzi na wyniki wyszukiwania.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Komponent webowy Wyszukiwarka
Komponent webowy Wyszukiwarka

Kliknięcie powyższego komponentu otwiera modal, który pozwala wpisać miejsce docelowe lub hotel, którego szukasz.

Modal wyszukiwarki
Modal wyszukiwarki z wynikami

Plan podróży

Dział zatytułowany „Plan podróży”

Przycisk planu podróży pokazuje aktualny plan na przycisku. Po kliknięciu wyświetla się pełny wybór planu podróży jako modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Komponent webowy Plan podróży
Komponent webowy Plan podróży

Kliknięcie powyższego przycisku otwiera modal, który pozwala zaktualizować plan podróży.

Modal wyszukiwania
Wybór planu podróży jako modal

Wyszukiwanie

Dział zatytułowany „Wyszukiwanie”

Wyszukiwanie to przycisk wyłącznie z ikoną planu podróży. Po kliknięciu wyświetla się pełny wybór planu podróży jako modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Komponent webowy Wyszukiwanie
Komponent webowy Wyszukiwanie

Kliknięcie powyższego przycisku otwiera modal, który pozwala zaktualizować plan podróży.

Modal wyszukiwania
Wybór planu podróży jako modal

Formularz planu podróży

Dział zatytułowany „Formularz planu podróży”

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Komponent webowy Formularz planu podróży
Komponent webowy Formularz planu podróży

Zmiana planu podróży w dowolnym z naszych komponentów planu wywołuje zdarzenie aktualizacji planu dla każdego zasobu, który jest aktualnie wyświetlany na stronie.

Konto

Dział zatytułowany „Konto”

Przycisk konta pozwala dodać uwierzytelnianie Wink do Twojej strony.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Komponent webowy Przycisk konta
Komponent webowy Przycisk konta

Kliknięcie przycisku, gdy użytkownik nie jest uwierzytelniony, przekierowuje go do uwierzytelnienia. Gdy użytkownik jest uwierzytelniony, wyświetla ikonę profilu użytkownika.

Przycisk konta po uwierzytelnieniu
Komponent webowy Przycisk konta (uwierzytelniony)

Po kliknięciu przycisku otwiera się rozwijane menu specyficzne dla użytkownika.

Przycisk konta po uwierzytelnieniu (otwarty)
Komponent webowy Przycisk konta (otwarty)

Osadź TripPay

Dział zatytułowany „Osadź TripPay”

Istnieją dwie rzeczy, które musisz dołączyć do każdej strony, na której chcesz używać komponentu płatności TripPay.

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

Arkusz stylów

Dział zatytułowany „Arkusz stylów”

Dołącz nasze style CSS w sekcji head dokumentu.

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

Javascript

Dział zatytułowany „Javascript”

Dołącz nasz Javascript na dole dokumentu. (Zalecamy tuż przed końcowym tagiem <body>).

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

Twoja strona jest teraz gotowa i może wyświetlać nasze komponenty webowe.

Komponenty

Dział zatytułowany „Komponenty”

Płatność

Dział zatytułowany „Płatność”

Komponent płatności pozwala poinformować TripPay, że podróżny chce coś kupić oraz określa zasady i ceny tych pozycji.

Jest jeden wymagany atrybut widgetu:

  • id Identyfikator kontraktu rezerwacji, który chcesz wykonać.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget przygotowuje kontrakt do wykonania i wyświetla użytkownikowi szczegóły płatności (Rysunek 1), aby sfinalizować rezerwację.

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

Błędy

Dział zatytułowany „Błędy”

Jeśli pojawi się komunikat o błędzie podczas osadzania jednego z naszych komponentów webowych, zarówno na WinkLinks, jak i na Twojej własnej stronie, może to oznaczać kilka problemów:

Dostępność

Dział zatytułowany „Dostępność”

Zasób może być już niedostępny. Przejdź do Wink Studio i sprawdź, czy status “karty” jest dostępny. Jeśli nie, będzie oznaczony na czerwono. W takim przypadku możesz poczekać, aż dostawca ponownie udostępni zasób lub usunąć go ze swojej listy.

Usunięty

Dział zatytułowany „Usunięty”

Zasób mógł zostać usunięty. Przejdź do Wink Studio i sprawdź, czy status “karty” jest dostępny. Jeśli nie, będzie oznaczony na czerwono. W takim przypadku możesz poczekać, aż dostawca ponownie udostępni zasób lub usunąć go ze swojej listy.

Personalizacja

Dział zatytułowany „Personalizacja”

Mogłeś przypadkowo usunąć personalizację, którą zdefiniowałeś dla swojego zasobu. Upewnij się, że personalizacja jest nadal dostępna i ustaw nową, jeśli którejś brakuje.

Aplikacja

Dział zatytułowany „Aplikacja”

To dotyczy tylko programistów webowych. Jeśli przypadkowo usunąłeś Aplikację, przez co client ID nie jest już dostępny, utwórz nową aplikację i użyj nowego client ID do osadzenia naszych Komponentów Webowych.