Przejdź do głównej zawartości
Academy

Siatki

Siatka reprezentuje listę dostawców i zasobów oraz udostępnia szczegóły za pomocą interaktywnego, rezerwowanego interfejsu siatki. Siatka obsługuje wyświetlanie dowolnych zasobów z Twojej wyselekcjonowanej listy lub zapisanego wyszukiwania. Użytkownik wchodzi w interakcję z siatką w taki sam sposób, jak z pojedynczą kartą, z jedną dodatkową funkcją:

  1. Przeglądanie siatki przez kliknięcie przycisku Pokaż więcej (gdy dostępne są kolejne elementy).
Podgląd siatki
Siatka pokazująca wiele typów pokoi

Powyżej znajduje się przykład naszej siatki pokazującej listę kart typów pokoi.

Reszta tego artykułu przeprowadzi Cię przez proces tworzenia, dostosowywania i udostępniania siatki Twoim użytkownikom.

Typy siatek

Dział zatytułowany „Typy siatek”

Istnieją trzy typy siatek:

  1. Siatka oparta na wyselekcjonowanej liście.
  2. Siatka oparta na zapisanym wyszukiwaniu.
  3. Siatka oparta na lokalizacji i kryteriach sortowania (tzw. siatka rankingowa).

Siatka z wyselekcjonowanej listy

Dział zatytułowany „Siatka z wyselekcjonowanej listy”

To siatka, która wykorzystuje zasoby zgromadzone w jednej z Twoich wyselekcjonowanych list i przekształca tę listę w rezerwowane zasoby podróżne, które możesz pokazać swoim użytkownikom.

Tworzenie

Dział zatytułowany „Tworzenie”

Przejdź do Inventory > Curated Lists z głównego paska nawigacji. W tym przykładzie użyjemy Twojej listy Favorites. Jeśli jeszcze nic nie dodałeś do Favorites, przejdź do Search, aby dowiedzieć się jak.

Tworzenie siatki z wyselekcjonowanej listy
Formularz tworzenia siatki z wyselekcjonowanej listy
  1. Kliknij przycisk Actions przy liście Favorites.
  2. Kliknij przycisk Create a grid.
  3. Pojawi się nowe okno, w którym możesz nadać nazwę swojej siatce. Zobacz poniżej.
  4. Kliknij przycisk OK, aby kontynuować.

Twoja siatka została utworzona. Przejdź do Tools > Grids z głównego paska nawigacji i kliknij zakładkę Curated Grids, aby zobaczyć swoją nową siatkę.

Dostosowywanie

Dział zatytułowany „Dostosowywanie”

Formularz pozwala dostosować siatkę w następujący sposób:

  1. Nadaj jej nazwę, abyś pamiętał, czego dotyczy siatka.
  2. Wybierz Dostosowanie, które chcesz zastosować do tej siatki.
  3. Wybierz początkową stronę karty, którą użytkownicy zobaczą jako pierwszą. Domyślnie jest to natywna strona tego zasobu.
  4. Wybierz odznakę, którą chcesz użyć na karcie. Odznaka pozwala użytkownikom porównywać zasoby według zbiorczego wskaźnika, takiego jak eco-friendly.
  5. Dodaj słowa kluczowe, oddzielone przecinkami, które będą używane przez Web Crawlers.
  6. Dodaj tytuły i opisy w językach, które chcesz, aby użytkownik widział.
  7. Kliknij przycisk Save, aby kontynuować.

Udostępnianie

Dział zatytułowany „Udostępnianie”
Siatka z wyselekcjonowanej listy
Wpis siatki z wyselekcjonowanej listy z zwiniętym menu akcji

Powyżej widzisz obraz z wszystkimi dostępnymi akcjami dla Twojej siatki:

  • Update Aktualizuje konfigurację siatki.
  • Add to WinkLinks Dodaje siatkę do Twojego konta WinkLinks.
  • Embed Pokazuje, jak osadzić tę siatkę jako Grid na Twojej stronie.
  • Use with WordPress Pokazuje, jak użyć naszego wtyczki WordPress, aby osadzić tę siatkę na Twojej stronie.

Niektóre z tych opcji omówimy szczegółowiej poniżej.

Osadzanie

Dział zatytułowany „Osadzanie”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Oto jak osadzić swoją siatkę na stronie:

  • Linia 3 pokazuje, jak osadzić style Wink na stronie.
  • Linie 6 do 9 pokazują, jak użyć wink-content-loader Web Component i nakazać mu pobranie siatki dla Twojego kodu.
  • Linia 11 pokazuje, jak osadzić nasz Javascript na stronie.
  • Linia 13 pokazuje, jak osadzić wink-app-loader Web Component i nakazać mu pobranie preferencji konfiguracji na poziomie strony.

Siatka z zapisanego wyszukiwania

Dział zatytułowany „Siatka z zapisanego wyszukiwania”

To siatka, która wykorzystuje zasoby z Twojego zapisanego zapytania wyszukiwania i przekształca wyniki wyszukiwania w rezerwowane zasoby podróżne, które możesz pokazać swoim użytkownikom.

Tworzenie

Dział zatytułowany „Tworzenie”

Przejdź do Inventory > Saved searches z głównego paska nawigacji. Jeśli jeszcze nie utworzyłeś zapisanego wyszukiwania, przejdź do Search, aby dowiedzieć się jak.

