Решетки

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

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

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

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

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

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

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

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

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

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

Създаване

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

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

Вашата решетка е създадена. Навигирайте до Решетки от главната навигационна лента и кликнете на таба Курирани, за да видите новата си решетка.

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

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

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

Споделяне

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

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

Актуализирай Актуализира конфигурацията на вашата решетка.
Добави към 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 и да му кажете да зареди вашите предпочитания за конфигурация на ниво страница.

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

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

Създаване

Навигирайте до Списъци > Динамични от главната навигационна лента. Ако все още не сте създали запазено търсене, отидете на Търсене, за да научите как.

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

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

Вашата решетка е създадена. Навигирайте до Решетки от главната навигационна лента и кликнете на таба Търсения, за да видите новата си решетка.

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

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

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

Споделяне

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

Вграждане

<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 и да му кажете да зареди вашите предпочитания за конфигурация на ниво страница.

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

Създаване

Създайте ранкирана решетка, като навигирате до Решетки и кликнете на таба Ранкирани. Натиснете бутона Създай ранкирана решетка.

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

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

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

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

Споделяне

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

Актуализирай Актуализира конфигурацията на вашата решетка.
Добави към 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 плъгина.