Перейти до вмісту
Academy

Сітки

Сітка представляє собою список постачальників і інвентарю та відображає деталі через інтерактивний, доступний для бронювання інтерфейс сітки. Сітка підтримує відображення будь-якого інвентарю з вашого кураторського списку або збереженого пошуку. Користувач взаємодіє із сіткою так само, як і з окремою карткою, з однією додатковою функцією:

  1. Перегортайте сітку, натискаючи кнопку Показати більше (коли доступні додаткові елементи).
Попередній перегляд сітки
Сітка, що показує кілька типів номерів

Вгорі наведено приклад нашої сітки, що показує список карток типів номерів.

Далі в цій статті ми крок за кроком розглянемо, як створити, налаштувати та надати сітку вашим користувачам.

Типи сіток

Section titled “Типи сіток”

Існує три типи сіток:

  1. Сітка на основі кураторського списку.
  2. Сітка на основі збереженого пошуку.
  3. Сітка на основі локації та критеріїв сортування (тобто Ранжована сітка).

Сітка кураторського списку

Section titled “Сітка кураторського списку”

Це сітка, яка використовує інвентар, зібраний у одному з ваших кураторських списків, і перетворює список на доступний для бронювання туристичний інвентар, який ви можете показувати своїм користувачам.

Створення

Section titled “Створення”

Перейдіть у Інвентар > Кураторські списки з головного меню навігації. Для цього прикладу ми використаємо ваш список Вибране. Якщо ви ще не додали нічого до Вибраного, перейдіть до Пошуку, щоб дізнатися як.

Створення сітки кураторського списку
Форма створення сітки кураторського списку
  1. Натисніть кнопку Дії у списку Вибране.
  2. Натисніть кнопку Створити сітку.
  3. Відкриється нове вікно, де ви зможете назвати вашу сітку. Див. нижче.
  4. Натисніть кнопку OK, щоб продовжити.

Ваша сітка створена. Перейдіть у Інструменти > Сітки з головного меню навігації та натисніть вкладку Кураторські сітки, щоб побачити вашу нову сітку.

Налаштування

Section titled “Налаштування”

Форма дозволяє налаштувати вашу сітку наступними способами:

  1. Дайте їй назву, щоб ви пам’ятали, про що ця сітка.
  2. Виберіть Налаштування, які хочете застосувати до цієї сітки.
  3. Виберіть початковий вигляд картки, який користувачі побачать першими. За замовчуванням це рідний вигляд цього інвентарю.
  4. Виберіть бейдж, який хочете використовувати на картці. Бейдж дозволяє користувачам порівнювати інвентар за агрегованою метрикою, наприклад, екологічність.
  5. Додайте ключові слова, розділені комою, які будуть використовуватися веб-краулерами.
  6. Додайте заголовки та описи мовами, які хочете показувати користувачам.
  7. Натисніть кнопку Зберегти, щоб продовжити.

Поширення

Section titled “Поширення”
Сітка кураторського списку
Запис сітки кураторського списку з згорнутим меню дій

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

  • Оновити Оновлює конфігурацію вашої сітки.
  • Додати до WinkLinks Додає сітку до вашого облікового запису WinkLinks.
  • Вбудувати Показує, як вбудувати цю сітку як Grid на ваш сайт.
  • Використовувати з WordPress Показує, як використовувати наш плагін WordPress для вбудовування цієї сітки на ваш сайт.

Деякі з цих опцій ми розглянемо детальніше нижче.

Вбудовування

Section titled “Вбудовування”
<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 і вказати йому завантажити налаштування конфігурації на рівні сторінки.

Сітка збереженого пошуку

Section titled “Сітка збереженого пошуку”

Це сітка, яка використовує інвентар у вашому збереженому пошуковому запиті і перетворює результати пошуку на доступний для бронювання туристичний інвентар, який ви можете показувати своїм користувачам.

Створення

