توفّر "محفظة Google" أدوات فعّالة لتخصيص مظهر وتصميم أي بطاقة، بدءًا من تذاكر حضور الفعاليات وبطاقات صعود الطائرة وصولاً إلى بطاقات الولاء وبطاقات الهدايا. يقدّم هذا الدليل نظرة عامة شاملة حول كيفية تخصيص تجربة المستخدم من خلال تحديد بنية البطاقة وعرض معلومات ديناميكية خاصة بالمستخدم.
قبل البدء، احرص على الرجوع إلى مستندات مرجع REST API الخاصة بنوع البطاقة للاطّلاع على قائمة كاملة بالحقول المتاحة.
المؤسسة: cardTemplateOverride
الأداة الأساسية لتخصيص تخطيط البطاقة هي عنصر classTemplateInfo.cardTemplateOverride الذي تحدّده في مورد Class الخاص بالبطاقة (مثلاً، EventTicketClass، LoyaltyClass). يتيح لك هذا العنصر تنظيم البطاقة من خلال تحديد الصفوف والعناصر داخلها، ما يمنحك التحكّم في طريقة عرض المعلومات.
يمكنك الرجوع إلى البيانات من كلّ من مصدر Class (للحصول على معلومات مشترَكة بين جميع المستخدمين) ومصدر Object (للحصول على تفاصيل خاصة بالمستخدم).
1. التخصيص باستخدام حقول "محفظة Google" المحدّدة مسبقًا
الحقول المحدّدة مسبقًا هي الخصائص العادية المتوفّرة في Google Wallet API لنوع بطاقة معيّن. تحتوي هذه الحقول على أسماء محدّدة وتعرضها "محفظة Google" بطريقة متّسقة. وتشمل الأمثلة رمزًا شريطيًا أو اسم حدث أو رقم رحلة جوية أو رصيد بطاقة هدايا.
من خلال الرجوع إلى fieldPath لهذه الحقول المحدّدة مسبقًا، يمكنك ترتيبها في أي مكان على بطاقتك.
مثال: عرض الرمز الشريطي والتفاصيل الخاصة بالبطاقة
يحتوي مثال البطاقة هذا على "الصف العلوي" و3 حقول بيانات داخل الصف الثاني. يعرض العنصر الأول القيم المحدّدة للمستخدم من Object، مثل النقاط أو رقم المقعد الخاص بالمستخدم. يعرض العنصر الثاني التفاصيل من 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. التخصيص باستخدام الحقول التي يحدّدها المطوّر
للحصول على أقصى قدر من المرونة، تتيح لك "محفظة Google" إنشاء حقول بيانات مخصّصة باستخدام textModulesData. هذه الميزة مثالية لعرض معلومات فريدة لا تتناسب مع الحقول المحدّدة مسبقًا، مثل الملاحظات القصيرة المخصّصة أو مزايا العضوية أو التفاصيل الخاصة بموقع جغرافي معيّن.
يمكنك تحديد عنصر textModulesData باستخدام id فريد في Object أو Class، ثم الإشارة إلى id في cardTemplateOverride.
صفوف بطاقات البيانات المنظَّمة
يمكنك تصميم بطاقة تتضمّن عنصر بيانات واحدًا أو اثنين أو ثلاثة عناصر بيانات لكل بطاقة، ما يتيح لك تنظيم المعلومات بشكل منطقي. لا يوجد حدّ أقصى لعدد الصفوف التي يمكنك إضافتها، ولكن للحصول على تجربة مستخدم سلسة، فكِّر في أهم المعلومات التي يجب عرضها على وجه البطاقة.
- أفضل الممارسات: للحصول على معلومات إضافية، استخدِم عرض تفاصيل البطاقة أو ميزات "محفظة Google" الأخرى، مثل
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" لحدث معيّن، أو "درجة اقتصادية" مقابل "درجة رجال أعمال" لرحلة جوية. يمكن أن يكون لكل صف تصميم فريد (صورة البطل واللون) ونص تلقائي.
 |
 |
 |
| بدء العضوية بالمستوى الفضي | تمت ترقية العضو إلى المستوى الذهبي | عضو آخر في المستوى الماسي |
المحتوى في "عرض تفاصيل البطاقة"
لا يتم عرض الحقول من linksModuleData وimageModulesData على وجه البطاقة عند الإشارة إليها في cardTemplateOverride. يتم عرض هذا المحتوى تلقائيًا في طريقة العرض تفاصيل البطاقة ("خلف البطاقة")، ما يتيح للمستخدمين الوصول بشكل أفضل إلى روابط خدمة العملاء والصور الترويجية والأحكام والشروط والمعلومات التكميلية الأخرى.
3- ما وراء وجه البطاقة: عمليات إلغاء أخرى للنماذج
يقدّم العنصر classTemplateInfo أكثر من مجرد cardTemplateOverride. يمكنك تخصيص أجزاء أخرى من تجربة "محفظة Google" لتقديم بطاقاتك بطريقة أكثر ثراءً وبساطة.
للحصول على التفاصيل الكاملة حول جميع عمليات الإلغاء المتاحة، يُرجى الرجوع إلى ClassTemplateInfo المستندات المرجعية.
listTemplateOverride: تخصّص تخطيط الصف في طريقة العرض الرئيسية للقائمة في تطبيق "محفظة Google"، ما يتيح لك إبراز الحقول الأكثر أهمية قبل أن يفتح المستخدم بطاقته.detailsTemplateOverride: تنظّم الصفوف والتصميم في عرض "تفاصيل البطاقة" (جهة البطاقة الخلفية)، ما يوفّر لك مساحة مرنة للمعلومات التكميلية والروابط والنصوص.cardBarcodeSectionDetails: تتيح لك تخصيص قسم الرمز الشريطي على البطاقة.