Shopping (React Native)

Callbacks

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.

onUpdateProductDetails

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

onShoppingCTA

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

onCustomClickCartIcon

Triggered when the user clicks the cart icon. The cart icon is hidden by default. You could show the cart icon by the following codes:

FireworkSDK.getInstance().shopping.cartIconVisible = true;

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 (event) => {
  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');
};

onCustomClickLinkButton

This callback is triggered when the user clicks the product card. The host app can customize the tap event processing logic of the link button by setting the callback. The event type is CustomClickLinkButtonEvent.

FireworkSDK.getInstance().shopping.onCustomClickLinkButton = async (event) => {
  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 page of the host app.
  navigation.navigate('LinkContent', { url: event.url });
};

onCustomTapProductCard

This callback is triggered when the user clicks the product card. The host app can customize the tap event processing logic of the product card by setting the callback. The event type is CustomTapProductCardEvent.

FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
  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 page of the host app.
  navigation.navigate('LinkContent', { url: event.url });
};

Props

cartIconVisible

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

productInfoViewConfiguration

The configuration of product info view. For example, you could customize the shopping CTA button text to "Add to cart" or "Shop now" by this property.

Hide the link button next to the shopping CTA button

FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
  linkButton: {
    isHidden: true,
  },
};

Customize product card

The following are sample codes. Please refer to ProductCardConfiguration for more details.

FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
  productCard: {
    theme: 'light', // or dark
    cornerRadius: 10, // configure product card corner radius
    isCtaButtonHidden: true, // hide product card cta button
    ctaButtonText: 'buyNow', // or shopNow
    ctaButtonStyle: {
      textColor: '#000000', // configure text color of product card CTA button
      fontSize: 16, // configure font size of product card CTA button
      iOSFontInfo: {
        fontName: 'Helvetica', // such as "Helvetica", "Helvetica-Bold"
        systemFontStyle: 'italic', // or normal.
        systemFontWeight: 'regular', // or medium, semibold or bold etc.
      },
    },
    priceConfiguration: {
      axis: 'horizontal', // or vertical
      priceLabel: {
        textColor: '#000000',
        fontSize: 16,
        numberOfLines: 2,
        iOSFontInfo: {
          fontName: 'Helvetica', // such as "Helvetica", "Helvetica-Bold"
          systemFontStyle: 'italic', // or normal.
          systemFontWeight: 'regular', // or medium, semibold or bold etc.
        },
      },
      originalPriceLabel: {
        textColor: '#000000',
        fontSize: 16,
        numberOfLines: 2,
        iOSFontInfo: {
          fontName: 'Helvetica', // such as "Helvetica", "Helvetica-Bold"
          systemFontStyle: 'italic', // or normal.
          systemFontWeight: 'regular', // or medium, semibold or bold etc.
        },
      },
      isPriceFirst: false,
    },
    width: 300,
    height: 120,
    backgroundColor: '#c0c0c0',
    iconConfiguration: {
      cornerRadius: 4,
    },
    nameLabel: {
      textColor: '#000000',
      fontSize: 16,
      numberOfLines: 2,
      iOSFontInfo: {
        fontName: 'Helvetica', // such as "Helvetica", "Helvetica-Bold"
        systemFontStyle: 'italic', // or normal.
        systemFontWeight: 'regular', // or medium, semibold or bold etc.
      },
    },
  },
};

We also provide a restricted API to customize product card using the custom view. Please refer to this link for more details.

Method

setCartItemCount

// The host app call this method to sycn cart item count to Firework SDK.
// The count should be greater than or equal to 0.
// We just use count to show or hide red indicator on the cart icon.
// If cound > 0, we will show the red indicator on the cart icon.
// Otherwise, we will hide the red indicator on the cart icon.
FireworkSDK.().shopping.setCartItemCount(cartItemCount);

Reference

VideoShopping