Customize product card using the custom view(restricted API)

This is a restricted API and we only support that on iOS now.


  1. Create a custom view class to implement the ProductCardViewRepresentable protocol.

import FireworkVideo

class CustomProductView: UIView, ProductCardViewRepresentable {
    lazy var label: UILabel = UILabel(frame: .zero)
    lazy var detailsLabel: UILabel = .init(frame: .zero)
     Called before a product card is reused.
     - Note: This is an opportunity to clean up the product card UI elements
     func prepareForReuse() {
         label.text = ""
         detailsLabel.text = ""
      Called before a product card will be displayed on screen
      - Important: It is best to avoid network calls when this method is invoked. The product card is just moments from being rendered and network calls
      at this stage would provide a degraded user experience. Please use the hydration API to perform any product data updates.
      - Note: This is the opportunity to update the product card UI with product specific details
      - Parameters:
       - product: The product details associated to the view that will be displayed
       - video: The details of the video the product is associated with.
     func updateViewForProduct(_ product: ProductCardDetails, associatedTo video: VideoDetails) {
         label.text =
         detailsLabel.text = "$\(product.price.amount)"
  1. Call = CustomProductView.self at the appropriate place, such as application(:, didFinishLaunchingWithOptions:) -> Bool.

import FireworkVideo

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool { = CustomProductView.self
    return true

Last updated