Shopping
Firework SDK triggers shopping callbacks whenever appropriate to ask for product details updates, custom cart page and cart icon style, 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.
FireworkSDK.getInstance().shopping.onUpdateProductDetails =
(UpdateProductDetailsEvent? event) async {
if (event == null) {
return null;
}
List<Product> products = [];
for (var productId in event.productIds) {
final product = Product(
productId: productId,
name: "latest-product-name",
description: "latest-product-description",
);
products.add(product);
}
return products;
};
Triggered when the product will be shown. The host app can return a ProductInfoViewConfiguration object to configure configure "Add to cart" button.
FireworkSDK.getInstance().shopping.onWillDisplayProduct =
(WillDisplayProductEvent? event) async {
// return the style of "Add to cart" button.
return ProductInfoViewConfiguration(
addToCartButton: AddToCartButtonConfiguration(
backgroundColor: "#c0c0c0",
textColor: "#ffffff",
fontSize: 16,
),
);
};
}
Triggered when the user clicks the "Add to cart" button. The host app can return an AddToCartResult object to tell FireworkSDK the result of adding to cart.
FireworkSDK.getInstance().shopping.onAddToCart =
(AddToCartEvent? event) async {
// The host app handles the process of adding to cart
// return the result of adding to cart
return AddToCartResult(
res: AddToCartResponse.success,
tips: "Add to cart successfully",
);
}
If you don't want to handle hybrid navigation when users click the cart icon, you could set
onCustomClickCartIcon. As follows, you could close the player and push the Flutter cart page in the Flutter navigation stack when users click the cart icon.FireworkSDK.getInstance().shopping.onCustomClickCartIcon =
() async {
FireworkSDK.getInstance().navigator.popNativeContainer();
// if the context is valid when users click cart icon, you could also call
// Navigator.of(context).pushNamed to push the Flutter cart page.
globalNavigatorKey.currentState?.pushNamed('/cart');
};
When users click the cart icon, we could navigate to the Flutter page, such as the cart page.
The host app needs to return the
FlutterViewController instance in SwiftFireworkFlutterSdkPlugin.customCartPageProvdier. The sample file is AppDelegate.swift.The host app needs to set
FireworkFlutterSdkPlugin.cartFragmentDelegate and return FlutterFragment instance in getFragment method. The sample file is MainActivity.kt.- 1.Add route configuration for the cart page. For example, we could set the route name to
/cart. The sample file is routes.dart. - 2.In the sample project, we add
new_native_container(or any other custom prefix without/) to the prefix of route name, which could avoid rendering the screen whose route name is/in the new engine. Therefore, we need to removenew_native_containerfrom the route name. The sample file is my_app.dart. - 3.Custom back button of the app bar. For the new native container, we need to call
FireworkSDK.getInstance().navigator.popNativeContainer()to pop the native container. The sample file is fw_app_bar.dart.
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 3mo ago