Mẫu thẻ đi phương tiện công cộng

Thẻ đi phương tiện công cộng hỗ trợ việc kết xuất mẫu. Nếu không có mẫu nào được xác định, thì mẫu mặc định sẽ được sử dụng.

Định nghĩa mẫu

Mẫu thẻ và vé được xác định ở cấp lớp và được dùng để hiển thị mọi đối tượng liên kết với lớp đó. Mẫu này xác định những trường sẽ hiển thị trong các phần khác nhau của thẻ và vé.

Mẫu này được chia thành các phần sau:

Android

Tổng quan về các phần và vị trí trong bố cục mẫu thẻ và vé

Web

Tổng quan về các phần và vị trí trong bố cục mẫu thẻ và vé

Tiêu đề thẻ

Android

Các thành phần bố cục tiêu đề thẻ và vị trí trường Tiêu đề thẻ mặc định
  1. class.logo
  2. class.localizedIssuerName
    hoặc class.issuerName
  3. object.ticketLeg.originName
  4. object.ticketLeg.destinationName
  5. object.ticketLeg.originStationCode
  6. object.ticketLeg.destinationStationCode
  7. object.tripType
  8. object.hexBackgroundColor
    hoặc class.hexBackgroundColor

Tiêu đề thẻ biểu trưng rộng
  1. class.wideLogo
  2. object.ticketLeg.originName
  3. object.ticketLeg.destinationName
  4. object.ticketLeg.originStationCode
  5. object.ticketLeg.destinationStationCode
  6. object.tripType
  7. object.hexBackgroundColor
    hoặc class.hexBackgroundColor

Web

Các thành phần bố cục tiêu đề thẻ và vị trí trường Tiêu đề thẻ mặc định
  1. class.logo
  2. class.localizedIssuerName
    hoặc class.issuerName
  3. object.ticketLeg.originName
  4. object.ticketLeg.destinationName
  5. object.ticketLeg.originStationCode
  6. object.ticketLeg.destinationStationCode
  7. object.tripType
  8. object.hexBackgroundColor
    hoặc class.hexBackgroundColor

Tiêu đề thẻ biểu trưng rộng
  1. class.wideLogo
  2. object.ticketLeg.originName
  3. object.ticketLeg.destinationName
  4. object.ticketLeg.originStationCode
  5. object.ticketLeg.destinationStationCode
  6. object.tripType
  7. object.hexBackgroundColor
    hoặc class.hexBackgroundColor

Phần tiêu đề thẻ hiển thị biểu trưng, tên của công ty vận tải và thông tin tóm tắt về hành trình. Cả ba phần tử này đều bắt buộc và bạn không thể thay đổi các tham chiếu trường dùng để điền sẵn các phần tử này cũng như vị trí của chúng.

Tuy nhiên, logic kết xuất cho phép một số tính linh hoạt cho hàng trên cùng. Hàng trên cùng của thẻ và vé, đại diện cho thông tin tóm tắt về hành trình, được kiểm soát bằng các trường sau trong TransitObject cho hành trình một chặng:

  • object.tripType
  • object.ticketLeg.originName
  • object.ticketLeg.destinationName
  • object.ticketLeg.originStationCode
  • object.ticketLeg.destinationStationCode

Cách thẻ và vé được hiển thị phụ thuộc vào những trường không trống. Bạn có thể hiển thị theo các cách sau:

  • Chỉ tên gốc: Tên gốc là thông tin duy nhất được hiển thị. Điều này đặc biệt hữu ích đối với những vé áp dụng cho một khu vực thay vì một hành trình cụ thể.
  • Điểm xuất phát và điểm đến: Điểm xuất phát nằm ở bên trái và điểm đến nằm ở bên phải. Biểu tượng giữa hai điểm này phụ thuộc vào loại chuyến đi. Điểm khởi hành và điểm đến được hiển thị dưới dạng một trong những thông tin sau:
    • Tên và mã trạm: Chúng tôi hiển thị mã trạm cùng với tên dưới dạng văn bản nhỏ hơn ở trên cùng.
    • Chỉ tên: Chúng tôi hiển thị tên.
    • Chỉ mã trạm: Chúng tôi sẽ hiển thị mã trạm.

Đối tượng TransitObject nhiều chặng hoạt động theo cách tương tự. Trong trường hợp này, đừng sử dụng object.ticketLeg. Thay vào đó, bạn phải sử dụng danh sách object.ticketLegs[]. Bạn phải xác định cả điểm xuất phát và điểm đến. Bạn phải sử dụng tên hoặc mã nhà ga (hoặc cả hai) một cách nhất quán trong mỗi chặng. Điểm xuất phát hiển thị là điểm xuất phát của phần tử đầu tiên trong mảng, còn điểm đến hiển thị là điểm đến của phần tử cuối cùng trong mảng.

Màu nền của thẻ và vé không phải là trường bắt buộc và có thể được xác định ở cả cấp lớp và cấp đối tượng. Trường đối tượng có mức độ ưu tiên cao hơn và có thể dùng để ghi đè trường lớp.

Khi bạn đặt trường biểu trưng rộng, trên thiết bị di động, tiêu đề mẫu mặc định có biểu trưng và tên nhà phát hành sẽ được thay thế bằng biểu trưng rộng.

Hãy làm theo nguyên tắc về hình ảnh biểu trưng rộng khi tạo biểu trưng rộng cho phần đầu trang để hình ảnh của bạn hiển thị tối ưu trên thẻ và vé.

Mẫu thẻ

Android

Các phần tử bố cục hàng và vị trí trường của mẫu thẻ

Web

Các phần tử bố cục hàng và vị trí trường của mẫu thẻ

Phần mẫu thẻ được dùng để hiển thị các hàng bổ sung. Các hàng này có thể chứa các trường dữ liệu có cấu trúc dựa trên văn bản hoặc các trường mô-đun văn bản.

