Google Wallet cung cấp các công cụ mạnh mẽ để tuỳ chỉnh giao diện và bố cục của mọi thẻ/vé, từ Vé xem sự kiện và Thẻ lên máy bay cho đến Thẻ khách hàng thân thiết và Thẻ quà tặng. Hướng dẫn này cung cấp thông tin tổng quan toàn diện về cách bạn có thể điều chỉnh trải nghiệm người dùng bằng cách xác định cấu trúc của thẻ và hiển thị thông tin động, dành riêng cho người dùng.
Trước khi bắt đầu, hãy nhớ tham khảo tài liệu tham khảo cụ thể về REST API cho loại thẻ và vé của bạn để xem danh sách đầy đủ các trường có sẵn.
Quỹ: cardTemplateOverride
Công cụ chính để tuỳ chỉnh bố cục của thẻ và vé là đối tượng classTemplateInfo.cardTemplateOverride mà bạn xác định trong tài nguyên Class của thẻ và vé (ví dụ: EventTicketClass, LoyaltyClass). Đối tượng này cho phép bạn cấu trúc thẻ bằng cách xác định các hàng và các mục trong đó, giúp bạn kiểm soát cách trình bày thông tin.
Bạn có thể tham chiếu dữ liệu từ cả tài nguyên Class (để biết thông tin được chia sẻ giữa tất cả người dùng) và tài nguyên Object (để biết thông tin chi tiết theo từng người dùng).
1. Tuỳ chỉnh bằng các trường Wallet được xác định trước
Các trường được xác định trước là những thuộc tính tiêu chuẩn có trong Google Wallet API cho một loại thẻ và vé cụ thể. Các trường này có tên cụ thể và được Wallet hiển thị theo cách nhất quán. Ví dụ: mã vạch, tên sự kiện, số chuyến bay hoặc số dư thẻ quà tặng.
Bằng cách tham chiếu fieldPath của các trường được xác định trước này, bạn có thể sắp xếp chúng ở bất kỳ vị trí nào trên thẻ và vé.
Ví dụ: Hiển thị mã vạch và thông tin cụ thể về thẻ/vé
Ví dụ về thẻ này có "Hàng trên cùng" và 3 trường dữ liệu bên trong hàng thứ 2. Mục đầu tiên hiển thị các giá trị cụ thể của người dùng từ Object, chẳng hạn như điểm hoặc số ghế dành riêng cho người dùng. Mục thứ hai hiển thị thông tin chi tiết từ Class, chẳng hạn như tên sự kiện hoặc cấp độ của chương trình khách hàng thân thiết, còn mục thứ ba hiển thị các giá trị cụ thể của người dùng từ Object, chẳng hạn như điểm phụ hoặc số phần / huấn luyện viên.
Định nghĩa lớp:
...
"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",
...
Định nghĩa đối tượng
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Định dạng trường ngày và giờ
Đối với mọi trường ngày hoặc giờ trong thẻ và vé được hỗ trợ, bạn có thể chỉ định một định dạng tuỳ chỉnh bằng cách sử dụng thuộc tính dateFormat. Bạn có thể kiểm soát cách ngày xuất hiện trên thẻ và vé, chẳng hạn như chỉ hiển thị thời gian, ngày và giờ đầy đủ hoặc chỉ hiển thị ngày. Nếu bạn không chỉ định dateFormat, hệ thống sẽ sử dụng định dạng mặc định.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Để xem danh sách đầy đủ các định dạng có sẵn, hãy xem tài liệu DateFormat.
2. Tuỳ chỉnh bằng các trường do nhà phát triển xác định
Để có được sự linh hoạt tối đa, Google Wallet cho phép bạn tạo các trường dữ liệu tuỳ chỉnh của riêng mình bằng textModulesData. Đây là lựa chọn phù hợp để hiển thị thông tin riêng biệt không phù hợp với các trường được xác định trước, chẳng hạn như ghi chú ngắn tuỳ chỉnh, lợi ích dành cho thành viên hoặc thông tin chi tiết theo vị trí.
Bạn xác định một mục textModulesData bằng một id duy nhất trong Object hoặc Class, sau đó tham chiếu id đó trong cardTemplateOverride.
Cấu trúc các hàng thẻ
Bạn có thể thiết kế thẻ và vé có một, hai hoặc ba mục dữ liệu cho mỗi thẻ và vé, giúp bạn sắp xếp thông tin một cách hợp lý. Không có giới hạn tối đa về số lượng hàng bạn có thể thêm, nhưng để mang lại trải nghiệm trong sạch cho người dùng, hãy cân nhắc những thông tin quan trọng nhất cần hiển thị trên mặt thẻ.
- Phương pháp hay nhất: Để biết thêm thông tin, hãy sử dụng chế độ xem chi tiết thẻ và vé hoặc các tính năng khác của Wallet như
messages,linksModuleDatahoặclinkedOfferIds. Điều này giúp chế độ xem thẻ và vé chính không bị lộn xộn.
Ví dụ: Hàng có 3 mục với dữ liệu tuỳ chỉnh
Tạo một hàng để hiển thị thông tin chi tiết tuỳ chỉnh. Đối với thẻ khách hàng thân thiết, đây có thể là điểm, cấp bậc và số dư. Đối với vé sự kiện, đó có thể là "Khu vực", "Hàng" và "Ghế".
Định nghĩa lớp:
cardTemplateOverride tham chiếu đến 3 mã nhận dạng duy nhất: detail1, detail2 và 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",
Định nghĩa đối tượng:
Object cung cấp dữ liệu và mã nhận dạng tương ứng cho từng trường.
...
"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"
}
]
...
Dữ liệu về lớp so với dữ liệu về đối tượng cho các biến thể
Bạn có thể kết hợp dữ liệu ở cấp lớp và cấp đối tượng để tạo thẻ và vé linh hoạt, được cá nhân hoá. Điều này hữu ích khi tạo nhiều phiên bản của cùng một thẻ và vé.
- Cấp lớp học
textModulesData: Sử dụng cấp này cho những thông tin giống nhau đối với một nhóm người dùng (ví dụ: thông báo "Chào mừng bạn đến với VIP" cho tất cả người có vé VIP). textModulesDataở cấp đối tượng: Sử dụng đối tượng này để biết thông tin chi tiết dành riêng cho một người dùng (ví dụ: "Jane, chỗ ngồi của bạn có tầm nhìn bị hạn chế").
Ví dụ: Hiển thị thẻ thành viên theo cấp
Bạn có thể tạo nhiều tài nguyên Class cho nhiều biến thể thẻ và vé, chẳng hạn như "Vé vào cửa chung" so với "Vé VIP" cho một sự kiện hoặc "Hạng phổ thông" so với "Hạng thương gia" cho một chuyến bay. Mỗi lớp học có thể có một thiết kế riêng (hình ảnh chính, màu sắc) và văn bản mặc định.
 |
 |
 |
