Карточки

Карточка представляет собой одного поставщика (например, отель или поставщика впечатлений) или инвентарь (т.е. тип номера, конференц-зал, спа и т.д.) и отображает детали через интерактивный, бронируемый интерфейс карточки. Пользователь может взаимодействовать с карточкой следующими способами:

Нажать кнопку Book.
Нажать ссылку Gallery, чтобы увидеть все фотографии и видео этого инвентаря.
Нажать ссылку Best deal, если она доступна, чтобы увидеть номер с лучшей ценой.
Нажать ссылку Hotel details, если она доступна, чтобы увидеть информацию об объекте.

Карточка поддерживает несколько лиц, чтобы минимизировать размер карточки и категоризировать данные; это делает их легко воспринимаемыми пользователем и увеличивает ваши шансы конвертировать пользователя в бронирование.

Карточка имеет два или три лица:

Карточка отеля показывает данные об объекте на лицевой стороне и лучший тип номера на обратной. Цена с обеих сторон отображает лучшую цену для отеля.
Карточка типа номера показывает данные о типе номера на лицевой стороне и данные об объекте на обратной. Цена отображает стоимость типа номера на лицевой стороне и лучшую цену для отеля на обратной.
Все остальные карточки (например, спа, ресторан и т.д.) имеют 3 лица. Пример: данные спа отображаются на лицевой стороне с лучшей ценой спа. Данные типа номера для номера с лучшей ценой — на второй стороне. Данные об объекте вместе с номером с лучшей ценой — на третьей стороне карточки.

Предпросмотр карточки — *Карточка типа номера с лицевой стороны с доступностью*

Выше приведён пример нашей карточки типа номера. Она содержит данные об объекте, отзывы и данные о номере, а также политику отмены и питание.

Далее в статье показано, как создавать, настраивать и предоставлять карточку вашим пользователям.

Создание карточки

Выше изображение из Search, показывающее некоторые действия, которые вы можете выполнить с результатами поиска. Одно из этих действий — Make a card. Нажмите эту кнопку, и вы перейдёте на страницу формы карточки, где сможете начать её настройку.

Настройка карточки

Форма позволяет настроить карточку следующими способами:

Дайте ей имя, чтобы помнить, о чём эта карточка.
Выберите Customization, которую хотите применить к этой карточке.
Выберите начальное лицо карточки, которое пользователи увидят первым. По умолчанию это нативное лицо этого инвентаря.
Выберите badge для использования на карточке. Значок позволяет пользователям сравнивать инвентарь по агрегированному показателю, например, eco-friendly.
Добавьте ключевые слова, разделённые запятыми, которые будут использоваться Web Crawlers.
Добавьте заголовки и описания на языках, которые вы хотите показать пользователю.
Выберите одно или несколько изображений, которые будут показываться при нажатии пользователем на ссылку Gallery.
Нажмите кнопку Save, чтобы продолжить.

После сохранения карточки вы будете перенаправлены на страницу карточек, и ваша карточка будет готова к распространению.

Распространение карточки

На изображении выше показаны все доступные действия для вашей карточки:

Update Обновляет конфигурацию вашей карточки.
Add to WinkLinks Добавляет карточку в ваш аккаунт WinkLinks.
Embed Показывает, как встроить эту карточку как Card на ваш сайт.
Use with WordPress Показывает, как использовать наш WordPress плагин для встраивания этой карточки на ваш сайт.

Некоторые из этих опций мы рассмотрим подробнее ниже.

Встраивание

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

Вот как встроить вашу карточку на сайт:

Строка 3 показывает, как встроить стили Wink на ваш сайт.
Строки с 6 по 9 показывают, как использовать Web Component wink-content-loader и указать ему загрузить карточку гостевого номера по вашему коду.
Строка 11 показывает, как встроить наш Javascript на ваш сайт.
Строка 13 показывает, как встроить Web Component wink-app-loader и указать ему загрузить ваши настройки конфигурации на уровне страницы.

API

Разработчики, желающие управлять карточками, могут перейти в раздел Developers > API > Inventory.

Дополнительное чтение

Узнайте больше о нашей коллекции Web Components.
Узнайте больше о Wink WordPress плагине.