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

Сетки

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

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

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

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

Типы сеток

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

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

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

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

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

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

Создание

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

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

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

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

Настройка

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

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

  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 показывают, как использовать Web Component wink-content-loader и указать ему загрузить сетку для вашего кода.
  • Строка 11 показывает, как встроить наш Javascript на ваш сайт.
  • Строка 13 показывает, как встроить Web Component wink-app-loader и указать ему загрузить ваши настройки конфигурации на уровне страницы.

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

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

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

Создание

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

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

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

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

Настройка

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

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

  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 показывают, как использовать Web Component wink-content-loader и указать ему загрузить сетку для вашего кода.
  • Строка 11 показывает, как встроить наш Javascript на ваш сайт.
  • Строка 13 показывает, как встроить Web Component 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 показывают, как использовать Web Component wink-content-loader и указать ему загрузить ранжированную сетку для вашего кода.
  • Строка 11 показывает, как встроить наш Javascript на ваш сайт.
  • Строка 13 показывает, как встроить Web Component wink-app-loader и указать ему загрузить ваши настройки конфигурации на уровне страницы.

API

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

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

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

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