Shopping
Firework SDK triggers shopping callbacks when asking for product details updates, users click the cart icon or "Add to cart" button, etc. It's up to the host app developer to inject custom callbacks and return feedback in the callback body. Firework SDK does not keep any state but asks for updates via callbacks.
Triggered when the video will be shown. The host app can return a Product list to update the latest product information. For example, the host apps could fetch the latest product information from their own servers.
FireworkSDK.getInstance().shopping.onUpdateProductDetails = async (event) => {
let products: Product[] = []
for (let productId of event.productIds) {
let product: Product = { productId: productId };
// The latest product information can be fetched from the servers of the host app.
product.name = 'latest-product-name';
product.description = 'latest-product-description';
products.push(product);
}
return products;
};
Triggered when the user clicks the shopping CTA button. And we support customizing the shopping CTA button text to "Add to cart" or "Shop now". The usage codes are:
FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
ctaButton: {
text: 'shopNow', // 'addToCart' or 'shopNow'
},
};
And host app can return a ShoppingCTAResult object to tell FireworkSDK the result. The event type is ShoppingCTAEvent.
FireworkSDK.getInstance().shopping.onShoppingCTA = async (event: ShoppingCTAEvent) => {
// start floating player
const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
if (!result) {
/* when the result is false, the current fullscreen player may not
* enable the floating player. In that case, we could call the
* following method to close the fullscreen player.
*/
await FireworkSDK.getInstance().navigator.popNativeContainer();
}
// Navigate to the RN webview of the host app.
navigation.navigate('LinkContent', { url: event.url });
return {
res: 'success',
};
}
If the floating player is enabled, the host app can also start the floating player when users click the cart icon.
FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async () => {
const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
if (!result) {
/* when the result is false, the current fullscreen player may not
* enable the floating player. In that case, we could call the
* following method to close the fullscreen player.
*/
await FireworkSDK.getInstance().navigator.popNativeContainer();
}
// Navigate to the RN cart page of the host app.
navigation.navigate('Cart');
};
Defaults to true. You can hide the cart icon by setting this property to false.
// The host app call this method to sycn cart item count to Firework SDK.
FireworkSDK.getInstance().shopping.setCartItemCount(cartItemCount);
Last modified 6d ago