Ghost

תכונת הזרקת קוד המובנית של Ghost מאפשרת לך להוסיף סקריפטים ל-<head> ו-</body> הגלובליים של הפרסום שלך. כל תוכניות Ghost תומכות בהזרקת קוד, מה שמקל על הטמעת רכיבי 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>

לחץ מחוץ לכרטיסייה לתצוגה מקדימה, ואז פרסם.

הזרקת קוד לפי דף

לרכיב שצריך להופיע רק בדף אחד, Ghost תומך גם בהזרקת קוד לפי דף:

פתח את הגדרות הפוסט או הדף (סמל גלגל השיניים בעורך).
גלול אל Code Injection.
הוסף את תג הרכיב בשדה Footer (טוען האפליקציה הגלובלי צריך להיות רק בכותרת תחתונה של האתר).
שמור.

רכיבים זמינים

רכיב	תג HTML	מטרה
טוען תוכן	`<wink-content-loader>`	הצגת כרטיסי מלון, רשתות, מפות
חיפוש	`<wink-lookup>`	שורת חיפוש ליעדים
כפתור חיפוש	`<wink-search-button>`	פתיחת בורר מסלול
כפתור חשבון	`<wink-account-button>`	כניסה / תפריט משתמש
כפתור מסלול	`<wink-itinerary-button>`	הצגת המסלול הנוכחי
בורר מסלול	`<wink-itinerary-picker>`	טופס מסלול מלא
עגלת קניות	`<wink-shopping-cart-button>`	כפתור סיכום עגלה

ראה Web Components למידע מלא על התכונות.