Bạn có thể chỉ định số hàng xác định số lượng đối tượng trong danh sách class.classTemplateInfo.cardTemplateOverride.cardRowTemplateInfos[]. Danh sách này cần có ít nhất một phần tử và bạn nên sử dụng tối đa hai phần tử. Mỗi phần tử phải thuộc một trong các loại sau:

  • oneItem, chấp nhận một mục:
    • item
  • twoItems, chấp nhận hai mục:
    • startItem
    • endItem
  • threeItems, chấp nhận 3 mục:
    • startItem
    • middleItem
    • endItem

Mỗi mục có thể được xác định là một bộ chọn trường duy nhất (.firstValue), hai bộ chọn trường (.firstValue và .secondValue) hoặc một mục được xác định trước (.predefinedItem). Cả giá trị của trường đã chọn và nhãn tương ứng của các giá trị đó đều được hiển thị. Khi bạn xác định hai bộ chọn trường, giá trị của các trường đã chọn sẽ được hiển thị bằng dấu phân tách "/". Điều này cũng áp dụng cho nhãn của các trường đã chọn. Các mục được xác định trước dùng để xác định cách kết xuất phức tạp hơn.

Mã mẫu sau đây cho thấy cách ghi đè các phần hàng thẻ của mẫu thẻ để chỉ định hai hàng. Mỗi hàng bao gồm 3 mục, mỗi mục tham chiếu đến 6 trường tuỳ chỉnh textModuleData cấp lớp và tiêu đề của các trường đó dưới dạng nhãn:

Python

 {
   ... //Rest of class
   "textModulesData": [
        {
            "header": "Label 1",
            "body": "Some info 1",
            "id": "myfield1"
        },
        {
            "header": "Label 2",
            "body": "Some info 2",
            "id": "myfield2"
        },
        {
            "header": "Label 3",
            "body": "Some info 3",
            "id": "myfield3"
        },
        {
            "header": "Label 4",
            "body": "Some info 4",
            "id": "myfield4"
        },
        {
            "header": "Label 5",
            "body": "Some info 5",
            "id": "myfield5"
        },
        {
            "header": "Label 6",
            "body": "Some info 6",
            "id": "myfield6"
        }
    ],
   "classTemplateInfo": {
        "cardTemplateOverride": {
            "cardRowTemplateInfos": [{
                "threeItems": {
                    "startItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield1']"
                            }]
                        }
                    },
                    "middleItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield2']"
                            }]
                        }
                    },
                    "endItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield3']"
                            }]
                        }
                    },
                }
            },{
                "threeItems": {
                    "startItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield4']"
                            }]
                        }
                    },
                    "middleItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield5']"
                            }]
                        }
                    },
                    "endItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield6']"
                            }]
                        }
                    },
                }
            }]
        }
    }
}
    

Java

// Rest of class
  .setTextModulesData((new ArrayList<TextModuleData>() {
    {
      add((new TextModuleData()).setHeader("Label 1")
        .setBody("Some info 1")
        .setId("myfield1"));
      add((new TextModuleData()).setHeader("Label 2")
        .setBody("Some info 1")
        .setId("myfield2"));
      add((new TextModuleData()).setHeader("Label 3")
        .setBody("Some info 3")
        .setId("myfield3"));
      add((new TextModuleData()).setHeader("Label 4")
        .setBody("Some info 4")
        .setId("myfield4"));
      add((new TextModuleData()).setHeader("Label 5")
        .setBody("Some info 5")
        .setId("myfield5"));
      add((new TextModuleData()).setHeader("Label 6")
        .setBody("Some info 5")
        .setId("myfield6"));
    }
  }))
  .setClassTemplateInfo((new ClassTemplateInfo())
    .setCardTemplateOverride((new CardTemplateOverride())
      .setCardRowTemplateInfos(new ArrayList<CardRowTemplateInfo>() {
        {
          add((new CardRowTemplateInfo()).setThreeItems((new CardRowThreeItems())
            .setStartItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield1']"));
              }
            })))
            .setMiddleItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield2']"));
              }
            })))
            .setEndItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield3']"));
              }
            })))
          ));
          add((new CardRowTemplateInfo()).setThreeItems((new CardRowThreeItems())
            .setStartItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield4']"));
              }
            })))
            .setMiddleItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield5']"));
              }
            })))
            .setEndItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
              {
                add((new FieldReference()).setFieldPath("class.textModulesData['myfield6']"));
              }
            })))
          ));
          }
  })))
    

PHP

