Google Wallet มีเครื่องมือที่มีประสิทธิภาพในการปรับแต่งลักษณะที่ปรากฏและเลย์เอาต์ของบัตรทุกประเภท ตั้งแต่ตั๋วเข้างานและบอร์ดดิ้งพาสไปจนถึงบัตรสะสมคะแนนและบัตรของขวัญ คู่มือนี้จะให้ภาพรวมที่ครอบคลุมเกี่ยวกับวิธีปรับแต่งประสบการณ์ของผู้ใช้โดยการกำหนดโครงสร้างของการ์ดและแสดงข้อมูลแบบไดนามิกที่เฉพาะเจาะจงสำหรับผู้ใช้
ก่อนเริ่มต้น โปรดอ่านเอกสารอ้างอิง REST API ที่เฉพาะเจาะจงสำหรับบัตรประเภทของคุณเพื่อดูรายการฟิลด์ทั้งหมดที่ใช้ได้
มูลนิธิ: cardTemplateOverride
เครื่องมือหลักในการปรับแต่งเลย์เอาต์ของบัตรคือออบเจ็กต์ classTemplateInfo.cardTemplateOverride ซึ่งคุณกำหนดในทรัพยากร Class ของบัตร (เช่น EventTicketClass, LoyaltyClass) ออบเจ็กต์นี้ช่วยให้คุณจัดโครงสร้างบัตรได้โดยการกำหนดแถวและรายการภายในแถว ซึ่งจะช่วยให้คุณควบคุมวิธีแสดงข้อมูลได้
คุณอ้างอิงข้อมูลได้จากทั้งทรัพยากร Class (สำหรับข้อมูลที่แชร์ในผู้ใช้ทั้งหมด) และทรัพยากร Object (สำหรับรายละเอียดเฉพาะผู้ใช้)
1. การปรับแต่งด้วยช่อง Wallet ที่กำหนดไว้ล่วงหน้า
ฟิลด์ที่กำหนดไว้ล่วงหน้าคือพร็อพเพอร์ตี้มาตรฐานที่มีอยู่ใน Google Wallet API สำหรับบัตรประเภทหนึ่งๆ ฟิลด์เหล่านี้มีชื่อเฉพาะและ Wallet จะแสดงฟิลด์เหล่านี้ในลักษณะที่สอดคล้องกัน เช่น บาร์โค้ด ชื่อกิจกรรม หมายเลขเที่ยวบิน หรือยอดคงเหลือในบัตรของขวัญ
คุณจัดเรียงฟิลด์เหล่านี้ได้ทุกที่ในบัตรโดยอ้างอิงfieldPathของฟิลด์ที่กำหนดไว้ล่วงหน้าเหล่านี้
ตัวอย่าง: การแสดงบาร์โค้ดและรายละเอียดเฉพาะบัตร
ตัวอย่างบัตรนี้มี "แถวบนสุด" และฟิลด์ข้อมูล 3 รายการภายในแถวที่ 2 รายการแรกจะแสดงค่าที่เฉพาะเจาะจงของผู้ใช้จาก Object เช่น คะแนนหรือหมายเลขที่นั่งที่เฉพาะเจาะจงของผู้ใช้ รายการที่ 2 จะแสดงรายละเอียดจาก Class เช่น ชื่อกิจกรรมหรือระดับโปรแกรมสะสมคะแนน และรายการที่ 3 จะแสดงค่าที่เฉพาะเจาะจงของผู้ใช้จาก 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
แถวการ์ดโครงสร้าง
คุณออกแบบบัตรที่มีรายการข้อมูล 1, 2 หรือ 3 รายการต่อบัตรได้ ซึ่งจะช่วยให้จัดระเบียบข้อมูลได้อย่างเป็นตรรกะ คุณเพิ่มแถวได้ไม่จำกัด แต่เพื่อประสบการณ์ของผู้ใช้ที่ดี โปรดพิจารณาว่าควรแสดงอะไรบนหน้าบัตร
- แนวทางปฏิบัติแนะนำ: หากต้องการข้อมูลเพิ่มเติม ให้ใช้ส่วนล่างของบัตร
หรือฟีเจอร์อื่นๆ ของ Wallet เช่น
messages,linksModuleDataหรือlinkedOfferIdsซึ่งจะช่วยให้มุมมองบัตรหลักไม่รก
ตัวอย่าง: แถว 3 รายการที่มีข้อมูลที่กำหนดเอง
สร้างแถวเพื่อแสดงรายละเอียดที่กำหนดเอง สำหรับบัตรสะสมคะแนน ข้อมูลนี้อาจเป็นคะแนน ระดับ และยอดคงเหลือ สำหรับตั๋วเข้าร่วมกิจกรรม อาจเป็น "ส่วน" "แถว" และ "ที่นั่ง"
คำจำกัดความของคลาส:
cardTemplateOverride อ้างอิงรหัสที่ไม่ซ้ำกัน 3 รายการ ได้แก่ 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" สำหรับผู้ถือบัตรวีไอพีทุกคน) - ระดับออบเจ็กต์
textModulesData: ใช้สำหรับรายละเอียดที่เฉพาะเจาะจงสำหรับผู้ใช้ 1 ราย (เช่น "คุณเจน ที่นั่งของคุณมีมุมมองที่จำกัด")
ตัวอย่าง: การแสดงบัตรเฉพาะระดับ
คุณสร้างทรัพยากร Class ที่แตกต่างกันสำหรับบัตรรูปแบบต่างๆ ได้ เช่น "บัตรเข้าชมทั่วไป" กับ "VIP" สำหรับกิจกรรม หรือ "ชั้นประหยัด" กับ "ชั้นธุรกิจ" สำหรับเที่ยวบิน แต่ละชั้นเรียนจะมีดีไซน์ (รูปภาพหลัก สี) และข้อความเริ่มต้นที่ไม่ซ้ำกันได้
 |
 |
 |
