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:

KliknijBook przycisk.
KliknijGallerylink umożliwiający obejrzenie wszystkich zdjęć i filmów dla tego inwentarza.
KliknijBest deallink (jeśli dostępny) umożliwiający sprawdzenie pokoju w najlepszej cenie.
KliknijHotel detailslink (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.

Podgląd karty — *Karta typu pokoju skierowana do przodu z informacją o dostępności*

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ę

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ę

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ę

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ć

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

API

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

Dalsza lektura

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