Przejdź do głównej zawartości
Academy

Komponenty Webowe

Komponenty Webowe to standard, który pozwala integrować całe funkcje JavaScript na Twojej stronie bez konieczności znajomości programowania. Dzięki tej świetnej technologii możesz łatwo osadzić ofertę Wink z minimalnym wysiłkiem. Ten artykuł przeprowadzi Cię przez naszą kolekcję komponentów webowych i pokaże, jak z nich korzystać.

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”

Zapoznaj się z naszą biblioteką 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 Javascript).

<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 Twojej oferty (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 znajdziesz dla kart, siatek i map.

Wyszukiwarka

Dział zatytułowany „Wyszukiwarka”

Wyszukiwarka świetnie współpracuje z jedną z Twoich siatek rankingowych. Pozwala użytkownikom wyszukiwać hotele i destynacje, 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ć destynację 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 w modalu.

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

<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żdej oferty, którą aktualnie wyświetlasz 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 procesu uwierzytelniania. 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, czy to na WinkLinks, czy na Twojej własnej stronie, może to oznaczać kilka problemów:

Dostępność

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

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

Usunięte

Dział zatytułowany „Usunięte”

Oferta mogła zostać usunięta. Przejdź do Wink Studio i sprawdź, czy status “karty” jest dostępny. Jeśli nie, będzie oznaczona na czerwono. W takim przypadku możesz poczekać, aż dostawca ponownie ją udostępni lub usunąć ją ze swojej listy.

Personalizacja

Dział zatytułowany „Personalizacja”

Mogłeś przypadkowo usunąć personalizację, którą zdefiniowałeś dla swojej oferty. 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ępne, utwórz nową aplikację i użyj nowego client ID do osadzenia naszych Komponentów Webowych.