# Cart Interaction

Use a cart interaction event to monitor customer activity when they add items to, remove items from, or replace the entire contents of their online shopping cart.

Cart interactions come in two forms:

- Single line item interactions: For modifying individual line items in the customer’s cart.
- Multiple line item interactions: For bulk operations against the customer’s cart.

## Single Line Item Interactions

These interaction names are used for cart interactions that affect individual line items.

| Interaction Name                                            | Value            |
| ----------------------------------------------------------- | ---------------- |
| `SalesforceInteractions.CartInteractionName.AddToCart`      | Add To Cart      |
| `SalesforceInteractions.CartInteractionName.RemoveFromCart` | Remove From Cart |

Here are fields for a single line cart interaction.

| Field Name | Field Type                                                                                 | Description                                  |
| ---------- | ------------------------------------------------------------------------------------------ | -------------------------------------------- |
| `lineItem` | [Line Item Data](/docs/data/salesforce-interactions-sdk/guide/c360a-api-line-item-data.md) | **Required**. A single Line Item Data value. |
| `name`     | string                                                                                     | **Required**. The event names.               |

To track adding or removing a single product, use the `AddToCart` or `RemoveFromCart` interaction names. The payload must contain a `lineItem` key with a single Line Item object as its value.

```javascript
// Example: Adding a single item to the cart
{
   interaction: {
        name: SalesforceInteractions.CartInteractionName.AddToCart,
        lineItem: { // Note the singular "lineItem"
            catalogObjectType: "Product",
            catalogObjectId: "product-1",
            quantity: 1,
            price: 9.99,
            currency: "USD",
            attributes: {
                giftWrapping: true
            }
        }
   }
}
```

## Multiple Line Item Interactions

These interaction names are used for cart interactions that affect all the line items in a cart.

| Interaction Name                                         | Value        |
| -------------------------------------------------------- | ------------ |
| `SalesforceInteractions.CartInteractionName.ReplaceCart` | Replace Cart |

Here are the fields for multiple line item cart interactions.

| Field Names | Field Type | Description                                                                                                                              |
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `lineItems` | array      | **Required**. An array of zero to many [Line Item Data](/docs/data/salesforce-interactions-sdk/guide/c360a-api-line-item-data.md) values |
| `name`      | string     | **Required**. The event names.                                                                                                           |

To track a bulk update that replaces all items in the cart, use the `ReplaceCart` interaction name. This is common after a login when merging a guest cart with a saved cart. The payload must contain a `lineItems` key with an array of Line Item objects as its value. An empty array indicates the cart is now empty.

```javascript
// Example: Replacing the cart with two different items
{
   interaction: {
        name: SalesforceInteractions.CartInteractionName.ReplaceCart,
        lineItems: [ // Note the plural "lineItems" array
          {
            catalogObjectType: "Product",
            catalogObjectId: "product-1",
            quantity: 1,
            price: 9.99,
            currency: "USD"
          },
          {
            catalogObjectType: "Product",
            catalogObjectId: "product-2",
            quantity: 3,
            price: 20,
            currency: "USD"
          }
        ]
   }
}
```

## Implementation Examples

### Transmit Events Using the Web SDK

You can send a cart interaction event directly from your own JavaScript code, such as within a custom event handler for an "Add to Cart" button using the Web SDK.

```javascript
// Fire this event from within your site's custom "addToCart" function
SalesforceInteractions.sendEvent({
  interaction: {
    name: SalesforceInteractions.CartInteractionName.AddToCart,
    lineItem: {
      catalogObjectType: "Product",
      catalogObjectId: "product-1",
      quantity: 1,
      price: 9.99,
      currency: "USD",
      attributes: {
        giftWrapping: 1,
      },
    },
  },
});
```

### Transmit Events Using a Sitemap Listener

For a more declarative approach, you can use the Sitemap to listen for user actions (like a button click) and automatically send the corresponding event.

```javascript
SalesforceInteractions.init().then(() => {
  const sitemapConfig = {
    global: {},
    pageTypes: [
      {
        name: "product_detail_page",
        isMatch: () => true,
        listeners: [
          // Listen for a click on any element with the class ".add-to-cart-button"
          SalesforceInteractions.listener("click", ".add-to-cart-button", () => {
            SalesforceInteractions.sendEvent({
              interaction: {
                name: SalesforceInteractions.CartInteractionName.AddToCart,
                lineItem: {
                  catalogObjectType: "Product",
                  catalogObjectId: "product-1", // Should be dynamically populated
                  quantity: 1, // from the page
                  price: 9.99,
                  currency: "USD",
                },
              },
            });
          }),
        ],
      },
    ],
  };
  SalesforceInteractions.initSitemap(sitemapConfig);
});
```

**See Also**

- [Custom Events](/docs/data/salesforce-interactions-sdk/guide/c360a-api-custom-events.md)
- [Translation of SDK Events to Web Connector Schemas](/docs/data/salesforce-interactions-sdk/guide/c360a-api-translating-sdk-events-to-web-connector-schemas.md)