Решетки

Решетката представлява списък с доставчици и наличности и показва детайлите чрез интерактивен, резервируем, решетъчен потребителски интерфейс. Решетката поддържа показване на всяка наличност от вашия куриран списък или запазено търсене. Потребителят взаимодейства с решетката по същия начин, по който взаимодейства с отделна карта с една допълнителна функция:

Прелистване през решетката чрез натискане на бутона Покажи още (когато има налични още елементи).

Преглед на решетка — *Решетка, показваща няколко типа стаи*

По-горе е пример на нашата решетка, показваща списък с карти на типове стаи.

Останалата част от тази статия ви превежда през създаването, персонализирането и показването на решетката на вашите потребители.

Видове решетки

Има три вида решетки:

Решетка, базирана на куриран списък.
Решетка, базирана на запазено търсене.
Решетка, базирана на локация и критерии за сортиране (т.е. Ранжирана решетка).

Решетка от куриран списък

Това е решетка, която използва наличностите, които сте събрали в един от вашите курирани списъци, и преобразува списъка в резервируема туристическа наличност, която можете да показвате на вашите потребители.

Създаване

Навигирайте до Inventory > Curated Lists от главното меню. За този пример ще използваме вашия списък Favorites. Ако все още не сте добавили нищо към вашите Favorites, посетете Търсене, за да научите как.

Натиснете бутона Действия на списъка Favorites.
Натиснете бутона Създай решетка.
Ще се появи нов прозорец, който ви позволява да наименувате вашата решетка. Вижте по-долу.
Натиснете бутона OK, за да продължите.

Вашата решетка е създадена. Навигирайте до Tools > Grids от главното меню и кликнете на таба Curated Grids, за да видите новата си решетка.

Персонализиране

Формата ви позволява да персонализирате вашата решетка по следните начини:

Дайте ѝ име, за да запомните за какво е решетката.
Изберете Персонализация, която искате да приложите към тази решетка.
Изберете началната страна на картата, която искате потребителите да виждат първо. По подразбиране това е оригиналната страна на тази наличност.
Изберете значка, която искате да използвате на картата. Значката позволява на потребителите да сравняват наличности по агрегирана метрика като еко-приятелски.
Добавете ключови думи, разделени със запетая, които ще се използват от Уеб паяци.
Добавете заглавия и описания на езиците, които искате потребителят да вижда.
Натиснете бутона Запази, за да продължите.

Споделяне

Решетка от куриран списък — *Вход за решетка от куриран списък с свито меню за действия*

По-горе виждате изображение с всички налични действия за вашата решетка:

Обнови Обновява конфигурацията на вашата решетка.
Добави към 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 Web Component и да му кажете да зареди решетка за вашия код.
Ред 11 показва как да вградите нашия Javascript във вашия сайт.
Ред 13 показва как да вградите wink-app-loader Web Component и да му кажете да зареди вашите предпочитания за конфигурация на ниво страница.

Решетка от запазено търсене

Това е решетка, която използва наличностите от вашето запазено търсене и преобразува резултатите от търсенето в резервируема туристическа наличност, която можете да показвате на вашите потребители.

Създаване

Навигирайте до Inventory > Saved searches от главното меню. Ако все още не сте създали запазено търсене, посетете Търсене, за да научите как.

Натиснете бутона Действия на вашето запазено търсене.
Натиснете бутона Създай решетка.
Ще се появи нов прозорец, който ви позволява да наименувате вашата решетка. Вижте по-долу.

Натиснете бутона OK, за да продължите.

Вашата решетка е създадена. Навигирайте до Tools > Grids от главното меню и кликнете на таба Saved Search Grids, за да видите новата си решетка.

Персонализиране

Формата ви позволява да персонализирате вашата решетка по следните начини:

Дайте ѝ име, за да запомните за какво е решетката.
Изберете Персонализация, която искате да приложите към тази решетка.
Изберете началната страна на картата, която искате потребителите да виждат първо. По подразбиране това е оригиналната страна на тази наличност.
Изберете значка, която искате да използвате на картата. Значката позволява на потребителите да сравняват наличности по агрегирана метрика като еко-приятелски.
Добавете ключови думи, разделени със запетая, които ще се използват от Уеб паяци.
Добавете заглавия и описания на езиците, които искате потребителят да вижда.
Натиснете бутона Запази, за да продължите.

Споделяне

Решетка от запазено търсене — *Вход за решетка от запазено търсене с свито меню за действия*

Вграждане

<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 Web Component и да му кажете да зареди решетка за вашия код.
Ред 11 показва как да вградите нашия Javascript във вашия сайт.
Ред 13 показва как да вградите wink-app-loader Web Component и да му кажете да зареди вашите предпочитания за конфигурация на ниво страница.

Ранжирана решетка

Създаване

Създайте ранжирана решетка, като навигирате до Tools > Grids и кликнете на таба Ranked Grid. Натиснете бутона Създай ранжирана решетка.

Персонализиране

Формата ви позволява да персонализирате вашата ранжирана решетка по следните начини:

Изберете дестинация. Напр. Токио.
Дайте ѝ име, за да запомните за какво е решетката. Напр. Еко-приятелски хотели в Токио
Изберете Персонализация, която искате да приложите към тази решетка.
Изберете началната страна на картата, която искате потребителите да виждат първо. По подразбиране това е оригиналната страна на тази наличност.
Изберете по каква характеристика да се сортират имотите. Напр. Еко-приятелски.
Добавете ключови думи, разделени със запетая, които ще се използват от Уеб паяци.
Добавете заглавия и описания на езиците, които искате потребителят да вижда.
Натиснете бутона Запази, за да продължите.

След като запазите вашата ранжирана решетка, ще бъдете пренасочени към страницата с вашите ранжирани решетки и вашата решетка вече е готова да бъде споделена със света.

Споделяне

По-горе виждате изображение с всички налични действия за вашата ранжирана решетка:

Обнови Обновява конфигурацията на вашата решетка.
Добави към 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 Web Component и да му кажете да зареди ранжирана решетка за вашия код.
Ред 11 показва как да вградите нашия Javascript във вашия сайт.
Ред 13 показва как да вградите wink-app-loader Web Component и да му кажете да зареди вашите предпочитания за конфигурация на ниво страница.

API

Разработчици, които искат да управляват решетки, могат да посетят Developers > API > Inventory.

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

Научете повече за нашата колекция от Web Components.
Научете повече за Wink WordPress плъгина.