Migrate from V1

If you have already integrated with our legacy event-based shopping integration, this page will help you migrate to the latest APIs.

Access Shopping API

Shopping APIs v2 is only available after Firework SDK is loaded. It's important to listen to fw-ready event, as well as checking whether the script is loaded already.

<script async src="//asset.fwcdn3.com/js/fwn.js" type="text/javascript" ></script>
<script>
  if (window._fwn?.shopping) {
    // if window._fwn?.shopping is loaded before this script tag, use it directly
  } else {
    document.addEventListener('fw-ready', () => {
      // window._fwn.shopping is available within the callback
    })
  }
</script>

Configure Cart

You no longer need to manually create the _fwnStoreFront object, which is now deprecated. To enable the cart sync feature, you must call _fwn.shopping.configureCart method.

window._fwn.shopping.configureCart({
  url: 'https://firework.com/cart',
  currency: 'USD'
})

Product Hydration

Use _fwn.shopping.onProductsLoaded to set up an async callback. Stop listening to fw:shopping:hydrate-products event. Check Product Hydration page for more details.

Cart Sync

To sync the website cart items with the player, use _fwn.shopping.onCartDisplayed to set up an async callback. Stop listening to fw:shopping:hydrate-cart event.

To sync the player cart updates with the website cart, use _fwn.shopping.onCartUpdated to set up an async callback. Stop listening to fw:shopping:cart-updated event.

Check Cart Sync page for more details.

Product Factory

validateRequiredFields is added to productFactory as a second param. It can be used to verify whether you miss any required fields while creating a new FW product. You can turn it on to double check your existing factory method.