# 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.

<figure><img src="https://688917408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MLoGG8m6bokS9YTmS7m%2Fuploads%2Fgit-blob-3aca40f82ada45b2b8a773323da5b9342cca11ac%2FCart%20Sync1.png?alt=media" alt=""><figcaption></figcaption></figure>

### Enable Cart Sync

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

```javascript
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:

```javascript
// 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.

```javascript
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;
});
```