| สมาชิกที่เริ่มต้นด้วยระดับซิลเวอร์ | อัปเกรดสมาชิกเป็นระดับโกลด์แล้ว | สมาชิกอีกรายในระดับไดมอนด์ |
เนื้อหาในส่วนล่างของบัตร
ระบบจะไม่แสดงช่องจาก linksModuleData, imageModulesData เมื่อมีการอ้างอิงใน cardTemplateOverride เนื้อหานี้จะแสดงโดยอัตโนมัติที่ส่วนล่างของบัตร เพื่อให้ผู้ใช้เข้าถึงลิงก์ฝ่ายบริการลูกค้า รูปภาพโปรโมชัน ข้อกำหนดและเงื่อนไข และข้อมูลเสริมอื่นๆ ได้ดียิ่งขึ้น
3. นอกเหนือจากหน้าบัตร: การลบล้างเทมเพลตอื่นๆ
ออบเจ็กต์ classTemplateInfo มีมากกว่าแค่ cardTemplateOverride คุณปรับแต่งส่วนอื่นๆ ของประสบการณ์การใช้งาน Google Wallet เพื่อให้แสดงบัตรได้ดียิ่งขึ้นและใช้งานง่ายขึ้น
ดูรายละเอียดทั้งหมดเกี่ยวกับการลบล้างที่มีอยู่ทั้งหมดได้ในClassTemplateInfoเอกสารอ้างอิง
listTemplateOverride: ปรับแต่งเลย์เอาต์แถวในมุมมองรายการหลักของแอป Google Wallet เพื่อให้คุณไฮไลต์ช่องที่สำคัญที่สุดได้ก่อนที่ผู้ใช้จะเปิดบัตรdetailsTemplateOverride: จัดโครงสร้างแถวและเลย์เอาต์ของส่วนล่างของบัตร ทำให้คุณมีพื้นที่ที่ยืดหยุ่นสำหรับข้อมูลเสริม ลิงก์ และข้อความcardBarcodeSectionDetails: ให้คุณปรับแต่งส่วนบาร์โค้ดในบัตรได้