ב-Google Wallet יש כלים מתקדמים להתאמה אישית של המראה והפריסה של כל כרטיס, החל מכרטיסים לאירועים וכרטיסי עלייה למטוס ועד כרטיסי מועדון לקוחות וכרטיסי מתנה. במדריך הזה מוסבר איך אפשר להתאים אישית את חוויית המשתמש על ידי הגדרת המבנה של הכרטיס והצגת מידע דינמי שספציפי למשתמש.
לפני שמתחילים, חשוב לעיין במאמרי העזרה של ה-API בארכיטקטורת REST שרלוונטיים לסוג הכרטיס שלכם כדי לראות רשימה מלאה של השדות הזמינים.
הקרן: cardTemplateOverride
הכלי העיקרי להתאמה אישית של פריסת הכרטיס הוא אובייקט classTemplateInfo.cardTemplateOverride, שמוגדר במשאב Class של הכרטיס (לדוגמה, EventTicketClass, LoyaltyClass). האובייקט הזה מאפשר לכם לבנות את הכרטיס על ידי הגדרת שורות והפריטים בתוכן, וכך לשלוט באופן הצגת המידע.
אפשר להפנות לנתונים גם מהמשאב Class (למידע שמשותף לכל המשתמשים) וגם מהמשאב Object (לפרטים ספציפיים למשתמש).
1. התאמה אישית באמצעות שדות מוגדרים מראש ב-Wallet
שדות מוגדרים מראש הם המאפיינים הסטנדרטיים שזמינים ב-Google Wallet API לסוג מסוים של כרטיס. לשדות האלה יש שמות ספציפיים, והם מוצגים ב-Wallet באופן עקבי. לדוגמה, ברקוד, שם אירוע, מספר טיסה או יתרה בכרטיס מתנה.
אפשר להשתמש בfieldPath של השדות המוגדרים מראש האלה כדי לסדר אותם בכל מקום בכרטיס.
דוגמה: הצגת ברקוד ופרטים ספציפיים של כרטיס
בדוגמה הזו של כרטיס יש 'שורה עליונה' ו-3 שדות נתונים בתוך השורה השנייה. בפריט הראשון מוצגים הערכים הספציפיים של המשתמש מObject, כמו נקודות או מספר מושב שספציפיים למשתמש. בפריט השני מוצגים הפרטים מ-Class, כמו שם האירוע או רמת החברות במועדון הלקוחות, ובפריט השלישי מוצגים שוב הערכים הספציפיים של המשתמש מ-Object, כמו נקודה משנית או מספר המקטע או המאמן.
הגדרת הכיתה:
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label"
},
{
"fieldPath": "object.secondaryLoyaltyPoints.balance"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label"
},
{
"fieldPath": "object.loyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel"
},
{
"fieldPath": "class.rewardsTier"
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...
הגדרת אובייקט
...
"accountName": "Camille Walsh",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "35050000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
פורמט של שדות תאריך ושעה
לכל שדה של תאריך או שעה בכרטיסים נתמכים, אפשר לציין תבנית מותאמת אישית באמצעות המאפיין dateFormat. כך תוכלו לקבוע איך התאריך יוצג בכרטיס, למשל רק השעה, התאריך והשעה או רק התאריך. אם לא תציינו את הערך dateFormat, המערכת תשתמש בפורמט ברירת המחדל.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
רשימה מלאה של הפורמטים הזמינים מופיעה במאמרי העזרה של DateFormat.
2. התאמה אישית באמצעות שדות שהוגדרו על ידי מפתחים
כדי ליהנות מגמישות מקסימלית, Google Wallet מאפשרת לכם ליצור שדות נתונים מותאמים אישית באמצעות textModulesData. האפשרות הזו מצוינת להצגת מידע ייחודי שלא מתאים לשדות המוגדרים מראש, כמו הערות קצרות בהתאמה אישית, הטבות לחברים או פרטים שרלוונטיים למיקום מסוים.
מגדירים textModulesData פריט עם id ייחודי ב-Object או ב-Class, ואז מפנים אל id הזה ב-cardTemplateOverride.
איך משנים את המבנה של שורות בכרטיסים
אתם יכולים לעצב כרטיס עם פריט נתונים אחד, שניים או שלושה לכל כרטיס, כדי לארגן את המידע בצורה הגיונית. אין הגבלה קשיחה על מספר השורות שאפשר להוסיף, אבל כדי לשמור על חוויית משתמש טובה, כדאי לחשוב מה הכי חשוב להציג בחזית הכרטיס.
- שיטה מומלצת: כדי להוסיף מידע משלים, אפשר להשתמש בחלק התחתון של הכרטיס או בתכונות אחרות של Wallet כמו
messages,linksModuleDataאוlinkedOfferIds. כך התצוגה הראשית של הכרטיס נשארת נקייה.
דוגמה: שורה עם שלושה פריטים ונתונים בהתאמה אישית
ליצור שורה להצגת פרטים בהתאמה אישית. בכרטיס מועדון לקוחות, אלה יכולים להיות נקודות, רמה ויתרה. לכרטיס לאירוע, אלה יכולים להיות הערכים Section (קטע), Row (שורה) ו-Seat (מושב).
הגדרת המחלקה:
הערך cardTemplateOverride מפנה לשלושה מזהים ייחודיים: detail1, detail2 ו-detail3.
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['mem_since']",
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label"
},
{
"fieldPath": "object.loyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel"
},
{
"fieldPath": "class.rewardsTier"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label"
},
{
"fieldPath": "object.secondaryLoyaltyPoints.balance"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['visits']",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
הגדרת האובייקט:
האובייקט Object מספק את הנתונים ואת המזהים התואמים לכל שדה.
...
"accountName": "Camille Walsh",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
},
"textModulesData": [
{
"header": "Visits",
"body": "17",
"id": "visits"
},
{
"header": "Member since",
"body": "Mar 01, 2024",
"id": "mem_since"
},
]
...
נתונים של כיתה לעומת נתונים של אובייקט לגבי וריאציות
אתם יכולים לשלב נתונים ברמת הכיתה וברמת האובייקט כדי ליצור כרטיסים דינמיים בהתאמה אישית. האפשרות הזו שימושית ליצירת גרסאות שונות של אותו כרטיס.
- ברמת הכיתה
textModulesData: משתמשים באפשרות הזו לפרטים שזהים לקבוצת משתמשים (למשל, הודעה 'ברוכים הבאים ל-VIP' לכל בעלי הכרטיסים ל-VIP). - ברמת האובייקט
textModulesData: משתמשים באפשרות הזו כדי להציג פרטים שספציפיים למשתמש אחד (לדוגמה, "ג'יין, המושב שלך מוגבל").
דוגמה: הצגת כרטיסים ספציפיים לרמת חברות
אפשר ליצור משאבים שונים של Class לגרסאות שונות של כרטיסים, למשל 'כרטיס במחיר רגיל' לעומת 'VIP' לאירוע, או 'מחלקת תיירים' לעומת 'עסקים' לטיסה. לכל כיתה יכול להיות עיצוב ייחודי (תמונה ראשית (Hero), צבע) וטקסט ברירת מחדל.
 |
 |
 |
