Перейти к содержимому
Academy

Сетки

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

  1. Переход по страницам сетки с помощью кнопки Показать ещё (когда доступны дополнительные элементы).
Предпросмотр сетки
Сетка, показывающая несколько типов номеров

Выше приведён пример нашей сетки, показывающей список карточек типов номеров.

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

Типы сеток

Заголовок раздела «Типы сеток»

Существует три типа сеток:

  1. Сетка на основе кураторского списка.
  2. Сетка на основе сохранённого поиска.
  3. Рейтинговая сетка на основе местоположения и критериев сортировки (т.е. Рейтинговая сетка).

Сетка из кураторского списка

Заголовок раздела «Сетка из кураторского списка»

Это сетка, которая использует инвентарь, собранный в одном из ваших кураторских списков, и преобразует список в бронируемый туристический инвентарь, который вы можете показывать своим пользователям.

Создание

Заголовок раздела «Создание»

Перейдите в Инвентарь > Кураторские списки через главное меню навигации. Для примера мы используем ваш список Избранное. Если вы ещё не добавили ничего в Избранное, перейдите в Поиск, чтобы узнать как.

Создание сетки из кураторского списка
Форма создания сетки из кураторского списка
  1. Нажмите кнопку Действия на списке Избранное.
  2. Нажмите кнопку Создать сетку.
  3. Откроется новое окно, где вы сможете задать имя вашей сетки. См. ниже.
  4. Нажмите кнопку ОК, чтобы продолжить.

Ваша сетка создана. Перейдите в Инструменты > Сетки через главное меню и нажмите вкладку Кураторские сетки, чтобы увидеть вашу новую сетку.

Настройка

Заголовок раздела «Настройка»

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

  1. Дайте ей имя, чтобы вы могли помнить, о чём эта сетка.
  2. Выберите Настройку, которую хотите применить к этой сетке.
  3. Выберите начальную сторону карточки, которую пользователи увидят первой. По умолчанию это нативная сторона этого инвентаря.
  4. Выберите значок, который хотите использовать на карточке. Значок позволяет пользователям сравнивать инвентарь по агрегированному показателю, например, экологичность.
  5. Добавьте ключевые слова, разделённые запятой, которые будут использоваться веб-краулерами.
  6. Добавьте заголовки и описания на языках, которые вы хотите показывать пользователю.
  7. Нажмите кнопку Сохранить, чтобы продолжить.

Поделиться

Заголовок раздела «Поделиться»
Сетка из кураторского списка
Запись сетки из кураторского списка с свернутым меню действий

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

  • Обновить Обновляет конфигурацию вашей сетки.
  • Добавить в WinkLinks Добавляет сетку в ваш аккаунт WinkLinks.
  • Встроить Показывает, как встроить эту сетку как Grid на ваш сайт.
  • Использовать с WordPress Показывает, как использовать наш плагин WordPress для встраивания этой сетки на ваш сайт.

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

Встраивание

Заголовок раздела «Встраивание»
<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>

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

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

Сетка из сохранённого поиска

Заголовок раздела «Сетка из сохранённого поиска»

Это сетка, которая использует инвентарь из вашего сохранённого поискового запроса и преобразует результаты поиска в бронируемый туристический инвентарь, который вы можете показывать своим пользователям.

Создание

Заголовок раздела «Создание»

Перейдите в Инвентарь > Сохранённые поиски через главное меню навигации. Если вы ещё не создали сохранённый поиск, перейдите в Поиск, чтобы узнать как.

Создание сетки из сохранённого поиска
Форма создания сетки из сохранённого поиска
  1. Нажмите кнопку Действия на вашем сохранённом поиске.
  2. Нажмите кнопку Создать сетку.
  3. Откроется новое окно, где вы сможете задать имя вашей сетки. См. ниже.
  1. Нажмите кнопку ОК, чтобы продолжить.

Ваша сетка создана. Перейдите в Инструменты > Сетки через главное меню и нажмите вкладку Сетки сохранённых поисков, чтобы увидеть вашу новую сетку.

Настройка

Заголовок раздела «Настройка»

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

  1. Дайте ей имя, чтобы вы могли помнить, о чём эта сетка.
  2. Выберите Настройку, которую хотите применить к этой сетке.
  3. Выберите начальную сторону карточки, которую пользователи увидят первой. По умолчанию это нативная сторона этого инвентаря.
  4. Выберите значок, который хотите использовать на карточке. Значок позволяет пользователям сравнивать инвентарь по агрегированному показателю, например, экологичность.
  5. Добавьте ключевые слова, разделённые запятой, которые будут использоваться веб-краулерами.
  6. Добавьте заголовки и описания на языках, которые вы хотите показывать пользователю.
  7. Нажмите кнопку Сохранить, чтобы продолжить.

Поделиться

Заголовок раздела «Поделиться»
Сетка из сохранённого поиска
Запись сетки из сохранённого поиска с свернутым меню действий

Встраивание

Заголовок раздела «Встраивание»
<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>

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

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

Рейтинговая сетка

Заголовок раздела «Рейтинговая сетка»

Создание

Заголовок раздела «Создание»

Создайте рейтинговую сетку, перейдя в Инструменты > Сетки и нажав вкладку Рейтинговая сетка. Нажмите кнопку Создать рейтинговую сетку.

Настройка

Заголовок раздела «Настройка»

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

  1. Выберите направление. Например, Токио.
  2. Дайте ей имя, чтобы вы могли помнить, о чём эта сетка. Например, Экологичные отели в Токио
  3. Выберите Настройку, которую хотите применить к этой сетке.
  4. Выберите начальную сторону карточки, которую пользователи увидят первой. По умолчанию это нативная сторона этого инвентаря.
  5. Выберите характеристику, по которой сортировать объекты. Например, Экологичность.
  6. Добавьте ключевые слова, разделённые запятой, которые будут использоваться веб-краулерами.
  7. Добавьте заголовки и описания на языках, которые вы хотите показывать пользователю.
  8. Нажмите кнопку Сохранить, чтобы продолжить.

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

Поделиться

Заголовок раздела «Поделиться»
Рейтинговая сетка
Рейтинговая сетка с свернутым меню действий

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

  • Обновить Обновляет конфигурацию вашей сетки.
  • Добавить в WinkLinks Добавляет рейтинговую сетку в ваш аккаунт WinkLinks.
  • Встроить Показывает, как встроить эту сетку как Grid на ваш сайт.
  • Использовать с WordPress Показывает, как использовать наш плагин WordPress для встраивания этой карточки на ваш сайт.

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

Встраивание

Заголовок раздела «Встраивание»
<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>

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

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

API

Заголовок раздела «API»

Разработчики, которые хотят управлять сетками, могут перейти в Разработчики > API > Инвентарь.

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

Заголовок раздела «Дополнительное чтение»