FAQ - Shopping Integration

How to hydrate products individually for each authenticated user?

Firework's widget dispatches product hydration event as soon as possible, usually after video player is rendered. This might not be suitable in certain cases when you want to provide specific product updates based on user's preference (localization, discount, price for members..)

Most flexible way to achieve that is to store list of products and hydration action in a local variable for later use.

Example:

// Capture the list of products and action

let products, hydrateProduct;

document.addEventListener("fw:shopping:hydrate-products", function (event) {
  products = event.detail.products;
  hydrateProduct = event.detail.actions.shopping.hydrateProduct;
});

// ...

// Apply user discount after user's login

if (user.discount) {
  products.forEach((product) => {
    hydrateProduct(({ productFactory }) => {
      return productFactory((p) =>
        p
          .ext_id(product.product_ext_id)
          .price(user.discount * product.product_price)
      );
    });
  });
}

For detailed hydration options head to "Actions and factories"