# 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="/files/gm2703fj9mHFxx8xNksD" 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;
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/web/integration-guide/shopping-integration-v2/cart-sync.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.