Events Detail Page (EDP)
  • 05 Sep 2023
  • 4 Minutes to read
  • Contributors
  • Dark
    Light

Events Detail Page (EDP)

  • Dark
    Light

Article Summary

Summary

The Event Detail Page (EDP) is the starting point of the purchase flow. The fan sees information about the event they can attend, such as the date, time, and location, as well as types of tickets they can select to buy.

Features

Depending on the backend setup of the particular event, the fan would be shown a list view (list of tickets grouped by seating locations and price levels), an interactive seat map (on which the fan can tap on the exact seat they want to add to the cart), a smart queue to join (during the high-demand onsale period), or some combination of them.



How to Create One

iOS

Prior to creating any page using the Purchase framework, the framework's shared instance needs to be configured with an API key. (If you do not already have one, simply head to the Ticketmaster Developer Portal to register for one.) This only needs to be done once per launch.

TMPurchase.shared.apiKey = "<your_api_key>"

While setting up the instance with the API key, you can also optionally configure it with a brand color like so:

TMPurchase.shared.brandColor = UIColor(red: 0.0, green: 0.61, blue: 0.87, alpha: 1.0)

Once configured, the iOS Purchase framework has a simple function to create an EDP. This returns a TMPurchaseNavigationController. You can then present it on top of a UIViewController of your choice from your app.

let edpNav = TMPurchaseNavigationController.eventDetailsNavigationController(eventIdentifier: "<event_identifier>", marketDomain: .US)
present(edpNav, animated: true)

For apps that need more customization beyond the default configuration, we also have a version that allows for various configurations to be set instead of using default behaviors. For example:

let eventIdentifier = "<event_identifier>"
let config = TMPurchaseWebsiteConfiguration(eventID: eventIdentifier)
config.attractionID = "<attraction_identifier>"
config.showInfoToolbarButton = true
config.showCalendarToolbarButton = true
// . . . and other configurations . . .

let edpNav = TMPurchaseNavigationController(configuration: config)
present(edpNav, animated: true)

Additionally, the TMPurchaseNavigationController uses the delegate pattern to tell the integrating app various information. All of these are optional.

// Implement TMPurchaseSharingDelegate functions to customize the Share message
edpNav.sharingDelegate = self
// Implement TMPurchaseNavigationDelegate functions to be
// notified of UI navigations, such as the view controller being dismissed
edpNav.navigationDelegate = self
// Implement TMPurchaseUserAnalyticsDelegate functions to 
// know about steps the fan is taking, such as selecting a ticket,
// or completing a purchase
edpNav.userAnalyticsDelegate = self
// Implement TMPurchaseWebAnalyticsDelegate functions to 
// get various metadata about each page
edpNav.webAnalyticsDelegate = self


Android

TMPurchaseFragmentFactory is required so you can implement interfaces that your app can use to receive useful information from the SDK as you build EDP.

  • The factory has the following optional listeners:  TMPurchaseSharingListener, TMPurchaseUserAnalyticsListener, TMPurchaseWebAnalyticsListener, TMPurchaseFavoritesListener
  • The factory has the following required listener so you can handle navigation when Purchase has signaled it can close and other action items: TMPurchaseNavigationListener. This listener has the onPurchaseClosed callback that is accessible to you so you can close the activity or do whatever seems best for your app at that moment. Closing the activity that launched PrePurchase most likely will be your use case, as shown in the code block example below.

Don't forget to set the factory to the FragmentManager for it to create a Fragment instance.

// NOTE: The code block below will exist in the onCreate() lifecycle method of your Activity

class PurchaseNavigationListener(val closeScreen: () -> Unit): TMPurchaseNavigationListener {
  .........
  override fun onPurchaseClosed() {
    closeScreen.invoke()
  }
}

private val integratorFactory: TMPurchaseFragmentFactory by lazy {
TMPurchaseFragmentFactory(
   tmPurchaseNavigationListener = PurchaseNavigationListener() {      // required
      // close the activity in this example
      finish() 
   },
  .......                                                                // optionals
 )
}

supportFragmentManager.fragmentFactory = integratorFactory

Android has a three customizable objects to showcase an event detail page:

  • The first is the TMPurchase object that supplies the auth configs to interact with the retail SDK where the only parameter required is a valid apiKey.
  • The second is the TMPurchaseWebsiteConfiguration that has two required parameters eventId and hostType while offering various other configuration options tailored to fit your needs.
  • The third is the TMAuthentication that will handle your users' login. It requires your apiKey, your client app name and region (US or UK) you're supporting. Note that this object must be instantiated and used from a background thread.

After creating these three objects, they must bundled together with a convenience method provided from TMPurchase called getPurchaseBundle. Finally, you can create a fragment from the factory created earlier using its convenience method, instantiatePurchase with the bundle you just created as an argument.

val tmPurchase = TMPurchase(
  apiKey,                  // required
  .........                // optionals
)

val tmPurchaseWebsiteConfiguration = TMPurchaseWebsiteConfiguration(
  eventId                  // required
  marketDomain            // required
  ........                // optionals
)

val tmAuthenticationParams = TMAuthenticationParams(
  apiKey = apiKey,
  clientName = "Your App Name",
  environment = TMXDeploymentEnvironment.Production,
  region = TMXDeploymentRegion.US
)

val bundle = tmPurchase.getPurchaseBundle(
  tmPurchaseWebsiteConfiguration,
  tmAuthenticationParams
)

val fragment = factory.instantiatePurchase(classLoader).apply {
  arguments = bundle
}

supportFragmentManager.beginTransaction()
  .add(android.R.id.content, fragment)
  .commit()

Next Step in the Flow

Once the fan is satisfied with their ticket selection, they enter the next step, which is Checkout (Cart).



Was this article helpful?