Grids

Siatka przedstawia listę dostawców i zapasów oraz udostępnia szczegóły za pośrednictwem interaktywnego, możliwego do rezerwacji interfejsu użytkownika siatki. Siatka obsługuje wyświetlanie dowolnego zapasu z listy selekcjonowanej lub zapisanego wyszukiwania. Użytkownik wchodzi w interakcję z siatką w taki sam sposób, w jaki wchodzi w interakcję z osobąkartaz jedną dodatkową funkcją:

Możesz przeglądać strony siatki, klikającShow more przycisk (gdy będzie dostępnych więcej przedmiotów).

Podgląd siatki — *Siatka pokazująca wiele typów pokoi*

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

W dalszej części artykułu dowiesz się, jak tworzyć, dostosowywać i udostępniać siatkę użytkownikom.

Typy siatki

Istnieją trzy rodzaje siatek:

Siatka oparta nalista wyselekcjonowana.
Siatka oparta nazapisane wyszukiwanie.
Siatka Siatka oparta na lokalizacji i kryteriach sortowania (tj. siatka rankingowa).

Siatka listy kuratorskiej

Jest to siatka, która wykorzystuje informacje o ofercie podróży zgromadzone na jednej z Twoich list redakcyjnych i konwertuje ją na ofertę podróży, którą możesz rezerwować, a następnie wyświetlać ją swoim użytkownikom.

Tworzyć

Przejdź doInventory > Curated Listsz głównego paska nawigacyjnego. W tym przykładzie użyjemy TwojegoFavoriteslista. Jeśli jeszcze niczego nie dodałeś do swojejFavorites, idź doSzukajaby dowiedzieć się jak.

Utwórz siatkę listy kuratorów — *Utwórz formularz siatki listy selekcjonowanej*

Kliknij Actions przycisk na Favorites lista.
Kliknij Create a grid przycisk.
Wyświetli się nowe okno, w którym możesz nadać nazwę siatce. Zobacz poniżej.
Trzask OK przycisk, aby kontynuować.

Twoja siatka została utworzona. Przejdź doTools > Gridsz głównego paska nawigacyjnego i kliknijCurated Gridsaby zobaczyć nową siatkę.

Dostosuj

Formularz umożliwia dostosowanie siatki w następujący sposób:

Nadaj jej nazwę, aby pamiętać, czego dotyczy siatka.
Wybierz Personalizacja chcesz zastosować do tej siatki.
Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
Wybierz odznakę, której chcesz użyć na karcie. Odznaka pozwala użytkownikom porównywać zapasy na podstawie łącznego wskaźnika, takiego jak eco-friendly.
Dodaj słowa kluczowe, rozdzielone przecinkiem, które będą używane przez Roboty sieciowe.
Dodaj tytuły i opisy w językach, w których chcesz, aby użytkownicy je widzieli.
Kliknij Save przycisk, aby kontynuować.

Udział

Siatka listy kuratorskiej — *Wpis w siatce listy selekcjonowanej z menu zwiniętych działań*

Powyżej znajduje się obraz ze wszystkimi dostępnymi akcjami dla Twojej siatki:

AktualizacjaAktualizuje konfigurację siatki.
Dodaj do WinkLinksDodaje siatkę do Twojego konta WinkLinks.
OsadzaćPokazuje, jak osadzić tę siatkę jakoSiatkado Twojej witryny.
Użyj z WordPressemPokazuje, jak korzystać z naszegoWtyczka WordPressaby osadzić tę siatkę na swojej stronie internetowej.

Niektóre z tych opcji omawiamy bardziej szczegółowo poniżej.

Osadzać

<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ć siatkę w witrynie:

Wiersz 3 pokazuje, jak osadzić style Wink w swojej witrynie.
W wierszach od 6 do 9 pokazano, jak używaćmrugnięcie-ładowacz-treściKomponent sieciowy i poinstruuj go, aby pobrał siatkę dla swojego kodu.
Wiersz 11 pokazuje, jak osadzić nasz kod JavaScript w swojej witrynie.
Wiersz 13 pokazuje, jak osadzićwink-app-loaderKomponent internetowy i poinstruuj go, aby pobrał preferencje konfiguracji na poziomie strony.

Zapisana siatka wyszukiwania

Jest to siatka, która wykorzystuje zasoby z zapisanego zapytania wyszukiwania i konwertuje wyniki wyszukiwania na zasoby podróży możliwe do zarezerwowania, które możesz wyświetlić swoim użytkownikom.

Tworzyć

