Customize product card on short videos using the custom view(restricted API) iOS

Integration guide

  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 = product.name
         detailsLabel.text = "$\(product.price.amount)"
     }
}
  1. Call FireworkVideoSDK.shopping.productCardViewType = CustomProductView.self at the appropriate place, such as application(:, didFinishLaunchingWithOptions:) -> Bool.

import FireworkVideo

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

Last updated