Ghost

Pinapayagan ka ng built-in na Code Injection na tampok ng Ghost na magdagdag ng mga script sa global na <head> at </body> ng iyong publication. Sinusuportahan ng lahat ng plano ng Ghost ang code injection, kaya madali mong ma-embed ang mga Wink component sa anumang pahina o post.

I-load ang mga Wink script sa buong site

Sa Ghost Admin panel, pumunta sa Settings → Code Injection.

Sa kahon ng Site Header, idagdag ang stylesheet:

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

Sa kahon ng Site Footer, idagdag ang script at application loader (palitan ang 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>

I-click ang Save.

Magdagdag ng component sa isang post o pahina

Sinusuportahan ng editor ng Ghost ang isang HTML card na nagpapahintulot sa iyo na magpasok ng raw HTML kahit saan sa iyong nilalaman.

Buksan ang post o pahina sa Ghost editor.
I-type ang / para buksan ang card picker at piliin ang HTML.

I-paste ang component HTML, halimbawa:

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

I-click sa labas ng card para makita ang preview, pagkatapos ay i-publish.

Per-page code injection

Para sa component na dapat lumabas lamang sa isang pahina, sinusuportahan din ng Ghost ang per-page code injection:

Buksan ang settings ng post o pahina (icon ng gear sa editor).
Mag-scroll sa Code Injection.
Idagdag ang component tag sa field na Footer (ang global app-loader ay kailangang nasa site-wide footer lamang).
I-save.

Mga available na component

Component	HTML tag	Layunin
Content loader	`<wink-content-loader>`	Ipakita ang mga hotel card, grids, mapa
Lookup	`<wink-lookup>`	Search bar para sa mga destinasyon
Search button	`<wink-search-button>`	Buksan ang itinerary picker
Account button	`<wink-account-button>`	Mag-sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Ipakita ang kasalukuyang itinerary
Itinerary picker	`<wink-itinerary-picker>`	Buong itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Button para sa buod ng cart

Tingnan ang Web Components para sa buong attribute reference.