FireworkVideoSDK contains a
shoppingproperty that enables video shopping integration. There are two main points of integration both located on the
FireworkVideoShoppingDelegateto receive important shopping events.
FireworkVideoSDK.shopping.delegate = <Your delegate>
The shopping lifecycle events provide opportinities to customize the product views, hydrate product information and handle when a user adds a product variant to the cart.
fireworkShopping(_:willDisplayProductInfo:forVideo:)method is called it gives the host app a chance to configure the view that will be displayed. Similar to how view configurations work on the
VideoFeedViewControllerthe properties are value types and must be reassigned to the
configuratorbefore the changes will be applied.
The following items can be configured:
- 1.Shopping Cart icon
- 1.isHidden - Important: When setting this value to
- 2.indicator - (Used to indicate to the user that there is an item in their cart)
- 1.isHidden - if the indicator is hidden or not
- 2.Add to button
- 1.Button color
- 2.Button font
- 3.Button text color
For more detailed examples see the Sample App Code.
fireworkShopping(_:updateDetailsForProducts:forVideo:_:)method will be called when a video will be shown that contains products. It is at this point when the host app will be able to update the associated product information.
See the Sample App Code for examples of how to hydrate with Shopify.
fireworkShopping(_:addProductVariantToCart:fromVideo:_:)method is called when the user has selected the "Add to cart" button and will pass the ids of the product and variant of the selected item.
The host app must call the
addToCartCompletionHandlerto inform the next action to perform.
showEmbeddedCart- When sepecifying this action the SDK will request a
FireworkVideoSDK.shopping.cartProvider; see Providing an embedded cart view for more details.
dismissWithFeedback- When specifying this action the SDK will dismiss the Product summary drawer and display a toast message to the user.
Note: If no action is provided within 2 seconds the SDK will assume the item was not successfully added.
Important: it is at this point when the host app should add the item to the user's cart as they have indicated intent to buy this product.
The host app can embed their own custom cart view which will be displayed directly within the Firework Video Player. This custom cart view can be shown within the Firework Video Player after the following actions occur:
- User clicks cart icon - The host app must setup the configuration to show a shopping icon; see Shopping View Configuration for more details.
- Host app returns
AddToCartAction- This is sequence occurs after the user selects "Add to cart".
The host app must supply a mechanism that conforms to
CartViewProvidingin order to provide a
CartViewController. A provider must be assigned on the
FireworkVideoSDK.shopping.cartProviderproperty. If no provider is set the actions above will be replaced with these actions; respectively:
- User clicks cart icon - Nothing.
- Host app returns
AddToCartAction- SDK treats this as a success and will use the
drawerController: DrawerControllerRepresentableproperty which provides a func to close the cart view container.
The default action of the Link Icon to the right of the "Add to Cart" button is to open the product URL in a web view. By default, this button would be visible, but this button can be hidden if required within the event callback of the
_ fireworkShopping: FireworkVideoShopping,
willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
forVideo video: VideoDetails
productInfoViewConfigurator.productDetailsConfiguration.linkButtonConfiguration.isHidden = true
The host app can record a purchase which will help get a full picture of the user journey flow.In order to do this, call
FireworkVideoSDK.trackPurchasewhenever the purchase happens.
let totalPurchaseValue: Double = // The total value of the purchase
orderID: "<Order ID of User Purchase>",