Shopping

Callbacks

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.

onUpdateProductDetails

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;
};

onWillDisplayProduct(Only supported on iOS)

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,
      ),
    );
  };
}

onAddToCart

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",
  );
}

onCustomClickCartIcon

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');
};

Navigate to the Flutter page from the video player

When users click the cart icon, we could navigate to the Flutter page, such as the cart page.

On the iOS side

The host app needs to return the FlutterViewController instance in SwiftFireworkFlutterSdkPlugin.customCartPageProvdier. The sample file is AppDelegate.swift.

On the Android side

The host app needs to set FireworkFlutterSdkPlugin.cartFragmentDelegate and return FlutterFragment instance in getFragment method. The sample file is MainActivity.kt.

On the Dart side

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 remove new_native_container from 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.

Properties

cartIconVisible

Defaults to true. You can hide the cart icon by setting this property to false.

Method

setCartItemCount

// The host app call this method to sycn cart item count to Firework SDK.
FireworkSDK.getInstance().shopping.setCartItemCount(cartItemCount);

Reference

VideoShopping