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