Squarespace

Squarespace תומך ב-HTML ו-JavaScript מותאמים אישית, מה שאומר שניתן להטמיע כל רכיב ווב של Wink ישירות באתר שלך ללא תוסף. מדריך זה מראה כיצד לטעון את סקריפטי Wink באתר כולו ואז למקם רכיבים בעמודים בודדים.

טעינת סקריפטי Wink באתר כולו

הוספת הסקריפטים לכותרת התחתונה והעליונה הגלובלית של האתר שלך מבטיחה ש-Wink יהיה זמין בכל עמוד ללא צורך בהגדרה חוזרת.

בעורך Squarespace, עבור אל Settings → Advanced → Code Injection.

בשדה Header, הוסף את גיליון הסגנונות:

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

בשדה Footer, הוסף את הסקריפט וטוען האפליקציה (החלף את YOUR_CLIENT_ID ב-Client ID של Wink שלך):

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

לחץ על Save.

הוספת רכיב לעמוד

לאחר טעינת הסקריפטים באופן גלובלי, ניתן להוסיף כל רכיב Wink לכל עמוד באמצעות בלוק קוד.

פתח את העמוד שברצונך לערוך.
לחץ על Edit והוסף בלוק Code חדש במקום שבו תרצה שהרכיב יופיע.

הדבק את קוד ה-HTML של הרכיב, לדוגמה טוען תוכן:

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

לחץ על Apply ואז על Save.

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

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

עיין ב-Web Components לקבלת הפניה מלאה לתכונות של כל רכיב.