| חברים ברמה Silver ומעלה | החבר שודרג לרמת 'זהב' | חבר נוסף ברמת יהלום |
התוכן בחלק התחתון של הכרטיס
השדות מ-linksModuleData, imageModulesData לא מוצגים כשמפנים אליהם ב-cardTemplateOverride. התוכן הזה מוצג באופן אוטומטי בקטע התחתון של הכרטיס, ומאפשר למשתמשים גישה נוחה יותר לקישורים לשירות לקוחות, לתמונות שיווקיות, לתנאים ולהגבלות ולמידע נוסף.
3. מעבר לחזית הכרטיס: ביטולים אחרים של תבניות
אובייקט classTemplateInfo מציע יותר מ-cardTemplateOverride. אתם יכולים להתאים אישית חלקים אחרים בחוויית השימוש ב-Google Wallet כדי לקבל הצגה עשירה ואינטואיטיבית יותר של הכרטיסים.
פרטים מלאים על כל ההגדרות הזמינות מופיעים במאמרי העזרה של ClassTemplateInfo.
-
listTemplateOverride: מאפשרת להתאים אישית את פריסת השורות בתצוגת הרשימה הראשית של אפליקציית Google Wallet, כדי להבליט את השדות הכי חשובים עוד לפני שהמשתמש פותח את הכרטיס. -
detailsTemplateOverride: מגדיר את המבנה של השורות והפריסה בחלק התחתון של הכרטיס, ומספק מקום גמיש למידע נוסף, לקישורים ולטקסט. -
cardBarcodeSectionDetails: מאפשרת להתאים אישית את קטע הברקוד בכרטיס.