| Thành viên bắt đầu từ cấp Bạc | Thành viên được nâng cấp lên hạng Vàng | Một thành viên khác ở cấp Kim cương |
Nội dung trong Chế độ xem thông tin chi tiết về thẻ và vé
Các trường trong linksModuleData, imageModulesData không được hiển thị ở mặt trước của thẻ khi được tham chiếu trong cardTemplateOverride. Nội dung này sẽ tự động xuất hiện trong chế độ xem Thông tin chi tiết về thẻ và vé ("mặt sau của thẻ và vé"), giúp người dùng dễ dàng truy cập vào các đường liên kết đến dịch vụ khách hàng, hình ảnh quảng bá, điều khoản và điều kiện cũng như các thông tin bổ sung khác.
3. Ngoài mặt thẻ: Các mẫu ghi đè khác
Đối tượng classTemplateInfo cung cấp nhiều thông tin hơn ngoài cardTemplateOverride. Bạn có thể tuỳ chỉnh các phần khác của trải nghiệm Google Wallet để trình bày thẻ và vé một cách trực quan và phong phú hơn.
Để biết thông tin đầy đủ về tất cả các chế độ ghi đè có sẵn, hãy tham khảo tài liệu tham khảo về ClassTemplateInfo.
listTemplateOverride: Tuỳ chỉnh bố cục hàng trong chế độ xem danh sách chính của ứng dụng Google Wallet, cho phép bạn làm nổi bật các trường quan trọng nhất ngay cả trước khi người dùng mở thẻ/vé của họ.detailsTemplateOverride: Cấu trúc các hàng và bố cục của chế độ xem "Thông tin chi tiết về thẻ và vé" (mặt sau của thẻ và vé), mang đến cho bạn một không gian linh hoạt để chứa thông tin, đường liên kết và văn bản bổ sung.cardBarcodeSectionDetails: Cho phép bạn tuỳ chỉnh phần mã vạch trên thẻ và vé.