Ghost

Wbudowana funkcja Code Injection w Ghost pozwala na dodawanie skryptów do globalnego <head> i </body> Twojej publikacji. Wszystkie plany Ghost obsługują wstrzykiwanie kodu, co ułatwia osadzanie komponentów Wink na dowolnej stronie lub poście.

Załaduj skrypty Wink na całej stronie

W panelu administracyjnym Ghost przejdź do Settings → Code Injection.

W polu Site Header dodaj arkusz stylów:

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

W polu Site Footer dodaj skrypt i loader aplikacji (zamień 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>

Kliknij Save.

Dodaj komponent do posta lub strony

Edytor Ghost obsługuje kartę HTML, która pozwala wstawić surowy kod HTML w dowolnym miejscu treści.

Otwórz post lub stronę w edytorze Ghost.
Wpisz /, aby otworzyć wybór kart i wybierz HTML.

Wklej kod HTML komponentu, na przykład:

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

Kliknij poza kartą, aby zobaczyć podgląd, a następnie opublikuj.

Wstrzykiwanie kodu na poziomie pojedynczej strony

Dla komponentu, który ma się pojawić tylko na jednej stronie, Ghost obsługuje także wstrzykiwanie kodu na poziomie pojedynczej strony:

Otwórz ustawienia posta lub strony (ikona koła zębatego w edytorze).
Przewiń do sekcji Code Injection.
Dodaj tag komponentu w polu Footer (globalny app-loader musi być tylko w stopce na całej stronie).
Zapisz.

Dostępne komponenty

Komponent	Tag HTML	Przeznaczenie
Content loader	`<wink-content-loader>`	Wyświetlanie kart hoteli, siatek, map
Lookup	`<wink-lookup>`	Pasek wyszukiwania destynacji
Search button	`<wink-search-button>`	Otwórz wybór planu podróży
Account button	`<wink-account-button>`	Logowanie / menu użytkownika
Itinerary button	`<wink-itinerary-button>`	Pokaż aktualny plan podróży
Itinerary picker	`<wink-itinerary-picker>`	Pełny formularz planu podróży
Shopping cart	`<wink-shopping-cart-button>`	Przycisk podsumowania koszyka

Zobacz Web Components dla pełnej referencji atrybutów.