דלגו לתוכן
Academy

רכיבי ווב

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

שילוב Wink

Section titled “שילוב Wink”

יש שלושה דברים שעליך לכלול בכל עמוד שבו תרצה להציג אחד מרכיבי הווב שלנו.

  1. כלול את גיליון הסגנונות שלנו.
  2. כלול את קוד ה-Javascript שלנו.
  3. כלול את טוען היישום שלנו.

גיליון סגנונות

Section titled “גיליון סגנונות”

כלול את סגנונות ה-CSS שלנו בתוך תג ה-head של המסמך שלך.

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

Javascript

Section titled “Javascript”

כלול את קוד ה-Javascript שלנו בתחתית המסמך שלך. (מומלץ למקם מיד מעל תג ה-</body>).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

האתר שלך מוכן כעת ויכול להציג את רכיבי הווב שלנו.

רכיבים

Section titled “רכיבים”

קרא על ספריית הרכיבים שלנו למטה.

טוען יישום

Section titled “טוען יישום”

הטוען אחראי על שמירת מצב וניהול האינטראקציה בין הרכיבים שלנו. (כלול אותו מתחת ל-Javascript שלנו).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

טוען תוכן

Section titled “טוען תוכן”

טוען התוכן הוא הלב של ספריית רכיבי הווב שלנו. הוא אחראי על הצגת המלאי שלך (כרטיסים, רשתות, מפות).

תכונות זמינות:

  • layout
  • id
  • sort

התכונה sort זמינה רק כאשר layout הוא RANKED ואתה לא רוצה להשתמש ברשת מדורגת קיימת. במקרים אלו, השאר את id ריק.

סוגי פריסות זמינות:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

סוגי מיון זמינים:

  • MEMBER
  • PRICE_LOW_TO_HIGH
  • PRICE_HIGH_TO_LOW
  • PRICE
  • POPULARITY
  • ECO
  • EXPERIENCE
  • PERK
  • LOYALTY
  • PACKAGE
<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

דוגמאות ניתן למצוא עבור כרטיסים, רשתות ו-מפות.

חיפוש

Section titled “חיפוש”

החיפוש עובד מצוין יחד עם אחת מהרשתות המדורגות שלך. הוא מאפשר למשתמשים לחפש מלון ויעד והרשת מתעדכנת בהתאם לתוצאות החיפוש שלהם.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
רכיב ווב חיפוש
רכיב ווב חיפוש

לחיצה על הרכיב למעלה פותחת מודאל שמאפשר לך להקליד את היעד או המלון שאתה מחפש.

מודאל חיפוש
מודאל חיפוש עם תוצאות

מסלול

Section titled “מסלול”

כפתור המסלול מציג את המסלול הנוכחי על הכפתור. בלחיצה עליו, מציג בורר מסלול מלא כמודאל.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
רכיב ווב מסלול
רכיב ווב מסלול

לחיצה על הכפתור למעלה פותחת מודאל שמאפשר לך לעדכן את המסלול שלך.

מודאל חיפוש
בורר מסלול כמוסך

חיפוש

Section titled “חיפוש”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
רכיב ווב חיפוש
רכיב ווב חיפוש

לחיצה על הכפתור למעלה פותחת מודאל שמאפשר לך לעדכן את המסלול שלך.

מודאל חיפוש
בורר מסלול כמוסך

טופס מסלול

Section titled “טופס מסלול”

רכיב המסלול מציג טופס מסלול שהמשתמשים יכולים לקיים איתו אינטראקציה.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
רכיב ווב טופס מסלול
רכיב ווב טופס מסלול

שינוי המסלול, בכל אחד מרכיבי המסלול שלנו, מפעיל את אירוע עדכון המסלול לכל מלאי שמוצג כרגע בעמוד.

חשבון

Section titled “חשבון”

כפתור החשבון מאפשר לך להוסיף אימות Wink לאתר שלך.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
רכיב ווב כפתור חשבון
רכיב ווב כפתור חשבון

לחיצה על הכפתור, כאשר המשתמש אינו מאומת, תעביר את המשתמש לאימות. כאשר המשתמש מאומת, הוא מציג את אייקון הפרופיל של המשתמש.

כפתור חשבון כאשר מאומת
רכיב ווב כפתור חשבון (מאומת)

בלחיצה על הכפתור, נפתח תפריט נפתח ספציפי למשתמש.

כפתור חשבון כאשר מאומת
רכיב ווב כפתור חשבון (פתוח)

שילוב TripPay

Section titled “שילוב TripPay”

יש שני דברים שעליך לכלול בכל עמוד שבו תרצה להשתמש ברכיב ווב התשלום של TripPay.

  1. כלול את גיליון הסגנונות שלנו.
  2. כלול את קוד ה-Javascript שלנו.

גיליון סגנונות

Section titled “גיליון סגנונות”

כלול את סגנונות ה-CSS שלנו בתוך תג ה-head של המסמך שלך.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Section titled “Javascript”

כלול את קוד ה-Javascript שלנו בתחתית המסמך שלך. (מומלץ למקם מיד מעל תג ה-</body>).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

האתר שלך מוכן כעת ויכול להציג את רכיבי הווב שלנו.

רכיבים

Section titled “רכיבים”

תשלום

Section titled “תשלום”

רכיב התשלום מאפשר לך ליידע את TripPay כי נוסע רוצה לרכוש משהו ואת הכללים והמחירים עבור אותם פריטים.

יש תכונה אחת חובה לווידג’ט:

  • id מזהה של חוזה ההזמנה שברצונך לבצע.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

הווידג’ט מכין את החוזה לביצוע ומציג פרטי תשלום (איור 1) למשתמש לסיום ההזמנה.

פרטי תשלום
איור 1. דוגמת טופס תשלום

שגיאות

Section titled “שגיאות”

אם מופיעה לך הודעת שגיאה בעת שילוב אחד מרכיבי הווב שלנו, בין אם ב-WinkLinks או באתר שלך, יש כמה דברים שעשויים להיות לא תקינים:

זמינות

Section titled “זמינות”

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

הוסר

Section titled “הוסר”

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

התאמה אישית

Section titled “התאמה אישית”

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

יישום

Section titled “יישום”

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