Cart Sync

The product detail modal default displays a Shop Now button to navigate users to the product detail page. Cart Sync functionality enhances this experience by allowing users to add products to the cart directly in the player and increase the conversion rate. It will handle the following two scenarios:

1. A customer adds items to the website cart, you want to populate them in the player cart.

2. When the user adds an item to the player cart, you want to sync the update with the website cart.

Enable Cart Sync

To enable cart sync in the player, you need first to call configureCart method to set up the cart.

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

Provide Cart Items

Firework Shopping API onCartDisplayed allows you to provide a list of products to display on the Firework player cart so that the player can sync with changes on the website cart. The following code sample shows how to set this up:

// Helper method to convert a remote product to a Firework product object.
function parseProduct(remoteProduct) {
  return window._fwn.shopping.productFactory((builder) => {
    builder
      .description(remoteProduct.description)
      .extId(remoteProduct.id)
      .name(remoteProduct.title)
      .currency('USD')

    remoteProduct.variants.forEach((remoteVariant) => {
      builder.variant((variantBuilder) => {
        variantBuilder
          .extId(remoteVariant.id)
          .isAvailable(remoteVariant.isAvailable)
          .name(remoteVariant.name)
          .price(remoteVariant.price)
          .sku(remoteVariant.sku)
          .url('https://www.example.com')
          .image((imageBuilder) => {
            imageBuilder
              .extId(remoteVariant.featured_image.id)
              .position(remoteVariant.featured_image.position)
              .title(remoteVariant.featured_image.alt)
              .url(remoteVariant.featured_image.src)
          })

        remoteProduct.options.forEach(({ name, position }) => {
          remoteVariant.options[position - 1] &&
            variantBuilder.option({
              name,
              value: remoteVariant.options[position - 1],
            })
        })
      })
    })
  }, true)
}

window._fwn.shopping.onCartDisplayed(async () => {
  // 1. Make a request to get the latest cart.
  const remoteCart = await fetchCartFromServerOrCache();

  // 2. Return cart items.
  return remoteCart.items.map((remoteCartItem) => {
    const { unitId, quantity, product } = remoteCartItem;
    return { product: parseProduct(product), unitId, quantity }
  });
});

Handle Cart Update

Firework Shopping API onCartUpdated lets you notify the website when a user adds a product to the cart, updates the cart item quantity, or removes a cart item in the player cart.

window._fwn.shopping.onCartUpdated(async ({product, productUnit, quantity}) => {
  // Make a request to update the remote cart.
  const result = await updateVariant(product, productUnit, quantity);

  return result.quantity;
});