רכיבי ווב

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

הטמעת Wink

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

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

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

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

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

Javascript

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

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

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

רכיבים

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

טוען יישום

הטוען אחראי לשמירת מצב ולניהול האינטראקציה בין הרכיבים שלנו. (כלול אותו מתחת ל-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>

טוען תוכן

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

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

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>

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

חיפוש

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

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

מסלול

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

רכיב ווב מסלול

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

חיפוש

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

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

טופס מסלול

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

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

חשבון

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

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

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

הטמעת TripPay

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

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

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

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

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

Javascript

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

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

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

רכיבים

תשלום

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

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

id מזהה של חוזה ההזמנה שברצונך לבצע.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

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

שגיאות

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

זמינות

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

הוסר

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

התאמה אישית

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

יישום

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