Przejdź doInventory > Saved searchesz głównego paska nawigacyjnego. Jeśli jeszcze nie utworzyłeś zapisanego wyszukiwania, przejdź doSzukajaby dowiedzieć się jak.

Utwórz zapisaną siatkę wyszukiwania — *Utwórz zapisany formularz siatki wyszukiwania*

Kliknij Actions przycisk w zapisanym wyszukiwaniu.
Kliknij Create a grid przycisk.
Wyświetli się nowe okno, w którym możesz nadać nazwę siatce. Zobacz poniżej.

KliknijOKprzycisk, aby kontynuować.

Twoja siatka została utworzona. Przejdź doTools > Gridsz głównego paska nawigacyjnego i kliknijSaved Search Gridsaby zobaczyć nową siatkę.

Dostosuj

Formularz umożliwia dostosowanie siatki w następujący sposób:

Nadaj jej nazwę, aby pamiętać, czego dotyczy siatka.
Wybierz Personalizacja chcesz zastosować do tej siatki.
Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
Wybierz odznakę, której chcesz użyć na karcie. Odznaka pozwala użytkownikom porównywać zapasy na podstawie łącznego wskaźnika, takiego jak eco-friendly.
Dodaj słowa kluczowe, rozdzielone przecinkiem, które będą używane przez Roboty sieciowe.
Dodaj tytuły i opisy w językach, w których chcesz, aby użytkownicy je widzieli.
Kliknij Save przycisk, aby kontynuować.

Udział

Zapisana siatka wyszukiwania — *Zapisany wpis siatki wyszukiwania ze zwiniętym menu działań*

Osadzać

<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ć siatkę w witrynie:

Wiersz 3 pokazuje, jak osadzić style Wink w swojej witrynie.
W wierszach od 6 do 9 pokazano, jak używaćmrugnięcie-ładowacz-treściKomponent sieciowy i poinstruuj go, aby pobrał siatkę dla swojego kodu.
Wiersz 11 pokazuje, jak osadzić nasz kod JavaScript w swojej witrynie.
Wiersz 13 pokazuje, jak osadzićwink-app-loaderKomponent internetowy i poinstruuj go, aby pobrał preferencje konfiguracji na poziomie strony.

Siatka rankingowa

Tworzyć

Utwórz siatkę rankingową, przechodząc doTools > Gridsi kliknij naRanked Gridzakładka. Kliknij naCreate ranked grid przycisk.

Dostosuj

Formularz umożliwia dostosowanie siatki rankingowej 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 Personalizacja chcesz zastosować do tej siatki.
Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
Wybierz cechę, według której chcesz sortować nieruchomości. Np. przyjazność dla środowiska.
Dodaj słowa kluczowe, rozdzielone przecinkiem, które będą używane przez Roboty sieciowe.
Dodaj tytuły i opisy w językach, w których chcesz, aby użytkownicy je widzieli.
Kliknij Save przycisk, aby kontynuować.

Po zapisaniu swojej tabeli rankingowej zostaniesz przekierowany na stronę z tabelami rankingowymi. Teraz będzie ona gotowa do udostępnienia światu.

Udział

*Siatka rankingowa z zawiniętym menu akcji*

Powyżej znajduje się obraz ze wszystkimi dostępnymi akcjami dla Twojej siatki rankingowej:

AktualizacjaAktualizuje konfigurację siatki.
Dodaj do WinkLinksDodaje tabelę rankingową do Twojego konta WinkLinks.
OsadzaćPokazuje, jak osadzić tę siatkę jakoSiatkado Twojej witryny.
Użyj z WordPressemPokazuje, jak korzystać z naszegoWtyczka WordPressaby osadzić tę kartę na swojej stronie internetowej.

Niektóre z tych opcji omawiamy bardziej szczegółowo poniżej.

Osadzać

<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ć siatkę w witrynie:

Wiersz 3 pokazuje, jak osadzić style Wink w swojej witrynie.
W wierszach od 6 do 9 pokazano, jak używaćmrugnięcie-ładowacz-treściKomponent sieciowy i poinstruuj go, aby pobrał siatkę rankingową dla swojego kodu.
Wiersz 11 pokazuje, jak osadzić nasz kod JavaScript w swojej witrynie.
Wiersz 13 pokazuje, jak osadzićwink-app-loaderKomponent internetowy i poinstruuj go, aby pobrał preferencje konfiguracji na poziomie strony.

API

Deweloperzy chcący zarządzać siatkami mogą przejść doDeweloperzy > API > Inwentarz.

Dalsza lektura

Dowiedz się więcej o naszej kolekcjiKomponenty sieciowe.
Dowiedz się więcej oWtyczka Wink WordPress.