Ghost

A Ghost beépített Code Injection funkciója lehetővé teszi, hogy szkripteket adj hozzá a kiadványod globális <head> és </body> részéhez. Minden Ghost csomag támogatja a kódbeillesztést, így egyszerűen ágyazhatsz be Wink komponenseket bármely oldalra vagy bejegyzésbe.

Wink szkriptek betöltése az egész oldalon

A Ghost Admin panelen menj a Beállítások → Code Injection menüpontra.

A Site Header mezőbe illeszd be a stíluslapot:

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

A Site Footer mezőbe illeszd be a szkriptet és az alkalmazás betöltőt (cseréld ki a YOUR_CLIENT_ID értéket):

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

Kattints a Mentés gombra.

Komponens hozzáadása bejegyzéshez vagy oldalhoz

A Ghost szerkesztő támogatja az HTML kártyát, amellyel nyers HTML-t illeszthetsz be a tartalmad bármely pontjára.

Nyisd meg a bejegyzést vagy oldalt a Ghost szerkesztőben.
Írd be a / jelet a kártyaválasztó megnyitásához, majd válaszd az HTML opciót.

Illeszd be a komponens HTML kódját, például:

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

Kattints a kártyán kívülre az előnézethez, majd publikáld.

Oldalankénti kódbeillesztés

Ha egy komponens csak egy adott oldalon jelenjen meg, a Ghost támogatja az oldalankénti kódbeillesztést is:

Nyisd meg a bejegyzés vagy oldal beállításait (fogaskerék ikon a szerkesztőben).
Görgess le a Code Injection részhez.
Add hozzá a komponens tageket a Footer mezőbe (a globális app-loader csak az oldal összes oldalán megjelenő láblécben kell legyen).
Mentsd el.

Elérhető komponensek

Komponens	HTML tag	Cél
Tartalom betöltő	`<wink-content-loader>`	Szállodakártyák, rácsok, térképek megjelenítése
Kereső	`<wink-lookup>`	Úticél kereső sáv
Kereső gomb	`<wink-search-button>`	Útiterv választó megnyitása
Fiók gomb	`<wink-account-button>`	Bejelentkezés / felhasználói menü
Útiterv gomb	`<wink-itinerary-button>`	Aktuális útiterv megjelenítése
Útiterv választó	`<wink-itinerary-picker>`	Teljes útiterv űrlap
Bevásárlókosár	`<wink-shopping-cart-button>`	Kosár összefoglaló gomb

A teljes attribútumreferenciáért lásd a Web Components oldalt.