Карточки

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

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

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

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

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

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

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

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

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

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

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

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

Дайте ей имя, чтобы помнить, о чём эта карточка.
Выберите Настройку, которую хотите применить к этой карточке.
Выберите начальное лицо карточки, которое пользователи увидят первым. По умолчанию это нативное лицо данного инвентаря.
Выберите значок, который хотите использовать на карточке. Значок позволяет пользователям сравнивать инвентарь по агрегированному показателю, например, экологичность.
Добавьте ключевые слова, разделённые запятой, которые будут использоваться веб-краулерами.
Добавьте заголовки и описания на языках, которые вы хотите показать пользователю.
Выберите одно или несколько изображений, которые будут показываться при нажатии на ссылку 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 показывают, как использовать веб-компонент wink-content-loader и указать ему загрузить карточку гостевого номера для вашего кода.
Строка 11 показывает, как встроить наш Javascript на сайт.
Строка 13 показывает, как встроить веб-компонент wink-app-loader и указать ему загрузить ваши настройки конфигурации на уровне страницы.

API

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

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

Узнайте больше о нашей коллекции веб-компонентов.
Узнайте больше о плагине Wink для WordPress.