> For the complete documentation index, see [llms.txt](https://fredhopper.gitbook.io/product-discovery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fredhopper.gitbook.io/product-discovery/resources/archived-pages/the-tracking-api-and-js-library/what-to-track/generic-actions/add-to-cart.md).

# Add to Cart

When your user decides to add a product to cart, you should send an **add-to-cart** action. Add to cart actions are mostly used to calculate **add to cart** (or add to basket) conversion rates. You should send an add to cart event for each product the user adds to their cart and specify the quantity of the product added in the **metadata.**

## **Lister page**

When the add to cart comes from **navigation** result page or a **search** result page, rather than from a **product** **detail** **page,** we consider this as adding to cart from a **lister** page. See example:

```javascript
const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    },
    "sourceId": "5f0dfaf1-c79a-47fd-982f-b17de6533cf3" // optional, see below
}
xo.activity.send(addToCartAction);
```

The properties needed for sending an **add to cart** event from a lister page are as follows:

* `action` - you need to specify the action as **add-to-cart**
* `target.product` - you need to specify the product id that is added to cart. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `metadata.quantity` - you need to specify the quantity of the item added in the basket.
* `sourceId` - if you are implementing an **FHR** integration you should send over the **source id** of the page which corresponds to the `responseId` **\*\*from the** FHR query\*\* response.
* `locale` - the locale selected by the user.

Any additional information you wish to send(other than **quantity**) can also be included in the `metadata` \_\*\*\_object.

{% hint style="info" %}
**Important!** Don't forget, you need to send a separate event for every item.
{% endhint %}

## **Product detail page**

When the add to cart comes from a **product detail page**, you should omit the **source id**. See example:

```javascript
const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    }
}
xo.activity.send(addToCartAction);
```

The properties needed for sending an **add to cart** event from a product detail page are as follows:

* `action` - you need to specify the action as **add-to-cart**
* `target.product` - you need to specify the product id that is added to cart. If you are implementing an **FHR** integration, this would be equal to the `secondId` available in the **FHR query** response.
* `metadata.quantity` - you need to specify the quantity of the item added in the basket.
* `locale` - the locale selected by the user.

Any additional information you wish to send(other than **quantity**) can also be included in the `metadata` \_\*\*\_object.