// Rest of class
    $textModulesData1 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData1->setBody("Some info 1");
    $textModulesData1->setHeader("Label 1");
    $textModulesData1->setId("myfield1");

    $textModulesData2 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData2->setBody("Some info 2");
    $textModulesData2->setHeader("Label 2");
    $textModulesData2->setId("myfield2");

    $textModulesData3 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData3->setBody("Some info 3");
    $textModulesData3->setHeader("Label 3");
    $textModulesData3->setId("myfield3");

    $textModulesData4 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData4->setBody("Some info 4");
    $textModulesData4->setHeader("Label 4");
    $textModulesData4->setId("myfield4");

    $textModulesData5 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData5->setBody("Some info 5");
    $textModulesData5->setHeader("Label 5");
    $textModulesData5->setId("myfield5");

    $textModulesData6 = new Google_Service_Walletobjects_TextModuleData();
    $textModulesData6->setBody("Some info 6");
    $textModulesData6->setHeader("Label 6");
    $textModulesData6->setId("myfield6");

    $textModulesDatas = array($textModulesData1, $textModulesData2, $textModulesData3,
                  $textModulesData4, $textModulesData5, $textModulesData6);

    $startItemField = new Google_Service_Walletobjects_FieldReference();
    $startItemField->setFieldPath("class.textModulesData['myfield1']");

    $startItemFirstValue = new Google_Service_Walletobjects_FieldSelector();
    $startItemFirstValue->setFields(array($startItemField));

    $startItem = new Google_Service_Walletobjects_TemplateItem();
    $startItem->setFirstValue($startItemFirstValue);

    $middleItemField = new Google_Service_Walletobjects_FieldReference();
    $middleItemField->setFieldPath("class.textModulesData['myfield2']");

    $middleItemFirstValue = new Google_Service_Walletobjects_FieldSelector();
    $middleItemFirstValue->setFields(array($middleItemField));

    $middleItem = new Google_Service_Walletobjects_TemplateItem();
    $middleItem->setFirstValue($middleItemFirstValue);

    $endItemField = new Google_Service_Walletobjects_FieldReference();
    $endItemField->setFieldPath("class.textModulesData['myfield3']");

    $endItemFirstValue = new Google_Service_Walletobjects_FieldSelector();
    $endItemFirstValue->setFields(array($endItemField));

    $endItem = new Google_Service_Walletobjects_TemplateItem();
    $endItem->setFirstValue($endItemFirstValue);

    $cardRowTemplate = new Google_Service_Walletobjects_CardRowThreeItems();
    $cardRowTemplate->setStartItem($startItem);
    $cardRowTemplate->setMiddleItem($middleItem);
    $cardRowTemplate->setEndItem($endItem);

    $cardRowTemplateInfo1 = new Google_Service_Walletobjects_CardRowTemplateInfo();
    $cardRowTemplateInfo1->setThreeItems($cardRowTemplate);

    $startItemField2 = new Google_Service_Walletobjects_FieldReference();
    $startItemField2->setFieldPath("class.textModulesData['myfield4']");

    $startItemFirstValue2 = new Google_Service_Walletobjects_FieldSelector();
    $startItemFirstValue2->setFields(array($startItemField2));

    $startItem2 = new Google_Service_Walletobjects_TemplateItem();
    $startItem2->setFirstValue($startItemFirstValue2);

    $middleItemField2 = new Google_Service_Walletobjects_FieldReference();
    $middleItemField2->setFieldPath("class.textModulesData['myfield5']");

    $middleItemFirstValue2 = new Google_Service_Walletobjects_FieldSelector();
    $middleItemFirstValue2->setFields(array($middleItemField2));

    $middleItem2 = new Google_Service_Walletobjects_TemplateItem();
    $middleItem2->setFirstValue($middleItemFirstValue2);

    $endItemField2 = new Google_Service_Walletobjects_FieldReference();
    $endItemField2->setFieldPath("class.textModulesData['myfield6']");

    $endItemFirstValue2 = new Google_Service_Walletobjects_FieldSelector();
    $endItemFirstValue2->setFields(array($endItemField2));

    $endItem2 = new Google_Service_Walletobjects_TemplateItem();
    $endItem2->setFirstValue($endItemFirstValue2);

    $cardRowTemplate2 = new Google_Service_Walletobjects_CardRowThreeItems();
    $cardRowTemplate2->setStartItem($startItem2);
    $cardRowTemplate2->setMiddleItem($middleItem2);
    $cardRowTemplate2->setEndItem($endItem2);

    $cardRowTemplateInfo2 = new Google_Service_Walletobjects_CardRowTemplateInfo();
    $cardRowTemplateInfo2->setThreeItems($cardRowTemplate2);

    $cardTemplateOverride = new Google_Service_Walletobjects_CardTemplateOverride();
    $cardTemplateOverride->setCardRowTemplateInfos(array($cardRowTemplateInfo1,
                  $cardRowTemplateInfo2));

    $classTemplateInfo = new Google_Service_Walletobjects_ClassTemplateInfo();
    $classTemplateInfo->setCardTemplateOverride($cardTemplateOverride);

    $payload->setTextModulesData($textModulesDatas);
    $payload->setClassTemplateInfo($classTemplateInfo);
    

Mã này tạo một thẻ và vé có định dạng phần mẫu mã sau:

Ví dụ về việc ghi đè nhãn.

Nếu một mục trống, mục đó sẽ không xuất hiện. Để biết thêm thông tin, hãy xem phần Tài liệu tham khảo về trường. Nếu tất cả các mục trong một hàng đều trống, thì hàng đó sẽ không xuất hiện. Nếu một số nhưng không phải tất cả các mục trong một hàng đều trống, thì các mục không trống sẽ được sắp xếp lại và hiển thị dưới dạng một hàng có ít mục hơn.

Nếu bạn không ghi đè mẫu thẻ, thì số hàng mặc định, số mục mặc định và tệp đối chiếu trường mặc định sẽ được sử dụng. Để biết thêm thông tin, hãy xem phần Mẫu mặc định.

Sau khi bạn xác định Hình ảnh chính, hình ảnh này có thể xuất hiện sau hàng đầu tiên (nếu có nhiều hàng trong danh sách cardRowTemplateInfos) hoặc phía trên hàng (nếu chỉ có một hàng).

Mã vạch thẻ

Android

Các thành phần và vị trí của bố cục mã vạch trên thẻ
  1. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .firstTopDetail
  2. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .secondTopDetail
  3. object.barcode.type và object.barcode.value
    hoặc object.ticketNumber
  4. object.barcode.alternateText
  5. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .firstBottomDetail

Web

Các thành phần và vị trí của bố cục mã vạch trên thẻ
  1. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .firstTopDetail
  2. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .secondTopDetail
  3. object.barcode.type và object.barcode.value
    hoặc object.ticketNumber
  4. object.barcode.alternateText
  5. class.classTemplateInfo
      .cardBarcodeSectionDetails
      .firstBottomDetail

Phần mã vạch của thẻ được dùng để hiển thị văn bản hoặc hình ảnh bổ sung trước và sau mã vạch. Không có trường nào trong mục này là bắt buộc.

