Przejdź do głównej zawartości

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ą:

  1. 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.

Istnieją trzy rodzaje siatek:

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

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.

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
  1. Kliknij Actions przycisk na Favorites lista.
  2. Kliknij Create a grid przycisk.
  3. Wyświetli się nowe okno, w którym możesz nadać nazwę siatce. Zobacz poniżej.
  4. Trzask OK przycisk, aby kontynuować.

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

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

  1. Nadaj jej nazwę, aby pamiętać, czego dotyczy siatka.
  2. Wybierz Personalizacja chcesz zastosować do tej siatki.
  3. Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
  4. 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.
  5. Dodaj słowa kluczowe, rozdzielone przecinkiem, które będą używane przez Roboty sieciowe.
  6. Dodaj tytuły i opisy w językach, w których chcesz, aby użytkownicy je widzieli.
  7. Kliknij Save przycisk, aby kontynuować.
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.

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

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.

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
  1. Kliknij Actions przycisk w zapisanym wyszukiwaniu.
  2. Kliknij Create a grid przycisk.
  3. Wyświetli się nowe okno, w którym możesz nadać nazwę siatce. Zobacz poniżej.
  1. KliknijOKprzycisk, aby kontynuować.

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

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

  1. Nadaj jej nazwę, aby pamiętać, czego dotyczy siatka.
  2. Wybierz Personalizacja chcesz zastosować do tej siatki.
  3. Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
  4. 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.
  5. Dodaj słowa kluczowe, rozdzielone przecinkiem, które będą używane przez Roboty sieciowe.
  6. Dodaj tytuły i opisy w językach, w których chcesz, aby użytkownicy je widzieli.
  7. Kliknij Save przycisk, aby kontynuować.
Zapisana siatka wyszukiwania
Zapisany wpis siatki wyszukiwania ze zwiniętym menu działań
<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.

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

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

Siatka rankingowa
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.

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

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