Cards
Karta reprezentuje pojedynczego dostawcę (np. hotel lub dostawcę doświadczeń) lub inwentarz (np. typ pokoju, salę konferencyjną, spa itp.) i ujawnia szczegóły za pośrednictwem interaktywnego, rezerwowalnego interfejsu użytkownika karty. Użytkownik może wchodzić w interakcję z kartą w następujący sposób:
- Kliknij
Book
przycisk. - Kliknij
Gallery
link umożliwiający obejrzenie wszystkich zdjęć i filmów dla tego inwentarza. - Kliknij
Best deal
link (jeśli dostępny) umożliwiający sprawdzenie pokoju w najlepszej cenie. - Kliknij
Hotel details
link (jeśli dostępny) umożliwiający zapoznanie się z informacjami o nieruchomości.
Karta obsługuje wiele stron, co pozwala zminimalizować jej rozmiar i kategoryzować dane. Dzięki temu użytkownik może je łatwo wykorzystać, a Ty masz większą szansę na dokonanie rezerwacji przez użytkownika.
Karta ma dwie lub trzy strony:
- Karta hotelowa pokazuje dane obiektu z przodu i najlepszy typ pokoju z tyłu. Cena po obu stronach pokazuje najlepszą cenę dla hotelu.
- Karta typu pokoju pokazuje dane typu pokoju z przodu i dane nieruchomości z tyłu. Cena wyświetla cenę typu pokoju z przodu i najlepszą cenę dla hotelu z tyłu.
- Wszystkie inne karty (np. restauracja spa itp.) mają 3 strony. Przykład: Dane spa są wyświetlane na stronie głównej z najlepszą ceną spa. Dane typu pokoju dla pokoju w najlepszej cenie są na drugiej stronie. Dane nieruchomości wraz z pokojem w najlepszej cenie są na trzeciej stronie karty.
Powyżej znajduje się przykład naszej karty typu pokoju. Zawiera ona dane dotyczące nieruchomości, recenzji i pokoju, a także zasady anulowania rezerwacji i posiłki.
W dalszej części artykułu dowiesz się, jak utworzyć, dostosować i udostępnić kartę użytkownikom.
Utwórz kartę
Dział zatytułowany „Utwórz kartę”Powyżej znajduje się zdjęcie pobrane zSzukaji pokazuje niektóre rzeczy, które możesz zrobić z wynikami wyszukiwania. Jedną z tych czynności jestMake a card
.
Kliknij ten przycisk, a zostaniesz przekierowany na stronę formularza karty, gdzie możesz rozpocząć personalizację swojej karty.
Dostosuj kartę
Dział zatytułowany „Dostosuj kartę”Formularz umożliwia personalizację karty w następujący sposób:
- Nadaj jej nazwę, aby pamiętać, czego dotyczy karta.
- Wybierz Personalizacja chcesz złożyć wniosek o tę kartę.
- Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
- Wybierz badge 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.
- Wybierz jeden lub więcej obrazów, które będą wyświetlane po kliknięciu przez użytkownika
Gallery
połączyć. - Kliknij
Save
przycisk, aby kontynuować.
Po zapisaniu karty zostaniesz przekierowany na stronę kart. Twoja karta będzie gotowa, aby pokazać ją światu.
Udostępnij kartę
Dział zatytułowany „Udostępnij kartę”Powyżej znajduje się obraz ze wszystkimi dostępnymi akcjami dla Twojej karty:
- AktualizacjaAktualizuje konfigurację karty.
- Dodaj do WinkLinksDodaje kartę do Twojego konta WinkLinks.
- OsadzaćPokazuje, jak osadzić tę kartę jakoKartado 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="GUEST_ROOM" id="2de7ee9c-61c9-11ef-9722-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ć kartę na swojej stronie:
- 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 internetowy i poproś go o pobranie karty pokoju gościnnego na podstawie Twojego 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ć kartami 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.