Tworzenie siatki z zapisanego wyszukiwania
Formularz tworzenia siatki z zapisanego wyszukiwania
  1. Kliknij przycisk Actions przy swoim zapisanym wyszukiwaniu.
  2. Kliknij przycisk Create a grid.
  3. Pojawi się nowe okno, w którym możesz nadać nazwę swojej siatce. Zobacz poniżej.
  1. Kliknij przycisk OK, aby kontynuować.

Twoja siatka została utworzona. Przejdź do Tools > Grids z głównego paska nawigacji i kliknij zakładkę Saved Search Grids, aby zobaczyć swoją nową siatkę.

Dostosowywanie

Dział zatytułowany „Dostosowywanie”

Formularz pozwala dostosować siatkę w następujący sposób:

  1. Nadaj jej nazwę, abyś pamiętał, czego dotyczy siatka.
  2. Wybierz Dostosowanie, które chcesz zastosować do tej siatki.
  3. Wybierz początkową stronę karty, którą użytkownicy zobaczą jako pierwszą. Domyślnie jest to natywna strona tego zasobu.
  4. Wybierz odznakę, którą chcesz użyć na karcie. Odznaka pozwala użytkownikom porównywać zasoby według zbiorczego wskaźnika, takiego jak eco-friendly.
  5. Dodaj słowa kluczowe, oddzielone przecinkami, które będą używane przez Web Crawlers.
  6. Dodaj tytuły i opisy w językach, które chcesz, aby użytkownik widział.
  7. Kliknij przycisk Save, aby kontynuować.

Udostępnianie

Dział zatytułowany „Udostępnianie”
Siatka z zapisanego wyszukiwania
Wpis siatki z zapisanego wyszukiwania z zwiniętym menu akcji

Osadzanie

Dział zatytułowany „Osadzanie”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Oto jak osadzić swoją siatkę na stronie:

  • Linia 3 pokazuje, jak osadzić style Wink na stronie.
  • Linie 6 do 9 pokazują, jak użyć wink-content-loader Web Component i nakazać mu pobranie siatki dla Twojego kodu.
  • Linia 11 pokazuje, jak osadzić nasz Javascript na stronie.
  • Linia 13 pokazuje, jak osadzić wink-app-loader Web Component i nakazać mu pobranie preferencji konfiguracji na poziomie strony.

Siatka rankingowa

Dział zatytułowany „Siatka rankingowa”

Tworzenie

Dział zatytułowany „Tworzenie”

Utwórz siatkę rankingową, przechodząc do Tools > Grids i klikając zakładkę Ranked Grid. Kliknij przycisk Create ranked grid.

Dostosowywanie

Dział zatytułowany „Dostosowywanie”

Formularz pozwala dostosować siatkę rankingową w następujący sposób:

  1. Wybierz cel podróży. Np. Tokio.
  2. Nadaj jej nazwę, abyś pamiętał, czego dotyczy siatka. Np. Ekologiczne hotele w Tokio
  3. Wybierz Dostosowanie, które chcesz zastosować do tej siatki.
  4. Wybierz początkową stronę karty, którą użytkownicy zobaczą jako pierwszą. Domyślnie jest to natywna strona tego zasobu.
  5. Wybierz cechę, według której chcesz sortować obiekty. Np. Ekologiczność.
  6. Dodaj słowa kluczowe, oddzielone przecinkami, które będą używane przez Web Crawlers.
  7. Dodaj tytuły i opisy w językach, które chcesz, aby użytkownik widział.
  8. Kliknij przycisk Save, aby kontynuować.

Po zapisaniu siatki rankingowej zostaniesz przekierowany do strony z siatkami rankingowymi, a Twoja siatka jest gotowa do udostępnienia światu.

Udostępnianie

Dział zatytułowany „Udostępnianie”
Siatka rankingowa
Siatka rankingowa z zwiniętym menu akcji

Powyżej widzisz obraz z wszystkimi dostępnymi akcjami dla Twojej siatki rankingowej:

  • Update Aktualizuje konfigurację siatki.
  • Add to WinkLinks Dodaje siatkę rankingową do Twojego konta WinkLinks.
  • Embed Pokazuje, jak osadzić tę siatkę jako Grid na Twojej stronie.
  • Use with WordPress Pokazuje, jak użyć naszego wtyczki WordPress, aby osadzić tę kartę na Twojej stronie.

Niektóre z tych opcji omówimy szczegółowiej poniżej.

Osadzanie

Dział zatytułowany „Osadzanie”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>


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


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Oto jak osadzić swoją siatkę na stronie:

  • Linia 3 pokazuje, jak osadzić style Wink na stronie.
  • Linie 6 do 9 pokazują, jak użyć wink-content-loader Web Component i nakazać mu pobranie siatki rankingowej dla Twojego kodu.
  • Linia 11 pokazuje, jak osadzić nasz Javascript na stronie.
  • Linia 13 pokazuje, jak osadzić wink-app-loader Web Component i nakazać mu pobranie preferencji konfiguracji na poziomie strony.

API

Dział zatytułowany „API”

Deweloperzy, którzy chcą zarządzać siatkami, mogą przejść do Developers > API > Inventory.

Dalsza lektura

Dział zatytułowany „Dalsza lektura”