Google 월렛은 이벤트 티켓, 탑승권부터 포인트 카드, 기프트 카드에 이르기까지 모든 패스의 모양과 레이아웃을 맞춤설정할 수 있는 강력한 도구를 제공합니다. 이 가이드에서는 카드 구조를 정의하고 동적이고 사용자별 정보를 표시하여 사용자 환경을 맞춤설정하는 방법을 포괄적으로 설명합니다.
시작하기 전에 패스 유형에 관한 특정 REST API 참조 문서를 참고하여 사용 가능한 필드의 전체 목록을 확인하세요.
재단: cardTemplateOverride
패스의 레이아웃을 맞춤설정하는 기본 도구는 패스의 Class 리소스 (예:classTemplateInfo.cardTemplateOverride EventTicketClass, LoyaltyClass). 이 객체를 사용하면 행과 행 내 항목을 정의하여 패스를 구조화할 수 있으므로 정보가 표시되는 방식을 제어할 수 있습니다.
Class 리소스 (모든 사용자에게 공유되는 정보)와 Object 리소스 (사용자별 세부정보)의 데이터를 모두 참조할 수 있습니다.
1. 사전 정의된 월렛 필드로 맞춤설정
사전 정의된 필드는 특정 패스 유형에 대해 Google 월렛 API에서 사용할 수 있는 표준 속성입니다. 이러한 필드에는 특정 이름이 있으며 Wallet에서 일관된 방식으로 렌더링됩니다. 예로는 바코드, 이벤트 이름, 항공편 번호, 기프트 카드 잔액이 있습니다.
이러한 사전 정의된 필드의 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를 사용하여 맞춤 데이터 필드를 만들 수 있습니다. 맞춤 짧은 메모, 회원 혜택, 위치별 세부정보와 같이 사전 정의된 필드에 맞지 않는 고유한 정보를 표시하는 데 적합합니다.
Object 또는 Class에서 고유한 id로 textModulesData 항목을 정의한 다음 cardTemplateOverride에서 해당 id를 참조합니다.
카드 행 구조화
패스당 데이터 항목을 1개, 2개 또는 3개로 설계하여 정보를 논리적으로 정리할 수 있습니다. 추가할 수 있는 행 수에는 제한이 없지만 깔끔한 사용자 환경을 위해 카드에 표시할 가장 중요한 항목을 고려하세요.
- 권장사항: 추가 정보의 경우 세부정보 보기 전달 또는
messages,linksModuleData,linkedOfferIds과 같은 기타 월렛 기능을 사용하세요. 이렇게 하면 기본 패스 뷰가 깔끔하게 유지됩니다.
예: 맞춤 데이터가 포함된 3개 항목 행
맞춤 세부정보를 표시할 행을 만듭니다. 포인트 카드의 경우 포인트, 등급, 잔액이 될 수 있습니다. 이벤트 티켓의 경우 '구역', '열', '좌석'이 될 수 있습니다.
클래스 정의:
cardTemplateOverride는 detail1, detail2, detail3의 세 가지 고유 ID를 참조합니다.
...
"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는 각 필드의 데이터와 해당 ID를 제공합니다.
...
"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: 한 사용자에 관한 세부정보 (예: '제인님, 좌석의 시야가 제한되어 있습니다.')
예: 등급별 패스 표시
이벤트의 '일반 입장권'과 'VIP' 또는 항공편의 '이코노미'와 '비즈니스'와 같이 다양한 패스 변형에 대해 서로 다른 Class 리소스를 만들 수 있습니다. 각 수업에는 고유한 디자인 (히어로 이미지, 색상)과 기본 텍스트가 있을 수 있습니다.
 |
 |
 |
| 실버로 시작하는 회원 | 회원이 골드로 업그레이드됨 | 다이아몬드 등급의 다른 회원 |
패스 세부정보 뷰의 콘텐츠
cardTemplateOverride에서 참조되는 경우 linksModuleData, imageModulesData의 필드가 패스 앞면에 렌더링되지 않습니다. 이 콘텐츠는 패스 세부정보 뷰('패스 뒷면')에 자동으로 표시되어 사용자가 고객 서비스 링크, 프로모션 이미지, 이용약관, 기타 보충 정보에 더 쉽게 액세스할 수 있습니다.
3. 카드 얼굴 외: 기타 템플릿 재정의
classTemplateInfo 객체는 cardTemplateOverride 이상의 기능을 제공합니다. Google 월렛 환경의 다른 부분을 맞춤설정하여 패스를 더 풍부하고 직관적으로 표시할 수 있습니다.
사용 가능한 모든 재정의에 관한 자세한 내용은 ClassTemplateInfo 참조 문서를 참고하세요.
listTemplateOverride: 사용자가 패스를 열기 전에 가장 중요한 필드를 강조 표시할 수 있도록 Google 월렛 앱의 기본 목록 보기에서 행 레이아웃을 맞춤설정합니다.detailsTemplateOverride: '티켓 세부정보' 뷰 (티켓 뒷면)의 행과 레이아웃을 구성하여 보충 정보, 링크, 텍스트를 위한 유연한 공간을 제공합니다.cardBarcodeSectionDetails: 패스의 바코드 섹션을 맞춤설정할 수 있습니다.