Portfel Google oferuje zaawansowane narzędzia do dostosowywania wyglądu i układu dowolnej karty, od biletów na wydarzenia i kart pokładowych po karty lojalnościowe i karty podarunkowe. Ten przewodnik zawiera szczegółowe informacje o tym, jak dostosować wrażenia użytkownika, definiując strukturę karty i wyświetlając dynamiczne informacje dostosowane do użytkownika.
Zanim zaczniesz, zapoznaj się z dokumentacją referencyjną interfejsu REST API dla danego typu karty, aby zobaczyć pełną listę dostępnych pól.
Fundacja: cardTemplateOverride
Głównym narzędziem do dostosowywania układu karty jest obiekt classTemplateInfo.cardTemplateOverride, który definiujesz w zasobie Class karty (np. EventTicketClass, LoyaltyClass). Ten obiekt umożliwia strukturyzację karty przez zdefiniowanie wierszy i elementów w nich zawartych, co daje kontrolę nad sposobem prezentowania informacji.
Możesz odwoływać się do danych z zasobu Class (informacje udostępniane wszystkim użytkownikom) i zasobu Object (szczegóły dotyczące konkretnych użytkowników).
1. Dostosowywanie za pomocą wstępnie zdefiniowanych pól Portfela
Gotowe pola to standardowe właściwości dostępne w interfejsie Google Wallet API dla określonego typu karty. Te pola mają określone nazwy i są renderowane przez Portfel w spójny sposób. Może to być na przykład kod kreskowy, nazwa wydarzenia, numer lotu lub saldo karty podarunkowej.
Odwołując się do fieldPath tych predefiniowanych pól, możesz umieścić je w dowolnym miejscu karty.
Przykład: wyświetlanie kodu kreskowego i szczegółów karty
Ten przykład karty zawiera „Górny wiersz” i 3 pola danych w 2 wierszu. Pierwszy element wyświetla konkretne wartości użytkownika z Object, np. punkty lub numer miejsca przypisany do użytkownika. Drugi element wyświetla szczegóły z Class, takie jak nazwa zdarzenia lub poziom programu lojalnościowego, a trzeci ponownie wyświetla konkretne wartości użytkownika z Object, takie jak dodatkowe punkty lub numer sekcji / trenera.
Definicja klasy:
...
"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",
...
Definicja obiektu
...
"loyaltyPoints": {
"balance": {
"string": "1500"
},
"label": "Points"
},
"secondaryLoyaltyPoints" : {
"balance": {
"money": {
"micros" : "28250000",
"currencyCode": "USD",
}
},
"label": "Balance"
}
...
Formatowanie pól daty i godziny
W przypadku dowolnego pola daty lub godziny w obsługiwanych kartach możesz określić niestandardowy format za pomocą właściwości dateFormat. Dzięki temu możesz kontrolować sposób wyświetlania daty na karcie, np. wyświetlać tylko godzinę, pełną datę i godzinę lub tylko datę. Jeśli nie zostanie określony parametr dateFormat, użyty zostanie format domyślny.
"fields": [
{
"fieldPath": "object.validTimeInterval.start.date",
"dateFormat": "DATE_ONLY"
}
]
Pełną listę dostępnych formatów znajdziesz w DateFormatdokumentacji.
2. Dostosowywanie za pomocą pól zdefiniowanych przez dewelopera
Aby zapewnić maksymalną elastyczność, Portfel Google umożliwia tworzenie własnych pól danych za pomocą textModulesData. To idealne rozwiązanie do wyświetlania unikalnych informacji, które nie pasują do predefiniowanych pól, takich jak niestandardowe krótkie notatki, korzyści dla członków lub szczegóły dotyczące lokalizacji.
Definiujesz element textModulesData z unikalnym identyfikatorem id w tagu Object lub Class, a następnie odwołujesz się do tego identyfikatora id w tagu cardTemplateOverride.
Wiersze kart struktury
Możesz zaprojektować kartę z 1, 2 lub 3 elementami danych, co pozwala logicznie uporządkować informacje. Nie ma ograniczeń co do liczby wierszy, które możesz dodać, ale aby zapewnić wygodę użytkownikom, zastanów się, co jest najważniejsze do wyświetlenia na karcie.
- Sprawdzona metoda: dodatkowe informacje podawaj w widoku szczegółów karty lub w innych funkcjach Portfela, takich jak
messages,linksModuleDatalublinkedOfferIds. Dzięki temu główny widok karty pozostanie przejrzysty.
Przykład: wiersz z 3 elementami zawierający dane niestandardowe
Utwórz wiersz, aby wyświetlić niestandardowe szczegóły. W przypadku karty lojalnościowej mogą to być punkty, poziom i saldo. W przypadku biletu na wydarzenie mogą to być „Sekcja”, „Rząd” i „Miejsce”.
Definicja klasy:
cardTemplateOverride odnosi się do 3 unikalnych identyfikatorów: detail1, detail2 i 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",
Definicja obiektu:
Object zawiera dane i odpowiednie identyfikatory dla każdego pola.
...
"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"
}
]
...
Dane klasy a dane obiektu w przypadku odmian
Możesz łączyć dane na poziomie klasy i obiektu, aby tworzyć dynamiczne, spersonalizowane karty. Przydaje się to do tworzenia różnych wersji tej samej karty.
- Poziom klasy
textModulesData: użyj tego ustawienia w przypadku szczegółów, które są takie same dla grupy użytkowników (np. wiadomość „Witamy w programie VIP” dla wszystkich posiadaczy biletów VIP). - Poziom obiektu
textModulesData: używaj tego poziomu, aby uzyskać szczegółowe informacje dotyczące jednego użytkownika (np. „Jane, Twoje miejsce ma ograniczony widok”).
Przykład: wyświetlanie kart dostępu na określonym poziomie
Możesz utworzyć różne zasoby Class dla różnych wersji kart, np. „Wstęp ogólny” i „VIP” w przypadku wydarzenia lub „Ekonomiczna” i „Biznesowa” w przypadku lotu. Każda klasa może mieć unikalny projekt (obraz główny, kolor) i tekst domyślny.
 |
 |
 |
| Użytkownik zaczyna od poziomu Silver | Członek społeczności przeszedł na poziom Gold | Inny uczestnik na poziomie diamentowym |
Treści w widoku szczegółów karty
Pola z linksModuleData i imageModulesData nie są renderowane na przedniej stronie karty, gdy są do nich odwołania w cardTemplateOverride. Treści te są automatycznie wyświetlane w widoku Szczegóły karty („tył karty”), co zapewnia użytkownikom lepszy dostęp do linków do obsługi klienta, obrazów promocyjnych, warunków i innych informacji dodatkowych.
3. Poza wyglądem karty: inne zastąpienia szablonu
Obiekt classTemplateInfo oferuje więcej niż tylko cardTemplateOverride. Możesz dostosować inne elementy Portfela Google, aby uzyskać bardziej przejrzystą i intuicyjną prezentację kart.
Szczegółowe informacje o wszystkich dostępnych zastąpieniach znajdziesz w ClassTemplateInfo dokumentacji.
listTemplateOverride: dostosowuje układ wierszy w głównym widoku listy w aplikacji Portfel Google, co pozwala wyróżnić najważniejsze pola, zanim użytkownik otworzy kartę.detailsTemplateOverride: strukturyzuje wiersze i układ widoku „Szczegóły karty” (tył karty), zapewniając elastyczną przestrzeń na dodatkowe informacje, linki i tekst.cardBarcodeSectionDetails: umożliwia dostosowanie sekcji z kodem kreskowym na karcie.