Có 3 bộ chọn trường có thể dùng để xác định 2 trường cạnh nhau trước và một trường sau mã vạch. Các trường này được hiển thị mà không có nhãn và có thể là trường dữ liệu có cấu trúc dựa trên văn bản, trường mô-đun văn bản hoặc trường mô-đun hình ảnh. Nếu bạn sử dụng hình ảnh, thì hình ảnh đó phải tuân thủ nguyên tắc trình bày thương hiệu.

Mã vạch được xác định bằng một loại và một giá trị. Để biết danh sách các loại mã vạch được hỗ trợ, hãy xem phần Tài liệu tham khảo. Hơn nữa, văn bản có thể xuất hiện ngay bên dưới mã vạch. Văn bản này có thể giúp bạn quét mã vạch dễ dàng hơn, cùng nhiều công dụng khác.

Mã mẫu sau đây cho biết cách ghi đè phần mã vạch của thẻ và vé để hiển thị hình ảnh phía trên mã vạch:

Python

#... rest of class
    "imageModulesData": [
        {
            "mainImage": {
                "sourceUri": {
                    "uri":  "http://farm4.staticflickr.com/3738/12440799783_3dc3c20606_b.jpg",
                    "description": "Coffee"
                }
            },
            "id": "myimage"
        }
    ],
    "classTemplateInfo": {
        "cardBarcodeSectionDetails": {
            "firstTopDetail": {
                "fieldSelector": {
                    "fields": [
                        {
                        "fieldPath": "class.imageModulesData['myimage'].mainImage"
                        }
                    ]
                }
            }
        }
    }
}
    

Java

//... rest of class
  .setImageModulesData((new ArrayList<ImageModuleData>() {
    {
      add((new ImageModuleData())
        .setId("myimage")
        .setMainImage((new Image()).setSourceUri((new ImageUri()).setDescription("Coffee beans")
          .setUri("http://farm4.staticflickr.com/3738/12440799783_3dc3c20606_b.jpg"))));
        }
      }))
      .setClassTemplateInfo((new ClassTemplateInfo())
        .setCardBarcodeSectionDetails((new CardBarcodeSectionDetails())
          .setFirstTopDetail((new BarcodeSectionDetail())
            .setFieldSelector((new FieldSelector())
              .setFields((new ArrayList<FieldReference>(){
                {
                  add((new FieldReference()).setFieldPath("class.imageModulesData['myimage'].mainImage"));
                }
            })))))
      }
    

PHP

//... rest of class
    $imageUri = new Google_Service_Walletobjects_ImageUri();
    $imageUri->setUri("https://farm8.staticflickr.com/7340/11177041185_a61a7f2139_o.jpg");
    $imageUri->setDescription("Baconrista flights image");
    $image = new Google_Service_Walletobjects_Image();
    $image->setSourceUri($imageUri);
    $imageModulesData = new Google_Service_Walletobjects_ImageModuleData();
    $imageModulesData->setMainImage($image);
            $imageModulesData->setId("myimage");

    $cardBarcodeFieldReference = new Google_Service_Walletobjects_FieldReference();
    $cardBarcodeFieldReference->setFieldPath("class.imageModulesData['myimage'].mainImage");

    $cardBarcodeFieldSelector = new Google_Service_Walletobjects_FieldSelector();
    $cardBarcodeFieldSelector->setFields(array($cardBarcodeFieldReference));

    $cardBarcodeDetail = new Google_Service_Walletobjects_BarcodeSectionDetail();
    $cardBarcodeDetail->setFieldSelector($cardBarcodeFieldSelector);

    $cardBarcodeSectionDetails = new Google_Service_Walletobjects_CardBarcodeSectionDetails();
    $cardBarcodeSectionDetails->setFirstTopDetail($cardBarcodeDetail);

    $classTemplateInfo = new Google_Service_Walletobjects_ClassTemplateInfo();
    $classTemplateInfo->setCardBarcodeSectionDetails($cardBarcodeSectionDetails);

    $payload->setClassTemplateInfo($classTemplateInfo);
            $payload->setImageModuleData($imageModulesData);
    

Mã này tạo một thẻ và vé có định dạng phần mã vạch như sau:

Ví dụ về mã vạch thẻ ghi đè.

Nếu bạn không ghi đè phần mã vạch, hệ thống sẽ sử dụng các trường mã vạch mặc định. Để biết thêm thông tin, hãy xem phần Mẫu mặc định.

Phần cuối trang

Android

Các mục và phần dưới cùng của mẫu chi tiết
  • Hành trình nhiều chặng
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[0].item
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[1].item
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[2].item
  • ...

Web

Các mục và phần dưới cùng của mẫu chi tiết
  • Hành trình nhiều chặng
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[0].item
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[1].item
  • class.classTemplateInfo.detailsTemplateOverride
      .detailsItemInfos[2].item
  • ...

Phần dưới cùng là danh sách các mục class.classTemplateInfo.detailsTemplateOverride.detailsItemInfos[]. Các mục có thể chứa bất kỳ loại trường dữ liệu có cấu trúc, trường mô-đun văn bản, trường mô-đun liên kết, trường mô-đun hình ảnh hoặc thông báo nào.

Mỗi mục có thể được xác định là một bộ chọn trường (.firstValue), hai bộ chọn trường (.firstValue và .secondValue) hoặc một mục được xác định trước (.predefinedItem). Cả giá trị của trường đã chọn và nhãn tương ứng đều được hiển thị. Khi bạn xác định hai bộ chọn trường, giá trị của các trường đã chọn sẽ được hiển thị bằng dấu phân tách "/". Điều này cũng áp dụng cho nhãn của các trường đã chọn. Các mục được xác định trước dùng để xác định hoạt động kết xuất phức tạp hơn. Các trường của mô-đun hình ảnh được hiển thị ở chế độ toàn chiều rộng mà không có nhãn.

Đoạn mã mẫu sau đây cho thấy cách ghi đè phần dưới cùng của thẻ và vé để hiện một trường linksModuleData kèm theo nhãn:

Python

