Product Hydration

There will be instances when products need to display differently from the data registered in Firework CMS. Product information can be updated from your OMS but not synced to Firework CMS. Product availability may also change based on real-time data. You can pass the latest information to the Firework player using Product Hydration.

Provide Product Data

With the Firework Shopping API onProductsLoaded, you can provide a list of products to be updated on the player interface. Consider the scenario above where the title and the product price are different in the e-commerce platform, and you want to display the most up-to-date information about the product on the player. You can use the following code snippet to achieve it:

Sample Code

// Helper method to convert a remote product to a Firework product object.
function createFWProduct(remoteProduct) {
  const { id, name, variations } = remoteProduct;
  return window._fwn.shopping.productFactory((product) => {
    // 1. Update the product title.
    product
      .extId(id)
      .name(name);

    // 2. Update product variant price and availability.
    for (const remoteVariant of variations) {
      const { 
        variation_id, 
        is_in_stock, 
        display_price,
      } = remoteVariant;
      product.variant((variant) => {
        variant
          .extId(variation_id)
          .isAvailable(is_in_stock)
          .price(display_price)
      );
    }
  });
}

// Configure callback to hydrate the product when the products are loaded.
window._fwn.shopping.onProductsLoaded(async ({products}) => {
  const productIds = products.map((product) => product.produce_ext_id);
  // Make a server request to get the latest product data.
  const remoteProducts = await fetchProductsFromServer(productIds);
  return remoteProducts.map((remoteProduct) => createFWProduct(remoteProduct));
});