ב-Google Wallet יש כלים מתקדמים להתאמה אישית של המראה והפריסה של כל כרטיס, החל מכרטיסים לאירועים וכרטיסי עלייה למטוס ועד כרטיסי מועדון לקוחות וכרטיסי מתנה. במדריך הזה מוסבר איך אפשר להתאים אישית את חוויית המשתמש על ידי הגדרת המבנה של הכרטיס והצגת מידע דינמי שספציפי למשתמש.
לפני שמתחילים, חשוב לעיין במסמכי העזר הספציפיים של REST API לסוג הכרטיס שלכם כדי לראות רשימה מלאה של השדות הזמינים.
הקרן: cardTemplateOverride
הכלי העיקרי להתאמה אישית של פריסת הכרטיס הוא אובייקט classTemplateInfo.cardTemplateOverride, שמוגדר במשאב Class של הכרטיס (למשל, EventTicketClass, LoyaltyClass). האובייקט הזה מאפשר לכם להגדיר את המבנה של הכרטיס על ידי הגדרת שורות והפריטים בתוכן, וכך לשלוט באופן הצגת המידע.
אפשר להפנות לנתונים גם מהמשאב Class (למידע שמשותף בין כל המשתמשים) וגם מהמשאב Object (לפרטים ספציפיים למשתמש).
1. התאמה אישית באמצעות שדות מוגדרים מראש ב-Wallet
שדות מוגדרים מראש הם המאפיינים הסטנדרטיים שזמינים ב-Google Wallet API לסוג מסוים של כרטיס. לשדות האלה יש שמות ספציפיים, והם מוצגים ב-Wallet באופן עקבי. לדוגמה, ברקוד, שם אירוע, מספר טיסה או יתרה בכרטיס מתנה.
אפשר להשתמש בfieldPath של השדות המוגדרים מראש האלה כדי למקם אותם בכל מקום בכרטיס.
דוגמה: הצגת ברקוד ופרטים ספציפיים של כרטיס
בדוגמה הזו של כרטיס יש שורה עליונה ו-3 שדות נתונים בתוך השורה השנייה. בפריט הראשון מוצגים הערכים הספציפיים של המשתמש מ-Object, כמו נקודות או מספר מושב שספציפיים למשתמש. הפריט השני מציג את הפרטים מ-Class, כמו שם האירוע או רמת החברות במועדון הלקוחות, והפריט השלישי מציג שוב את הערכים הספציפיים של המשתמש מ-Class, כמו נקודה משנית או מספר המקטע או המושב.Object
הגדרת הכיתה:
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label",
"fieldPath": "object.loyaltyPoints.balance",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel",
"fieldPath": "class.rewardsTier",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label",
"fieldPath": "object.secondaryLoyaltyPoints.balance",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...
הגדרת אובייקט
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
הפורמט של שדות תאריך ושעה
בכל שדה של תאריך או שעה בכרטיסים נתמכים, אפשר לציין תבנית מותאמת אישית באמצעות המאפיין dateFormat. כך תוכלו לקבוע איך התאריך יוצג בכרטיס, למשל רק השעה, התאריך והשעה או רק התאריך. אם לא מציינים את dateFormat, המערכת תשתמש בפורמט ברירת המחדל.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
רשימה מלאה של הפורמטים הזמינים מופיעה במסמכי התיעוד של DateFormat.
2. התאמה אישית באמצעות שדות שהוגדרו על ידי מפתחים
כדי ליהנות מגמישות מקסימלית, אתם יכולים ליצור שדות נתונים מותאמים אישית באמצעות textModulesData ב-Google Wallet. האפשרות הזו מצוינת להצגת מידע ייחודי שלא מתאים לשדות המוגדרים מראש, כמו הערות קצרות בהתאמה אישית, הטבות לחברים או פרטים שרלוונטיים למיקום מסוים.
מגדירים פריט textModulesData עם id ייחודי ב-Object או ב-Class, ואז מפנים אל id הזה ב-cardTemplateOverride.
איך משנים את המבנה של שורות בכרטיסים
אתם יכולים לעצב כרטיס עם פריט נתונים אחד, שניים או שלושה לכל כרטיס, כדי לארגן את המידע בצורה הגיונית. אין הגבלה קשיחה על מספר השורות שאפשר להוסיף, אבל כדי לשמור על חוויית משתמש טובה, כדאי לחשוב מה הכי חשוב להציג בחזית הכרטיס.
- שיטה מומלצת: כדי לקבל מידע נוסף, אפשר להשתמש בתצוגת פרטי הכרטיס או בתכונות אחרות של Wallet כמו
messages,linksModuleDataאוlinkedOfferIds. כך התצוגה הראשית של הכרטיס נשארת נקייה.
דוגמה: שורה עם שלושה פריטים ונתונים בהתאמה אישית
ליצור שורה להצגת פרטים בהתאמה אישית. בכרטיס מועדון לקוחות, אלה יכולים להיות נקודות, רמה ויתרה. לכרטיס לאירוע, אלה יכולים להיות הערכים 'מחלקה', 'שורה' ו'מושב'.
הגדרת המחלקה:
ההפניה cardTemplateOverride מתייחסת לשלושה מזהים ייחודיים: detail1, detail2 ו-detail3.
...
"classTemplateInfo": {
"cardTemplateOverride": {
"cardRowTemplateInfos": [
{
"oneItem": {
"item": {
"firstValue": {
"fields": [
{
"fieldPath": "object.accountName",
}
]
}
}
}
},
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.loyaltyPoints.label",
"fieldPath": "object.loyaltyPoints.balance",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "class.rewardsTierLabel",
"fieldPath": "class.rewardsTier",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.secondaryLoyaltyPoints.label",
"fieldPath": "object.secondaryLoyaltyPoints.balance",
}
]
}
}
}
},
{
"threeItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1left']",
}
]
}
},
"middleItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1mid']"
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['row1right']"
}
]
}
}
}
},
{
"twoItems": {
"startItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['mem_since']",
}
]
}
},
"endItem": {
"firstValue": {
"fields": [
{
"fieldPath": "object.textModulesData['park']",
}
]
}
}
}
},
]
}
}
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
הגדרת האובייקט:
השדה Object מספק את הנתונים ואת המזהים התואמים לכל שדה.
...
"accountName": "Lorenaisabel Aliwarringlen",
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
},
"textModulesData": [
{
"header": "Visits",
"body": "17",
"id": "row1left"
},
{
"header": "Rides",
"body": "259",
"id": "row1mid"
},
{
"header": "Park hours",
"body": "140",
"id": "row1right"
},
{
"header": "Member since",
"body": "Mar 01, 2017",
"id": "mem_since"
},
{
"header": "Parking",
"body": "Included (Free)",
"id": "park"
}
]
...
נתונים של מחלקה לעומת נתוני אובייקט לגבי וריאציות
אפשר לשלב נתונים ברמת הכיתה וברמת האובייקט כדי ליצור כרטיסים דינמיים בהתאמה אישית. האפשרות הזו שימושית ליצירת גרסאות שונות של אותו כרטיס.
- ברמת הכיתה
textModulesData: משתמשים באפשרות הזו כשרוצים להציג פרטים שרלוונטיים לקבוצת משתמשים (למשל, הודעה 'ברוכים הבאים ל-VIP' לכל בעלי הכרטיסים ל-VIP). - ברמת האובייקט
textModulesData: משתמשים באפשרות הזו לפרטים שספציפיים למשתמש אחד (למשל, ג'יין, המושב שלך הוא עם תצפית מוגבלת).
דוגמה: הצגת כרטיסים ספציפיים לרמה
אפשר ליצור משאבים שונים של Class לגרסאות שונות של כרטיסים, למשל 'כניסה כללית' לעומת 'VIP' לאירוע, או 'תיירות' לעומת 'עסקים' לטיסה. לכל כיתה יכול להיות עיצוב ייחודי (תמונת נושא, צבע) וטקסט ברירת מחדל.
 |
 |
 |
| חברים שמתחילים ברמת Silver | החבר שודרג לרמת זהב | חבר נוסף ברמת יהלום |
תוכן בתצוגת פרטי הכרטיס
שדות מ-linksModuleData, imageModulesData לא מוצגים בחזית הכרטיס כשמפנים אליהם ב-cardTemplateOverride. התוכן הזה מוצג באופן אוטומטי בתצוגה פרטי הכרטיס (החלק האחורי של הכרטיס), ומספק למשתמשים גישה נוחה יותר לקישורים לשירות לקוחות, לתמונות שיווקיות, לתנאים ולהגבלות ולמידע נוסף.
3. מעבר לחזית הכרטיס: ביטולים אחרים של תבניות
האובייקט classTemplateInfo מציע יותר מ-cardTemplateOverride. אתם יכולים להתאים אישית חלקים אחרים בחוויית השימוש ב-Google Wallet כדי לקבל תצוגה עשירה ואינטואיטיבית יותר של הכרטיסים.
פרטים מלאים על כל ההגדרות הזמינות לשינוי מופיעים במאמרי העזרה של ClassTemplateInfo.
-
listTemplateOverride: מאפשרת להתאים אישית את פריסת השורות בתצוגת הרשימה הראשית של אפליקציית Google Wallet, כדי להבליט את השדות הכי חשובים עוד לפני שהמשתמש פותח את הכרטיס. -
detailsTemplateOverride: מאפשרת להגדיר את המבנה של השורות והפריסה בתצוגה 'פרטי הכרטיס' (גב הכרטיס), וכך ליצור מקום גמיש למידע נוסף, לקישורים ולטקסט. -
cardBarcodeSectionDetails: מאפשרת להתאים אישית את קטע הברקוד בכרטיס.