//... rest of class
   "linksModuleData": {
        "uris": [
            {
                "uri": "http://maps.google.com/",
                "description": "Nearby Locations",
                "id":"mylink"
            }
        ]
    },
   "classTemplateInfo": {
        "detailsTemplateOverride": {
            "detailsItemInfos": [
                {
                    "item":{
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.linksModuleData.uris['mylink']"
                            }]
                        }
                    }
                }
            ]
        }
     }
//... rest of class
    

Java

 //... rest of class
  .setLinksModuleData((new ArrayList<LinksModuleData>() {
    {
      add((new LinksModuleData()).setDescription("Nearby Locations")
        .setUri("http://maps.google.com/")
        .setId("mylink"));
      }))
      .setClassTemplateInfo((new ClassTemplateInfo())
        .setDetailsTemplateOverride((new DetailsTemplateOverride())
          .setDetailsItemInfos(new ArrayList<DetailsItemInfo>(){
            {
              add((new DetailsItemInfo())
                .setItem((new TemplateItem()).setFirstValue((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
                  {
                    add((new FieldReference()).setFieldPath("class.linksModuleData.uris['mylink']"));
                  }
                }))));
              }
            }))
//... rest of class
    

PHP

    //... rest of class building
    $locationUri = new Google_Service_Walletobjects_Uri();
    $locationUri->setUri("http://maps.google.com/");
    $locationUri->setDescription("Nearby Locations");
    $locationUri->setId("mylink");

    $linksModuleData = new Google_Service_Walletobjects_LinksModuleData();
    $linksModuleData->setUris(array($locationUri));

    $detailItemFieldReference = new Google_Service_Walletobjects_FieldReference();
    $detailItemFieldReference->setFieldPath("class.linksModuleData.uris['mylink']");
    $detailItemFieldSelector = new Google_Service_Walletobjects_FieldSelector();
    $detailItemFieldSelector->setFields(array($detailItemFieldReference));

    $detailItem = new Google_Service_Walletobjects_TemplateItem();
    $detailItem->setFirstValue($detailItemFieldSelector);

    $detailsItemInfo = new Google_Service_Walletobjects_DetailsItemInfo();
    $detailsItemInfo->setItem($detailItem);

    $cardDetailsTemplateOverride = new Google_Service_Walletobjects_DetailsTemplateOverride();
    $cardDetailsTemplateOverride->setDetailsItemInfos(array($detailsItemInfo));

    $classTemplateInfo = new Google_Service_Walletobjects_ClassTemplateInfo();
    $classTemplateInfo->setDetailsTemplateOverride($cardDetailsTemplateOverride);

    $payload->setClassTemplateInfo($classTemplateInfo);
    $payload->setLinksModuleData($linksModuleData);
    //... rest of class
    

Mã này tạo một thẻ và vé có định dạng phần dưới cùng như sau:

Ví dụ về việc ghi đè phần dưới cùng.

Nếu một mục trống, mục đó sẽ không xuất hiện. Để biết thêm thông tin, hãy xem phần Tài liệu tham khảo về trường.

Nếu bạn không ghi đè phần dưới cùng, danh sách mặc định của các trường tham chiếu theo thứ tự mặc định sẽ xuất hiện. Để biết thêm thông tin, hãy xem phần Mẫu mặc định.

Nếu hành trình có nhiều chặng, thì một hành trình đơn giản sẽ xuất hiện ở đầu mục và không thể di chuyển. Nếu hành trình chỉ có một chặng, bạn có thể hiển thị một hành trình đơn giản bằng cách đặt class.enableSingleLegItinerary.

Hành trình nhiều chặng
  1. class.tranistType
  2. object.ticketLegs[i].originName
    hoặc object.ticketLegs[i].originStationCode
  3. object.ticketLegs[i].departureDateTime (chỉ thời gian)
  4. object.ticketLegs[i].transitOperatorName
  5. COACH hoặc class.customCoachLabel
  6. object.ticketLegs[i].ticketSeat.coach
    hoặc object.ticketLegs[i].ticketSeats[*].coach
  7. SEAT hoặc class.customSeatLabel
  8. object.ticketLegs[i].ticketSeat.seat
    hoặc object.ticketLegs[i].ticketSeat.seatAssignment
    hoặc object.ticketLegs[i].ticketSeats[*].seat
    hoặc object.ticketLegs[i].ticketSeats[*].seatAssignment
    hoặc KHÔNG CÓ GHẾ CỤ THỂ
  9. object.hexBackgroundColor
    hoặc class.hexBackgroundColor
  10. object.ticketLegs[i].destinationName
    hoặc object.ticketLegs[i].destinationStationCode
  11. object.ticketLegs[i].arrivalDateTime (chỉ thời gian)
  12. CHUYỂN SANG: NỀN TẢNG
    hoặc CHUYỂN SANG: class.customPlatformLabel
    hoặc CHUYỂN (nếu không xác định nền tảng)
  13. object.ticketLegs[i+1].platform

Mẫu danh sách

Liệt kê các phần tử mẫu
  1. class.classTemplateInfo.listTemplateOverride
      .firstRowOption.fieldOption.fields[]
  2. object.ticketLeg.departureDateTime (đã nhóm)
    hoặc class.classTemplateInfo.listTemplateOverride
      .secondRowOption.fields[]
  3. class.logo
  4. object.hexBackgroundColor
    hoặc class.hexBackgroundColor
  5. <# passes> (được nhóm)

Phần mẫu danh sách được dùng để chọn trường sẽ hiển thị trong chế độ xem "Thẻ và vé" của ứng dụng Google Wallet. Thẻ và vé được thể hiện trong danh sách bằng biểu trưng, màu nền và ba hàng.

Mã mẫu sau đây cho biết cách ghi đè mẫu danh sách của một thẻ và vé để hiện trường ngày hết hạn của một đối tượng thẻ và vé trong hàng đầu tiên của mẫu danh sách:

Python

#... rest of class definition
   "classTemplateInfo": {
        "listTemplateOverride":{
            "firstRowOption": {
                "fieldOption":{
                    "fields": [{
                        "fieldPath": "object.validTimeInterval.end"
                    }]
                }
            }
        }
   }
}
    

