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ąc
Show more
przycisk (gdy będzie dostępnych więcej przedmiotów).
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
Dział zatytułowany „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
Dział zatytułowany „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ć
Dział zatytułowany „Tworzyć”Przejdź doInventory > Curated Lists
z głównego paska nawigacyjnego. W tym przykładzie użyjemy TwojegoFavorites
lista.
Jeśli jeszcze niczego nie dodałeś do swojejFavorites
, idź doSzukajaby dowiedzieć się jak.
- Kliknij
Actions
przycisk naFavorites
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 > Grids
z głównego paska nawigacyjnego i kliknijCurated Grids
aby zobaczyć nową siatkę.
Dostosuj
Dział zatytułowany „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ć.
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ć
Dział zatytułowany „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
Dział zatytułowany „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ć
Dział zatytułowany „Tworzyć”Przejdź doInventory > Saved searches
z głównego paska nawigacyjnego.
Jeśli jeszcze nie utworzyłeś zapisanego wyszukiwania, przejdź doSzukajaby dowiedzieć się jak.
- 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.
- Kliknij
OK
przycisk, aby kontynuować.
Twoja siatka została utworzona. Przejdź doTools > Grids
z głównego paska nawigacyjnego i kliknijSaved Search Grids
aby zobaczyć nową siatkę.
Dostosuj
Dział zatytułowany „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ć.
Osadzać
Dział zatytułowany „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
Dział zatytułowany „Siatka rankingowa”Tworzyć
Dział zatytułowany „Tworzyć”Utwórz siatkę rankingową, przechodząc doTools > Grids
i kliknij naRanked Grid
zakładka. Kliknij naCreate ranked grid
przycisk.
Dostosuj
Dział zatytułowany „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.
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ć
Dział zatytułowany „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.
Deweloperzy chcący zarządzać siatkami mogą przejść doDeweloperzy > API > Inwentarz.
Dalsza lektura
Dział zatytułowany „Dalsza lektura”- Dowiedz się więcej o naszej kolekcjiKomponenty sieciowe.
- Dowiedz się więcej oWtyczka Wink WordPress.