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 > Инвентарь.
Дальнейшее чтение
Заголовок раздела «Дальнейшее чтение»- Узнайте больше о нашей коллекцииВеб-компоненты.
- Узнайте больше оWink WordPress плагин.