Basic how-to

Generic integration how-to provides steps to connect any e-commerce platform to Firework player shopping tools.

You need to import products to Firework business portal before you can start shopping Integration. Please refer to this section to read more about this

Events

Firework player emits custom javascript events whenever appropriate to ask for product details or inform about updates. Its up to storefront maintainer to react on any event and provide feedback using event actions. Firework player does not keep any state, rather ask for updates via events. The product and product units within Firework are expected to have external ids associated with the identifiers from the storefront maintainer.

Products hydration

Usually triggered when player loads video or livestream with products attached. Intent is to let storefront provide latest product updates (availablity, price) via "hydration". Event detail contains list of products, video and actions.

document.addEventListener('fw:shopping:hydrate-products', async event => {
    const { products, video, actions } = event.detail
})

Cart hydration

Triggered when player loads and detects any integration based on _fwnStoreFront object. Cart hydration is important to provide details on products already in user's cart so player can mirror current cart state (products, coupons and quantities).

document.addEventListener('fw:shopping:hydrate-cart', async (event) => {
  const { actions } = event.detail
}

Cart content has changed

Event triggered when user changes cart content from within player either by adding, removing or updating product (variant) quantity. Variants in Firework terminology are units. Intent here is to let storefront know its suppose to update certail cart item quantity.

document.addEventListener('fw:shopping:cart-updated', async (event) => {
  const { product, product_unit, quantity } = event.detail
})

Last updated