Section titled “Створення”

Перейдіть у Інвентар > Збережені пошуки з головного меню навігації. Якщо ви ще не створили збережений пошук, перейдіть до Пошуку, щоб дізнатися як.

Створення сітки збереженого пошуку
Форма створення сітки збереженого пошуку
  1. Натисніть кнопку Дії на вашому збереженому пошуку.
  2. Натисніть кнопку Створити сітку.
  3. Відкриється нове вікно, де ви зможете назвати вашу сітку. Див. нижче.
  1. Натисніть кнопку OK, щоб продовжити.

Ваша сітка створена. Перейдіть у Інструменти > Сітки з головного меню навігації та натисніть вкладку Сітки збереженого пошуку, щоб побачити вашу нову сітку.

Налаштування

Section titled “Налаштування”

Форма дозволяє налаштувати вашу сітку наступними способами:

  1. Дайте їй назву, щоб ви пам’ятали, про що ця сітка.
  2. Виберіть Налаштування, які хочете застосувати до цієї сітки.
  3. Виберіть початковий вигляд картки, який користувачі побачать першими. За замовчуванням це рідний вигляд цього інвентарю.
  4. Виберіть бейдж, який хочете використовувати на картці. Бейдж дозволяє користувачам порівнювати інвентар за агрегованою метрикою, наприклад, екологічність.
  5. Додайте ключові слова, розділені комою, які будуть використовуватися веб-краулерами.
  6. Додайте заголовки та описи мовами, які хочете показувати користувачам.
  7. Натисніть кнопку Зберегти, щоб продовжити.

Поширення

Section titled “Поширення”
Сітка збереженого пошуку
Запис сітки збереженого пошуку з згорнутим меню дій

Вбудовування

Section titled “Вбудовування”
<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 і вказати йому завантажити налаштування конфігурації на рівні сторінки.

Ранжована сітка

Section titled “Ранжована сітка”

Створення

Section titled “Створення”

Створіть ранжовану сітку, перейшовши у Інструменти > Сітки і натиснувши вкладку Ранжована сітка. Натисніть кнопку Створити ранжовану сітку.

Налаштування

Section titled “Налаштування”

Форма дозволяє налаштувати вашу ранжовану сітку наступними способами:

  1. Виберіть напрямок. Наприклад, Токіо.
  2. Дайте їй назву, щоб ви пам’ятали, про що ця сітка. Наприклад, Екологічні готелі в Токіо
  3. Виберіть Налаштування, які хочете застосувати до цієї сітки.
  4. Виберіть початковий вигляд картки, який користувачі побачать першими. За замовчуванням це рідний вигляд цього інвентарю.
  5. Виберіть характеристику, за якою сортувати об’єкти. Наприклад, Екологічність.
  6. Додайте ключові слова, розділені комою, які будуть використовуватися веб-краулерами.
  7. Додайте заголовки та описи мовами, які хочете показувати користувачам.
  8. Натисніть кнопку Зберегти, щоб продовжити.

Після збереження ранжованої сітки ви будете перенаправлені на сторінку ранжованих сіток, і ваша сітка готова до поширення.

Поширення

Section titled “Поширення”
Ранжована сітка
Ранжована сітка з згорнутим меню дій

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

  • Оновити Оновлює конфігурацію вашої сітки.
  • Додати до WinkLinks Додає ранжовану сітку до вашого облікового запису WinkLinks.
  • Вбудувати Показує, як вбудувати цю сітку як Grid на ваш сайт.
  • Використовувати з WordPress Показує, як використовувати наш плагін WordPress для вбудовування цієї картки на ваш сайт.

Деякі з цих опцій ми розглянемо детальніше нижче.

Вбудовування

Section titled “Вбудовування”
<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

Section titled “API”

Розробники, які хочуть керувати сітками, можуть перейти до Розробники > API > Інвентар.

Подальше читання

Section titled “Подальше читання”