Java

//... rest of class
  .setClassTemplateInfo((new ClassTemplateInfo())
    .setListTemplateOverride((new ListTemplateOverride())
      .setFirstRowOption((new FirstRowOption())
        .setFieldOption((new FieldSelector()).setFields(new ArrayList<FieldReference>(){
          {
            add((new FieldReference()).setFieldPath("object.validTimeInterval.end"));
          }
        }))))
//... rest of class
    

PHP

    //... rest of class
    $fieldReference = new Google_Service_Walletobjects_FieldReference();
    $fieldReference->setFieldPath("object.validTimeInterval.end");

    $fieldOption = new Google_Service_Walletobjects_FieldSelector();
    $fieldOption->setFields(array($fieldReference));

    $firstRowOption = new Google_Service_Walletobjects_FirstRowOption();
    $firstRowOption->setFieldOption($fieldOption);

    $listTemplateOverride = new Google_Service_Walletobjects_ListTemplateOverride();
    $listTemplateOverride->setFirstRowOption($firstRowOption);

    $classTemplateInfo = new Google_Service_Walletobjects_ClassTemplateInfo();
    $classTemplateInfo->setListTemplateOverride($listTemplateOverride);

    $payload->setClassTemplateInfo($classTemplateInfo);
    //... rest of class
    

Mã này tạo một thẻ và vé có bản kết xuất mẫu danh sách sau:

Ví dụ về cơ chế ghi đè danh sách.

Bạn có thể xác định hàng đầu tiên bằng bộ chọn trường hoặc hàng này sẽ hiển thị thông tin tóm tắt về hành trình. Định dạng của bản tóm tắt có thể là một trong những định dạng sau:

  • originAndDestinationCodes
  • originAndDestinationNames
  • originName

Bạn chỉ có thể xác định hàng thứ hai và thứ ba bằng bộ chọn trường. Các trường được hiển thị mà không có nhãn. Đối với thẻ và vé được nhóm, hàng thứ hai luôn cho biết ngày khởi hành và hàng thứ ba luôn cho biết số lượng thẻ và vé được nhóm.

Nhãn

Tất cả các trường dữ liệu có cấu trúc đều có nhãn do Google cung cấp. Google chịu trách nhiệm cung cấp bản dịch cho từng nhãn này bằng tất cả ngôn ngữ được hỗ trợ.

Bạn có thể tuỳ chỉnh một số nhãn này bằng một trong các trường class.custom<name_of_the_field>Label. Khi tuỳ chỉnh một nhãn, bạn có trách nhiệm cung cấp bản dịch cho nhãn cụ thể đó bằng tất cả ngôn ngữ mà bạn muốn hỗ trợ.

Tham chiếu trường

Tham chiếu trường được dùng trong nhiều phần của mẫu có dạng class.classTemplateInfo.*.fields[]. Tham chiếu trường chứa danh sách đường dẫn đến các trường dữ liệu có cấu trúc, trường mô-đun văn bản, trường mô-đun đường liên kết, trường mô-đun hình ảnh hoặc thông báo.

Không phải loại đường dẫn nào cũng được phép trong mọi tham chiếu trường. Ví dụ: một số tham chiếu trường chỉ cho phép đường dẫn đến các trường dữ liệu có cấu trúc dựa trên văn bản hoặc các trường mô-đun văn bản. Trường có cấu trúc dựa trên văn bản là các trường dữ liệu có cấu trúc thuộc loại chuỗi, chuỗi được bản địa hoá, ngày hoặc tiền tệ.

Bạn có thể dùng danh sách này để triển khai logic dự phòng. Điều này có nghĩa là nếu đường dẫn đầu tiên trong danh sách phân giải thành một trường trống, thì đường dẫn tiếp theo sẽ được đánh giá. Logic dự phòng chủ yếu nhắm đến các trường dữ liệu có cấu trúc dựa trên văn bản hoặc các trường mô-đun văn bản. Đừng kết hợp các loại trường khác nhau trong cùng một danh sách. Hãy thận trọng khi sử dụng logic dự phòng và chỉ sử dụng trong những trường hợp cụ thể khi bạn muốn có một mẫu trường nhất quán tồn tại trong một số đối tượng nhưng không tồn tại trong các đối tượng khác. Trong hầu hết trường hợp, việc tạo các lớp riêng biệt cho các trường hợp sử dụng riêng biệt sẽ dễ dàng hơn.

Nếu tất cả đường dẫn trong danh sách tham chiếu trường đều phân giải thành các trường trống, thì mục sử dụng tham chiếu trường sẽ không xuất hiện. Nếu bạn muốn mục sử dụng tham chiếu trường luôn xuất hiện, hãy đảm bảo rằng ít nhất một đường dẫn không trống. Bạn nên đặt một trường thành ký tự đặc biệt, chẳng hạn như "-", để biểu thị giá trị rỗng, ngay cả khi một số trường cho phép chuỗi chỉ có dấu cách.

Để tham chiếu một trường có trong danh sách, bạn có thể sử dụng chỉ mục của trường trong danh sách hoặc trong hầu hết các trường hợp, bạn có thể sử dụng mã tham chiếu. Các mục trong danh sách có thể được tham chiếu theo mã nhận dạng có trường .id. Bạn nên sử dụng mã nhận dạng tham chiếu thay vì chỉ mục của trường trong danh sách (nếu có).

Dưới đây là ví dụ về cách tham chiếu các trường có trong danh sách.

  • object.imageModulesData[0].id = my-first-id
  • object.imageModulesData[1].id = my-second-id
  • class.detailsTemplateOverride.detailsItemInfos[0].item.firstValue.fields[0].fieldPath = object.imageModulesData[‘my-second-id’]
  • class.detailsTemplateOverride.detailsItemInfos[1].item.firstValue.fields[0].fieldPath = object.imageModulesData[0]

Trong trường hợp này, mục đầu tiên trong phần chi tiết của thẻ là hình ảnh thứ hai được khai báo trong đối tượng. Trong khi đó, mục thứ hai trong phần chi tiết của thẻ và vé là hình ảnh đầu tiên được khai báo trong đối tượng.

Mẫu mặc định

Android

Các thành phần và vị trí bố cục mặc định của mẫu thẻ và vé
  1. class.logo
  2. class.localizedIssuerName
    hoặc class.issuerName
  3. Xem tiêu đề thẻ
  4. KHỞI HÀNH hoặc CÓ HIỆU LỰC TỪ
  5. object.ticketLeg.departureDateTime (ngày và giờ)
    hoặc object.validTimeInterval.start.date
  6. ĐẾN hoặc CÓ HIỆU LỰC ĐẾN
  7. object.ticketLeg.arrivalDateTime (chỉ thời gian)
    hoặc object.validTimeInterval.end.date
  8. PASSENGER
  9. object.passengerNames
  10. CARRIAGE hoặc class.customCarriageLabel
  11. object.ticketLeg.carriage
  12. COACH hoặc class.customCoachLabel
  13. object.ticketLeg.ticketSeat.coach
  14. SEAT hoặc class.customSeatLabel
  15. object.ticketLeg.ticketSeat.seat
    hoặc object.ticketLeg.ticketSeat.seatAssignment
  16. object.barcode.type và object.barcode.value
    hoặc object.ticketNumber
  17. object.barcode.alternateText
  18. object.hexBackgroundColor
    hoặc class.hexBackgroundColor
  19. Hành trình nhiều chặng
  20. SỐ VÉ hoặc class.customTicketNumberLabel
  21. object.ticketNumber
  22. TRẠNG THÁI VÉ
  23. object.ticketStatus hoặc object.customTicketStatus
  24. KHỞI HÀNH
  25. object.ticketLeg.departureDateTime
  26. THỜI GIAN ĐẾN
  27. object.ticketLeg.arrivalDateTime
  28. TÊN GIÁ VÉ hoặc class.customFareNameLabel
  29. object.ticketLeg.fareName
  30. NỀN TẢNG hoặc class.customPlatformLabel
  31. object.ticketLeg.platform
  32. ZONE hoặc class.customZoneLabel
  33. object.ticketLeg.zone
  34. Hạng vé hoặc class.customFareClassLabel
  35. object.ticketLeg.ticketSeat.fareClass
    hoặc object.ticketLeg.ticketSeat.customFareClass
  36. DANH MỤC ƯU ĐÃI
    hoặc class.customConcessionCategoryLabel
  37. object.concessionCategory
    hoặc object.customConcessionCategory
  38. HẠN CHẾ TUYẾN ĐƯỜNG
    hoặc class.customRouteRestrictionsLabel
  39. object.ticketRestrictions.routeRestrictions
  40. CHI TIẾT HẠN CHẾ VỀ LỘ TRÌNH
    hoặc class.customRouteRestrictionsDetailsLabel
  41. object.ticketRestrictions.routeRestrictionsDetails
  42. HẠN CHẾ VỀ THỜI GIAN
    hoặc class.customTimeRestrictionsLabel
  43. object.ticketRestrictions.timeRestrictions
  44. CÁC QUY ĐỊNH HẠN CHẾ KHÁC
    hoặc class.customOtherRestrictionsLabel
  45. object.ticketRestrictions.otherRestrictions
  46. SỐ BIÊN NHẬN
    hoặc class.customPurchaseReceiptNumberLabel
  47. object.purchaseDetails.purchaseReceiptNumber
  48. NGÀY MUA
  49. object.purchaseDetails.purchaseDateTime
  50. MÃ TÀI KHOẢN
  51. object.purchaseDetails.accountId
  52. MÃ XÁC NHẬN
    hoặc class.customConfirmationCodeLabel
  53. object.purchaseDetails.confirmationCode
  54. MỆNH GIÁ hoặc class.customPurchaseFaceValueLabel
  55. object.purchaseDetails.ticketCost.faceValue
  56. PRICE hoặc class.customPurchasePriceLabel
  57. object.purchaseDetails.ticketCost.purchasePrice
  58. THÔNG ĐIỆP VỀ CHIẾT KHẤU
    hoặc class.customDiscountMessageLabel
  59. object.purchaseDetails.ticketCost.discountMessage
  60. class.imageModulesData[0].mainImage
  61. object.imageModulesData[0].mainImage
  62. class.messages[].header
  63. class.messages[].body
  64. object.messages[].header
  65. object.messages[].body
  66. class.textModulesData[0..9].header
  67. class.textModulesData[0..9].body
  68. object.textModulesData[0..9].header
  69. object.textModulesData[0..9].body
  70. class.linksModuleData.uris[].description
  71. object.linksModuleData.uris[].description

Web

Các thành phần và vị trí bố cục mặc định của mẫu thẻ và vé
  1. class.logo
  2. class.localizedIssuerName
    hoặc class.issuerName
  3. Xem tiêu đề thẻ
  4. KHỞI HÀNH hoặc CÓ HIỆU LỰC TỪ
  5. object.ticketLeg.departureDateTime (ngày và giờ)
    hoặc object.validTimeInterval.start.date
  6. ĐẾN hoặc CÓ HIỆU LỰC ĐẾN
  7. object.ticketLeg.arrivalDateTime (chỉ thời gian)
    hoặc object.validTimeInterval.end.date
  8. PASSENGER
  9. object.passengerNames
  10. CARRIAGE hoặc class.customCarriageLabel
  11. object.ticketLeg.carriage
  12. COACH hoặc class.customCoachLabel
  13. object.ticketLeg.ticketSeat.coach
  14. SEAT hoặc class.customSeatLabel
  15. object.ticketLeg.ticketSeat.seat
    hoặc object.ticketLeg.ticketSeat.seatAssignment
  16. object.barcode.type và object.barcode.value
    hoặc object.ticketNumber
  17. object.barcode.alternateText
  18. object.hexBackgroundColor
    hoặc class.hexBackgroundColor
  19. Hành trình nhiều chặng
  20. SỐ VÉ hoặc class.customTicketNumberLabel
  21. object.ticketNumber
  22. TRẠNG THÁI VÉ
  23. object.ticketStatus hoặc object.customTicketStatus
  24. KHỞI HÀNH
  25. object.ticketLeg.departureDateTime
  26. THỜI GIAN ĐẾN
  27. object.ticketLeg.arrivalDateTime
  28. TÊN GIÁ VÉ hoặc class.customFareNameLabel
  29. object.ticketLeg.fareName
  30. NỀN TẢNG hoặc class.customPlatformLabel
  31. object.ticketLeg.platform
  32. ZONE hoặc class.customZoneLabel
  33. object.ticketLeg.zone
  34. Hạng vé hoặc class.customFareClassLabel
  35. object.ticketLeg.ticketSeat.fareClass
    hoặc object.ticketLeg.ticketSeat.customFareClass
  36. DANH MỤC ƯU ĐÃI
    hoặc class.customConcessionCategoryLabel
  37. object.concessionCategory
    hoặc object.customConcessionCategory
  38. HẠN CHẾ TUYẾN ĐƯỜNG
    hoặc class.customRouteRestrictionsLabel
  39. object.ticketRestrictions.routeRestrictions
  40. CHI TIẾT HẠN CHẾ VỀ LỘ TRÌNH
    hoặc class.customRouteRestrictionsDetailsLabel
  41. object.ticketRestrictions.routeRestrictionsDetails
  42. HẠN CHẾ VỀ THỜI GIAN
    hoặc class.customTimeRestrictionsLabel
  43. object.ticketRestrictions.timeRestrictions
  44. CÁC QUY ĐỊNH HẠN CHẾ KHÁC
    hoặc class.customOtherRestrictionsLabel
  45. object.ticketRestrictions.otherRestrictions
  46. SỐ BIÊN NHẬN
    hoặc class.customPurchaseReceiptNumberLabel
  47. object.purchaseDetails.purchaseReceiptNumber
  48. NGÀY MUA
  49. object.purchaseDetails.purchaseDateTime
  50. MÃ TÀI KHOẢN
  51. object.purchaseDetails.accountId
  52. MÃ XÁC NHẬN
    hoặc class.customConfirmationCodeLabel
  53. object.purchaseDetails.confirmationCode
  54. MỆNH GIÁ hoặc class.customPurchaseFaceValueLabel
  55. object.purchaseDetails.ticketCost.faceValue
  56. PRICE hoặc class.customPurchasePriceLabel
  57. object.purchaseDetails.ticketCost.purchasePrice
  58. THÔNG ĐIỆP VỀ CHIẾT KHẤU
    hoặc class.customDiscountMessageLabel
  59. object.purchaseDetails.ticketCost.discountMessage
  60. class.imageModulesData[0].mainImage
  61. object.imageModulesData[0].mainImage
  62. class.messages[].header
  63. class.messages[].body
  64. object.messages[].header
  65. object.messages[].body
  66. class.textModulesData[0..9].header
  67. class.textModulesData[0..9].body
  68. object.textModulesData[0..9].header
  69. object.textModulesData[0..9].body
  70. class.linksModuleData.uris[].description
  71. object.linksModuleData.uris[].description

Đối với các trường mô-đun hình ảnh, chúng tôi chỉ hiển thị một trường mô-đun hình ảnh từ lớp và một trường mô-đun hình ảnh từ đối tượng. Nếu bạn cần nhiều trường mô-đun hình ảnh ở một trong hai cấp, hãy ghi đè mẫu mặc định.

Đối với các trường mô-đun văn bản, chúng tôi chỉ hiển thị tối đa 20 trường mô-đun văn bản từ lớp và 20 trường mô-đun văn bản từ đối tượng. Các trường được hiển thị theo cùng thứ tự mà chúng được xác định trong mảng. Nếu bạn cần nhiều hơn 20 trường mô-đun văn bản ở một trong hai cấp, hãy ghi đè mẫu mặc định.

Đối với thông báo, chúng tôi chỉ hiển thị tối đa 20 thông báo từ lớp và 20 thông báo từ đối tượng. Chúng tôi không đảm bảo thứ tự của các thông báo. Nếu bạn cần nhiều hơn 20 thông báo ở một trong hai cấp hoặc cần đảm bảo cho bất kỳ đơn đặt hàng nào, hãy ghi đè mẫu mặc định.

Đối với trường mô-đun đường liên kết, không có giới hạn về số lượng URI mà bạn có thể xác định. URI được hiển thị theo nhóm theo thứ tự sau cho mỗi cấp (lớp hoặc đối tượng):

  1. Toạ độ bản đồ
  2. Số điện thoại
  3. Địa chỉ email
  4. Các trang web

Đối với mỗi nhóm, các URI sẽ xuất hiện theo thứ tự mà chúng được xác định trong mảng. Nếu bạn cần một thứ tự khác, hãy ghi đè mẫu mặc định.

Các phần tử và vị trí của bố cục mẫu danh sách mặc định
  1. (object.ticketLeg.originName
      và object.ticketLeg.destinationName)
    hoặc (object.ticketLeg.originStationCode
      và object.ticketLeg.destinationStationCode)
    hoặc object.ticketLeg.originName
  2. object.ticketLeg.departureDateTime
    hoặc object.validTimeInterval.end.date
  3. class.logo
  4. object.hexBackgroundColor
    hoặc class.hexBackgroundColor
  5. <# passes> (được nhóm)