Ghost

Вградената функция на Ghost за Code Injection ви позволява да добавяте скриптове в глобалния <head> и </body> на вашата публикация. Всички планове на Ghost поддържат code injection, което улеснява вграждането на Wink компоненти на всяка страница или публикация.

Зареждане на Wink скриптове за целия сайт

В администраторския панел на Ghost отидете на Settings → Code Injection.

В полето Site Header добавете стиловия файл:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

В полето Site Footer добавете скрипта и зареждача на приложението (заменете YOUR_CLIENT_ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Натиснете Save.

Добавяне на компонент в публикация или страница

Редакторът на Ghost поддържа HTML карта, която ви позволява да вмъквате суров HTML навсякъде в съдържанието си.

Отворете публикацията или страницата в редактора на Ghost.
Въведете /, за да отворите избора на карти, и изберете HTML.

Поставете HTML кода на компонента, например:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Кликнете извън картата, за да видите визуализация, след което публикувайте.

Code injection за отделна страница

За компонент, който трябва да се показва само на една страница, Ghost поддържа и code injection за отделна страница:

Отворете настройките на публикацията или страницата (иконата на зъбно колело в редактора).
Превъртете до Code Injection.
Добавете тагa на компонента в полето Footer (глобалният app-loader трябва да е само в сайта за целия сайт).
Запазете.

Налични компоненти

Компонент	HTML таг	Цел
Content loader	`<wink-content-loader>`	Показва хотелски карти, мрежи, карти
Lookup	`<wink-lookup>`	Търсачка за дестинации
Search button	`<wink-search-button>`	Отваря избор на маршрут
Account button	`<wink-account-button>`	Вход / меню на потребителя
Itinerary button	`<wink-itinerary-button>`	Показва текущия маршрут
Itinerary picker	`<wink-itinerary-picker>`	Пълен формуляр за маршрут
Shopping cart	`<wink-shopping-cart-button>`	Бутон за резюме на количката

Вижте Web Components за пълния справочник на атрибутите.