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ą tak samo, jak z pojedynczą kartą, z jedną dodatkową funkcją:

Przeglądaj siatkę, klikając przycisk Pokaż więcej (gdy dostępne są kolejne elementy).

Podgląd siatki — *Siatka pokazująca różne typy 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

Istnieją trzy typy siatek:

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

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

Przejdź do Listy > Wyselekcjonowane z głównego paska nawigacji. W tym przykładzie użyjemy Twojej listy Ulubione. Jeśli jeszcze nic nie dodałeś do Ulubionych, przejdź do Wyszukiwania, aby dowiedzieć się jak.

Kliknij przycisk Akcje przy liście Ulubione.
Kliknij przycisk Utwórz siatkę.
Pojawi się nowe okno, w którym możesz nadać nazwę swojej siatce. Zobacz poniżej.
Kliknij przycisk OK, aby kontynuować.

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

Dostosowywanie

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

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

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:

Aktualizuj Aktualizuje konfigurację Twojej siatki.
Dodaj do WinkLinks Dodaje siatkę do Twojego konta WinkLinks.
Osadź Pokazuje, jak osadzić tę siatkę jako Siatkę na Twojej stronie.
Użyj z 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

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

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

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

Kliknij przycisk Akcje przy swoim zapisanym wyszukiwaniu.
Kliknij przycisk Utwórz siatkę.
Pojawi się nowe okno, w którym możesz nadać nazwę swojej siatce. Zobacz poniżej.

Kliknij przycisk OK, aby kontynuować.

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

Dostosowywanie

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

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

Udostępnianie

Siatka z zapisanego wyszukiwania — *Wpis siatki z zapisanego wyszukiwania z zwiniętym menu akcji*

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

Tworzenie

Utwórz siatkę rankingową, przechodząc do Siatki i klikając zakładkę Ranking. Kliknij przycisk Utwórz siatkę rankingową.

Dostosowywanie

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

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

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

Udostępnianie

*Siatka rankingowa z zwiniętym menu akcji*

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

Aktualizuj Aktualizuje konfigurację Twojej siatki.
Dodaj do WinkLinks Dodaje siatkę rankingową do Twojego konta WinkLinks.
Osadź Pokazuje, jak osadzić tę siatkę jako Siatkę na Twojej stronie.
Użyj z 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

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

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

Dalsza lektura

Dowiedz się więcej o naszej kolekcji Web Components.
Dowiedz się więcej o wtyczce Wink WordPress.