דלגו לתוכן
Academy

רכיבי אינטרנט

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

הטמעת קריצה

Section titled “הטמעת קריצה”

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

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

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

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

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

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

ג’אווהסקריפט

Section titled “ג’אווהסקריפט”

כלול את קוד ה-Javascript שלנו בתחתית המסמך שלך. (אנו ממליצים על תגית גוף הסיום, מיד מעל).

<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 “טוען תוכן”

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

מאפיינים זמינים:

  • מַעֲרָך
  • תְעוּדַת זֶהוּת
  • סוּג

התכונהsortזמין רק כאשר הפריסה היא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 שלנו בראש המסמך שלך.

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

ג’אווהסקריפט

Section titled “ג’אווהסקריפט”

כלול את קוד ה-Javascript שלנו בתחתית המסמך שלך. (אנו ממליצים על תגית גוף הסיום, מיד מעל).

<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>

:::הערה כדי ללמוד כיצד ליצור את חוזה ההזמנהid, קרא את המדריך:אינטגרציה עם TripPay. :::

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

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