Shopping configurations (iOS)

Customize shopping view configuration

To customize shopping view configuration, you need to set FireworkVideoShoppingDelegate delegate first:

FireworkVideoSDK.shopping.delegate = <FireworkVideoShoppingDelegate delegate>

Then you need to implement fireworkShopping(_:willDisplayProductInfo:forVideo:) method.

func fireworkShopping(
    _ fireworkShopping: FireworkVideoShopping,
    willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
    forVideo video: VideoDetails
) {
    var shoppingCartIconConfig = ShoppingCartIconConfiguration()
    // Specifies if the cart icon is visible
    shoppingCartIconConfig.isHidden = false
    // Specifies if the cart icon red indicator is visible
    shoppingCartIconConfig.indicator.isHidden = false
    // Apply the shopping cart icon configuration
    productInfoViewConfigurator.shoppingCartIconConfiguration = shoppingCartIconConfig

    var productDetailsContentConfig = ProductDetailsContentConfiguration()
    // Specifies Firework PDP primary CTA button background color
    productDetailsContentConfig.ctaButton.buttonConfiguration.backgroundColor = .black
    // Specifies Firework PDP primary CTA button text color
    productDetailsContentConfig.ctaButton.buttonConfiguration.textColor = .white
    // Specifies Firework PDP primary CTA button font
    productDetailsContentConfig.ctaButton.buttonConfiguration.font = .boldSystemFont(ofSize: 14)
    // Specifies Firework PDP primary CTA button shape: roundRectangle or oval
    productDetailsContentConfig.ctaButton.buttonConfiguration.shape = .oval
    // Specifies the shopping primary CTA button text to be displayed: "Add to card" or "Shop now"
    productDetailsContentConfig.ctaButton.text = .shopNow

    // Specifies Firework PDP secondary CTA button background color
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.backgroundColor = .black
    // Specifies Firework PDP secondary CTA button text color
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.textColor = .white
    // Specifies Firework PDP secondary CTA button font
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.font = .boldSystemFont(ofSize: 14)
    // Specifies Firework PDP secondary CTA button shape: roundRectangle or oval
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.shape = .oval
    // Specifies Firework PDP secondary CTA button border color
    productDetailsContentConfig.secondaryCtaButton.borderColor = .black

    // Specifies if the Firework PDP link button is hidden
    productDetailsContentConfig.linkButtonConfiguration.isHidden = false
    // Customize unavailabe text. Default to "Unavailable".
    // The custom text need to be translated if your app supports multiple languages.
    productDetailsContentConfig.unavailableText = .custom("custom text")

    // Apply the product details configuration
    productInfoViewConfigurator.productDetailsConfiguration = productDetailsContentConfig

    // The config only applies to video product card
    var productCardConfig = ProductCardConfiguration()
    // Specifies the appearance of the video product card
    productCardConfig.appearance = .light

    // Specifies the video product card CTA button text: "Buy now" or "Shop now"
    productCardConfig.ctaConfig.text = .buyNow
    // Specifies the video product card CTA button text color
    productCardConfig.ctaConfig.textColor = .black
    // Specifies the video product card CTA button font
    productCardConfig.ctaConfig.font = .systemFont(ofSize: 12)
    // Specifies if the video product card CTA Button is visible
    productCardConfig.ctaConfig.isHidden = true

    // Specifies the axis the price labels should use in relation to one another
    productCardConfig.priceConfiguration.axis = horizontal

    // Specifies the label text color of price
    productCardConfig.priceConfiguration.priceLabel.textColor = .white
    // Specifies the label text font of price
    productCardConfig.priceConfiguration.priceLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of price
    productCardConfig.priceConfiguration.priceLabel.numberOfLines = 1

    // Specifies the label text color of original price
    productCardConfig.priceConfiguration.originalPriceLabel.textColor = .white
    // Specifies the label text font of original price
    productCardConfig.priceConfiguration.originalPriceLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of original price
    productCardConfig.priceConfiguration.originalPriceLabel.numberOfLines = 1

    // Configure the default display order is [priceLabel, originalPriceLabel]
    // When the value is `true`, the order is reversed
    productCardConfig.priceConfiguration.isPriceFirst = true

    // Specifies the corner radius to be applied to the video product card
    productCardConfig.cornerRadius = 4
    // Specifies the size of the video product card
    productCardConfig.size = CGSize(width: 218, height: 88)
    // Specifies the background color for the video product card
    productCardConfig.backgroundColor = .white
    // Specifies the corner radius to be applied to the product icon
    productCardConfig.productIcon.cornerRadius = 6

    // Specifies the label text color of product name
    productCardConfig.nameLabel.textColor = .white
    // Specifies the label text font of product name
    productCardConfig.nameLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of product name
    productCardConfig.nameLabel.numberOfLines = 1

    // Apply the product card configuration
    productInfoViewConfigurator.productCardConfiguration = productCardConfig

    // The config only applies to the V2 video product card
    var productCardV2Config = ProductCardV2Configuration()
    // Specifies the background color for the V2 video product card
    // If not set, the default gradient background will be applied
    productCardV2Config.backgroundColor = .white
    // Specifies the corner radius to be applied to the V2 video product card
    productCardV2Config.cornerRadius = 8
    // Specifies the border color of the V2 video product card
    productCardV2Config.borderConfiguration.color = UIColor.white.withAlphaComponent(0.7)

    // Specifies the label text color of product name
    productCardV2Config.nameLabel.textColor = .black

    // Specifies the label text color of price
    productCardV2Config.priceConfiguration.priceLabel.textColor = .black
    // Specifies the label text color of discount
    productCardV2Config.priceConfiguration.discountLabel.textColor = .red
    // Specifies the label text color of original price
    productCardV2Config.priceConfiguration.originalPriceLabel.textColor = .gray

    // Apply the V2 product card configuration
    productInfoViewConfigurator.productCardV2Configuration = productCardV2Config
}

If you wish to customize the video product card with a custom view, please refer to Customize product card on videos using the custom view (iOS).