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
}
Last updated
Was this helpful?