Grids

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

Пролистайте сетку, нажав кнопкуShow more кнопка (когда больше товаров будет доступно).

Предварительный просмотр сетки — *Сетка, показывающая несколько типов комнат*

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

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

Типы сеток

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

Сетка на основетщательно отобранный список.
Сетка на основесохраненный поиск.
Сетка сетки на основе местоположения и критериев сортировки (т.е. ранжированная сетка).

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

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

Создавать

Перейти кInventory > Curated Listsиз главной панели навигации. Для этого примера мы будем использовать вашFavoritesсписок. Если вы еще ничего не добавили в свойFavorites, перейти кПоискчтобы узнать как.

Нажмите на Actions кнопка на Favorites список.
Нажмите на Create a grid кнопка.
Откроется новое окно, в котором вы сможете дать название своей сетке. См. ниже.
Нажмите OK кнопку, чтобы продолжить.

Ваша сетка создана. Перейдите кTools > Gridsиз главной навигационной панели и нажмите кнопкуCurated Gridsвкладку, чтобы увидеть новую сетку.

Настроить

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

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

Делиться

Сетка кураторского списка — *Сетевая запись курируемого списка со свернутым меню действий*

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

ОбновлятьОбновляет конфигурацию вашей сетки.
Добавить в WinkLinksДобавляет сетку в ваш аккаунт WinkLinks.
ВстроитьПоказывает, как встроить эту сетку в качествеСеткана ваш сайт.
Использовать с 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Веб-компонент и укажите ему, как получить настройки конфигурации на уровне страницы.

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

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

Создавать

Перейти кInventory > Saved searchesиз главной панели навигации. Если вы еще не создали сохраненный поиск, перейдите наПоискчтобы узнать как.

Создать сохраненную сетку поиска — *Создать сохраненную форму сетки поиска*

Нажмите на Actions кнопку на сохраненном поиске.
Нажмите на Create a grid кнопка.
Откроется новое окно, в котором вы сможете дать название своей сетке. См. ниже.

НажмитеOKкнопку, чтобы продолжить.

Ваша сетка создана. Перейдите кTools > Gridsиз главной навигационной панели и нажмите кнопкуSaved Search Gridsвкладку, чтобы увидеть новую сетку.

Настроить

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

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

Делиться

Сохраненная сетка поиска — *Сохраненная запись сетки поиска со свернутым меню действий*

Встроить

<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Веб-компонент и укажите ему, как получить настройки конфигурации на уровне страницы.

Ранжированная сетка

Создавать

Создайте ранжированную сетку, перейдя по ссылкеTools > Gridsи нажмите наRanked Gridвкладка. Нажмите наCreate ranked grid кнопка.

Настроить

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

Выберите пункт назначения. Например, Токио.
Дайте ей название, чтобы вы могли запомнить, о чем идет речь в сетке. Например, Экологичные отели в Токио
Выберите Настройка вы хотите применить к этой сетке.
Выберите начальную лицевую сторону карты, которую пользователи должны видеть первой. По умолчанию это родная лицевая сторона этого инвентаря.
Выберите, по какой характеристике сортировать объекты недвижимости. Экологичность.
Добавьте ключевые слова, разделенные запятой, которые будут использоваться Веб-сканеры.
Добавьте заголовки и описания на тех языках, которые должен видеть пользователь.
Нажмите на Save кнопку, чтобы продолжить.

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

Делиться

*Ранжированная сетка со свернутым меню действий*

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

ОбновлятьОбновляет конфигурацию вашей сетки.
Добавить в WinkLinksДобавляет ранжированную сетку в ваш аккаунт WinkLinks.
ВстроитьПоказывает, как встроить эту сетку в качествеСеткана ваш сайт.
Использовать с 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 > Инвентарь.

Дальнейшее чтение

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