Google Wallet предлагает мощные инструменты для настройки внешнего вида и макета любых проездных документов, от билетов на мероприятия и посадочных талонов до карт лояльности и подарочных карт. Это руководство содержит исчерпывающий обзор того, как настроить пользовательский интерфейс, определяя структуру карты и отображая динамическую информацию, специфичную для пользователя.
Прежде чем начать, обязательно ознакомьтесь со справочной документацией REST API для вашего типа пропуска, чтобы увидеть полный список доступных полей.
Фонд: cardTemplateOverride
Основным инструментом для настройки макета проездного билета является объект classTemplateInfo.cardTemplateOverride , который определяется в ресурсе Class проездного билета (например, EventTicketClass , LoyaltyClass ). Этот объект позволяет структурировать проездной билет, определяя строки и элементы в них, что позволяет контролировать представление информации.
Вы можете ссылаться на данные как из ресурса Class (для информации, общей для всех пользователей), так и из ресурса Object (для сведений, специфичных для пользователя).
1. Настройка с помощью предопределенных полей кошелька
Предопределенные поля — это стандартные свойства, доступные в API Google Wallet для определенного типа проездного. Эти поля имеют определенные названия и отображаются в 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 Wallet позволяет создавать собственные поля данных с помощью textModulesData . Это идеально подходит для отображения уникальной информации, которая не помещается в предопределенные поля, например, кратких заметок, преимуществ для участников или информации о местоположении.
Вы определяете элемент textModulesData с уникальным id в Object или Class , а затем ссылаетесь на этот id в cardTemplateOverride .
Структура рядов карт
Вы можете создать карту с одним, двумя или тремя элементами данных на карту, что позволит логически организовать информацию. Количество добавляемых строк не ограничено, но для удобства пользователя подумайте, что именно наиболее важно отображать на лицевой стороне карты.
- Рекомендация: для получения дополнительной информации используйте представление сведений о купоне или другие функции Wallet, такие как
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» для мероприятия или «Эконом» и «Бизнес» для перелёта. Каждый класс может иметь уникальный дизайн (изображение главного героя, цвет) и текст по умолчанию.
 |  |  |
| Участник, начиная с уровня Silver | Участник повышен до Золотого | Еще один участник уровня Diamond |
Содержимое в окне сведений о пропуске
Поля linksModuleData и imageModulesData не отображаются на лицевой стороне талона при ссылке на них в cardTemplateOverride . Это содержимое автоматически отображается в представлении «Сведения о талоне » («обратная сторона талона»), предоставляя пользователям улучшенный доступ к ссылкам на службы поддержки клиентов, рекламным изображениям, условиям и положениям и другой дополнительной информации.
3. За пределами лицевой стороны карты: другие переопределения шаблонов
Объект classTemplateInfo предлагает больше, чем просто cardTemplateOverride . Вы можете настроить другие элементы интерфейса Google Wallet, чтобы обеспечить более расширенное и интуитивно понятное представление ваших карт.
Полную информацию обо всех доступных переопределениях см. в справочной документации ClassTemplateInfo .
-
listTemplateOverride: настраивает макет строк в главном списке приложения Google Wallet, позволяя выделять наиболее важные поля еще до того, как пользователь откроет свой пропуск. -
detailsTemplateOverride: структурирует строки и макет представления «Сведения о талоне» (обратная сторона талона), предоставляя гибкое пространство для дополнительной информации, ссылок и текста. -
cardBarcodeSectionDetails: позволяет настраивать раздел штрих-кода на пропуске.